Page 1 of 2
zoom in image on mouse over
Posted: Tue Sep 23, 2008 1:37 pm
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>
Re: zoom in image on mouse over
Posted: Tue Sep 23, 2008 2:34 pm
by gethinw
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
Posted: Wed Sep 24, 2008 6:48 am
by papa
I'd use CSS but JS should also work fine.
Re: zoom in image on mouse over
Posted: Wed Sep 24, 2008 9:10 am
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.
Re: zoom in image on mouse over
Posted: Wed Sep 24, 2008 9:57 am
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.
Re: zoom in image on mouse over
Posted: Wed Sep 24, 2008 10:15 am
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:
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:
Posting Code in the Forums to learn how to do it too.
Re: zoom in image on mouse over
Posted: Wed Sep 24, 2008 10:26 am
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"/>
Re: zoom in image on mouse over
Posted: Wed Sep 24, 2008 11:30 am
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.
Re: zoom in image on mouse over
Posted: Wed Sep 24, 2008 1:18 pm
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.
Re: zoom in image on mouse over
Posted: Wed Sep 24, 2008 1:55 pm
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!
Re: zoom in image on mouse over
Posted: Wed Sep 24, 2008 1:59 pm
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.
Re: zoom in image on mouse over
Posted: Wed Sep 24, 2008 2:04 pm
by iknowu99
dummysite: mishobonsai
Re: zoom in image on mouse over
Posted: Wed Sep 24, 2008 2:13 pm
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.
Re: zoom in image on mouse over
Posted: Wed Sep 24, 2008 2:18 pm
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.
Re: zoom in image on mouse over
Posted: Wed Sep 24, 2008 2:20 pm
by iknowu99
i still havent figured out how to do the zoom ....the picture goes under not ontop....