View Full Version : Hover link help


Devil Maud
05-29-2004, 12:33 AM
Basicly, I want a hover link that changes from one image to another. When the mouse goes over my image link, it shows another image. That's what I want. I don't know how to do that though. Is there a way to do it? I also want it for only one link if that's possible. But if it's not, I still want to know how to use an image for hover.

Rosey
05-29-2004, 02:00 AM
Try this:

http://www.lissaexplains.com/javascript3.shtml#images

Calidris
05-29-2004, 10:36 AM
Rollovers in CSS are much nicer than JavaScript (although JavaScript would work just fine too).

There's a few options depending on how accessible you want your site to be, here's just one method:

<style type="text/css">
#MyLink {
display: block;
width: 100px;
height: 50px;
background: url('my_image.jpg') no-repeat;
text-indent: -1000px;
}
#MyLink:hover {
background-image: url('my_second_image.jpg');
}
</style>
<a id="MyLink" href="link.html">My Link</a>
It's worth trying that on an empty page before you start trying to put it into an existing site :)

pb&j
05-29-2004, 03:14 PM
last i checked, css rollovers were not fully supported except for the links.
try it and test it though ;)

Calidris
05-29-2004, 11:03 PM
yup, tested and works. MSIE only supports the :hover pseudo-class on anchors (links), that's why I used a link :)

Devil Maud
05-30-2004, 03:51 AM
Thankyou so much! It turned out beautifully!