View Full Version : CSS Rollovers

07-09-2007, 04:07 PM

I have been doing CSS for a few months now on and off (well the web design has been on and off).

Anyway, I want to start using the CSS rollover technique for a website I am working on. I have found some good tutorials for it and understand it etc. But I have a question.

When I rollover one image, I want it to make another image visible (i.e. visibility:visible) is this possible at all in CSS or should I look into Javascript rollovers etc.


07-09-2007, 04:32 PM
Do you mean you want the image to change to another image, or a image to appear elsewhere on the page, when the first image is rolled over?

For the first method this is easy with links as you can just use a background-image in the a and a:hover states that is different, so when the link is hovered a different image is shown.

You can use just the :hover psuedo class on objects, but this will not work in IE6-

Instead of visibity, you would use display: hidden; and display: block to hide and show certain elements.

07-10-2007, 09:51 AM
Ok thanks but what I meant was that I want it to show another image.

Say image1 was rolledover by the user, I want this to change image2 to not be hidden.

So what I am asking is, can you reference other image's properties in another image's method (if that is the right word)?


07-10-2007, 10:06 AM

This might help in that case! And try the link on that page to Eric Meyers too!

07-10-2007, 11:21 AM
Ok thanks, I'll check it out in a moment.

07-11-2007, 02:34 AM
Do you mean something more like this

This is a method I came up with a while ago, but I haven't used it on a site yet.

This version works for stand alone image replacement, but the code could be adapted to work as an unordered list for a navigation bar. If it was just a small number of pages to navigate I would just use the divs though.

07-11-2007, 11:32 PM
Here is a really cool way to do rollovers with a single image

No Preload CSS Rollovers


07-12-2007, 03:36 PM
Thanks Donkey and Oldcrazylegs, but what I was looking for was more like what ahallicks gave me. As I want to rollover image1 (for example) and it changes the state of image2. Not to rollover image1, and it just changes the image of image1, if you know what I mean.