zoom in image on mouse over
Moderator: General Moderators
zoom in image on mouse over
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>
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>
Re: zoom in image on mouse over
You want javascript to do that - it's client-side scripting not server-side, so php will be no use.
Re: zoom in image on mouse over
I'd use CSS but JS should also work fine.
Re: zoom in image on mouse over
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.
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.
Re: zoom in image on mouse over
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.
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.
Re: zoom in image on mouse over
~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:
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:
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:
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>
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:
Re: zoom in image on mouse over
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:
and use this for the image:
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>
Code: Select all
<img src="pig.gif" width="250" height="150" class="enlargeimage"/>Re: zoom in image on mouse over
~gethinw is on to something. IE only listens to the hover state for links though, so you'll have to change it a bit:
That should do it. It won't have the fancy animation, but it also doesn't require Javascript.
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> Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Re: zoom in image on mouse over
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.
Re: zoom in image on mouse over
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!
And thanks pickle - forgot about the image having to be a link!
Re: zoom in image on mouse over
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.
Re: zoom in image on mouse over
dummysite: mishobonsai
Re: zoom in image on mouse over
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.
Re: zoom in image on mouse over
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.
Re: zoom in image on mouse over
i still havent figured out how to do the zoom ....the picture goes under not ontop....