Pure CSS rollover images

[midevilb]

Hey everyone. I've seen alot of examples for CSS rollovers that utilize a background image change but I'm going for something more graphically intense and i'm looking to create links that mouseover but trying to do so without employing text.

here is the current version using javascript, which i am trying to replace with pure css:

http://www.alimahamani.com


Any help?

Thanks,
Brian

[jscheuer1]

For that you would use the hover pseudo class and a background image change. The link would need to be display:block and set to the dimensions of the image, loosely:


a#anch1 {
background-image:url(some.gif);
width:90px;
height:35px;
display:block;
}

a#anch1:hover {
background-image:url(some_other.gif);
}

It's true that its more efficient if you use text over a plain image, that way there is very little in the way of images that need to be cached by the user. But you can use pairs of images, one pair for each link for a more intricate or dramatic look. Images can be preloaded without javascript by putting img tags for them on the page in a hidden division positioned absolutely off to the top and left of the window.