Image Size on Hover

[mark87]

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]

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]

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]

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]

Thanks, still can't get it working though, and I copied your example exactly to make sure I was doing it right...

[harbingerOTV]

try this

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]

you will get pre made code at http://www.dynamicdrive.com

[mrruben5]

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.