...

View Full Version : Image Size on Hover



mark87
05-29-2005, 01:32 PM
Is there a way to change an image size when a link of an image is hovered over? I can't seem to work it out...

mrruben5
05-29-2005, 02:23 PM
Yes this is possible. You can do this with javascript or css.

javascript:

onmouseover="this.size=x" onmouseout="this.size=x" or something like that.

css:

a:hover img#id {width: 300px;}, where #id=is the idd of the image.

I don't know if both ways work though, not tried.

mark87
05-29-2005, 02:30 PM
Thanks, only tried the CSS method but can't seem to get it to work - here's what I have if you can see where I'm going wrong -

CSS -

a:link img#im {
width: 60px;
height: 65px;
border: 10px solid #0000FF;
}

a:hover img#im {
width: 80px;
height: 85px;
border: 1px solid #0000FF;
}

HTML -

<ul>
<li><a href="#"><img id="im" src="image1.jpg"></a></li>
<li><a href="#"><img id="im" src="image2.jpg"></a></li>
<li><a href="#"><img id="im" src="image3.jpg"></a></li>
<li><a href="#"><img id="im" src="image4.jpg"></a></li>
<li><a href="#"><img id="im" src="image5.jpg"></a></li>
</ul>

I'm guessing where it's not working is the fact each image has the same ID... but this is for a menu where I want each image to get larger on hover.

Bill Posters
05-29-2005, 03:02 PM
e.g.

ul, li {
list-style: none;
}

ul#im a:link img {
width: 60px;
height: 65px;
border: 10px solid #0000FF;
}

ul#im a:hover img {
width: 78px;
height: 83px;
border: 1px solid #0000FF;
}


<ul id="im">
<li><a href=""><img src="image1.jpg" width="60" height="65" alt=""></a></li>
<li><a href=""><img src="image2.jpg" width="60" height="65" alt=""></a></li>
<li><a href=""><img src="image3.jpg" width="60" height="65" alt=""></a></li>
<li><a href=""><img src="image4.jpg" width="60" height="65" alt=""></a></li>
<li><a href=""><img src="image5.jpg" width="60" height="65" alt=""></a></li>
</ul>

mark87
05-29-2005, 03:18 PM
Thanks, still can't get it working though, and I copied your example exactly to make sure I was doing it right... :confused:

harbingerOTV
05-29-2005, 04:53 PM
try this (http://home.earthlink.net/~harbingerofthevoid/testing/bignav.html)

IE6 and Mozilla likes it.


I'll assume it was IE giving you a hard time as mozilla liked Bills' code well enough.

jadusoft.com
05-30-2005, 09:48 AM
you will get pre made code at http://www.dynamicdrive.com

mrruben5
05-30-2005, 12:10 PM
Off course! A background image! That always helps, but you can't scale the image then. And that's what he's trying to acomplish.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum