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.
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.
Powered by vBulletin® Version 4.2.2 Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.