zoom in image on mouse over

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
iknowu99
Forum Commoner
Posts: 39
Joined: Thu Aug 14, 2008 3:20 pm

zoom in image on mouse over

Post by iknowu99 »

hello all,

I would like to have an image that's already sized to get bigger on mouse over over the text link underneath it.


for now what i have is the link and it goes to the picture by itself with no webpage....not eye friendly and gota press back button every time.....

<code>

<img src="Pic.gif" width="250" height="150"><p>
<font size="2"><a href="Pic.gif">Here is some text.</a></font></p>

</code>
gethinw
Forum Newbie
Posts: 16
Joined: Tue Sep 23, 2008 4:02 am

Re: zoom in image on mouse over

Post by gethinw »

You want javascript to do that - it's client-side scripting not server-side, so php will be no use.
User avatar
papa
Forum Regular
Posts: 958
Joined: Wed Aug 27, 2008 3:36 am
Location: Sweden/Sthlm

Re: zoom in image on mouse over

Post by papa »

I'd use CSS but JS should also work fine.
User avatar
iknowu99
Forum Commoner
Posts: 39
Joined: Thu Aug 14, 2008 3:20 pm

Re: zoom in image on mouse over

Post by iknowu99 »

thanks for the replys, i found this: http://www.tek-tips.com/viewthread.cfm? ... 751&page=7

but still dont know how to apply it. I'm new to website programming.

The goal is to have the text that's under the image to have an event. This event will show the picture in a larger size.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: zoom in image on mouse over

Post by pickle »

Moved to Client Side.


You want to tie some code to the links onmouseover() event. When that code is fired, do an animation to make the appropriate photo larger. I'd personally use jQuery for this.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
iknowu99
Forum Commoner
Posts: 39
Joined: Thu Aug 14, 2008 3:20 pm

Re: zoom in image on mouse over

Post by iknowu99 »

~pickle | Please use [ code=html ], [ code=php ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.


sorry for posting in wrong section, learning more and more thanks to this forum.

pickle, here is my code:

Code: Select all

 
<img src="Pic.gif" width="250" height="150"><p>
<font size="2"><a href="Pic.gif">Here is some text.</a></font></p> 
 
where would i write in onmouseover?

all i want is on mouse over to have width=500, height = 300


~pickle | Please use [ code=html ], [ code=php ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.
gethinw
Forum Newbie
Posts: 16
Joined: Tue Sep 23, 2008 4:02 am

Re: zoom in image on mouse over

Post by gethinw »

Put it in whatever you want to cause the event - ie, if you want the image to enlarge when you go over the image, put it in the img tag, if you want it to be when you go over the text, put it in the a tag. You'll also need an onmouseout event so that it shrinks again. Go and look at some javascript references and examples to see how to do this.

Alternatively, if you want it to happen when you put your mouse over the image, you could do it with css, which is probably a bit easier. You'd need something like:

in <head> section:

Code: Select all

 
<style type=text/css>
.enlargeimage:hover {
width=500;
height=300;
}
</style>
 
and use this for the image:

Code: Select all

<img src="pig.gif" width="250" height="150" class="enlargeimage"/>
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: zoom in image on mouse over

Post by pickle »

~gethinw is on to something. IE only listens to the hover state for links though, so you'll have to change it a bit:

Code: Select all

 .enlarge img{
width:150px;
height:250px;
}
.enlarge:hover img{
width:300px;
height:500px;
} 

Code: Select all

<a href = "#" class = "enlarge">
<img src = "/path/to/image">
Hover to enlarge
</a> 
That should do it. It won't have the fancy animation, but it also doesn't require Javascript.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
iknowu99
Forum Commoner
Posts: 39
Joined: Thu Aug 14, 2008 3:20 pm

Re: zoom in image on mouse over

Post by iknowu99 »

well...the good news is we are on to something....the larger picture is not the top layer. so on mouse over it gets large but other pics on the page are on top...the goal is to have the large image be priority and on top of everything else when on mouse over.
gethinw
Forum Newbie
Posts: 16
Joined: Tue Sep 23, 2008 4:02 am

Re: zoom in image on mouse over

Post by gethinw »

Sounds like you need to fiddle around with z-index, have a look and google and I'm sure you can find something. It's quite hard to visualise what you're trying to do, so maybe a dummy site would be useful.

And thanks pickle - forgot about the image having to be a link!
User avatar
iknowu99
Forum Commoner
Posts: 39
Joined: Thu Aug 14, 2008 3:20 pm

Re: zoom in image on mouse over

Post by iknowu99 »

pickle's work is doing everything right except for these pictures were originally in <div> tags. if this helps to know more about the site....but on mouse over the picture enlarges and some of it is not seen becuase of the pics around it. all pics around it are similar and will be enlarged with mouseover option.
User avatar
iknowu99
Forum Commoner
Posts: 39
Joined: Thu Aug 14, 2008 3:20 pm

Re: zoom in image on mouse over

Post by iknowu99 »

dummysite: mishobonsai
User avatar
iknowu99
Forum Commoner
Posts: 39
Joined: Thu Aug 14, 2008 3:20 pm

Re: zoom in image on mouse over

Post by iknowu99 »

i found myself looking for freelancers. how difficult would it be to recreate that misho site? the goal is to use paypal like they do, the goal is to have a myaccount option (which in my guess is sql). and i have no idea how this session idea is done in safe way so that there is a way to sign up with an email and have logon/off options. because i would also be cautiose of many fake bots trying to sign up to my site ..or something like that...so my question is how difficult would it be to recreate a similar site.
gethinw
Forum Newbie
Posts: 16
Joined: Tue Sep 23, 2008 4:02 am

Re: zoom in image on mouse over

Post by gethinw »

Well, not wanting to be rude, but if you couldn't work out from looking on google how to do the image zooming thing then I wouldn't even think about trying something like that. If you have no knowledge of javascript and php (or other server-side technology) then I would definitely suggest starting somewhere much simpler and working your way up.
User avatar
iknowu99
Forum Commoner
Posts: 39
Joined: Thu Aug 14, 2008 3:20 pm

Re: zoom in image on mouse over

Post by iknowu99 »

i still havent figured out how to do the zoom ....the picture goes under not ontop....
Post Reply