Image rollover thingy...

As with my previous imageless experiment this example only works in FireFox. I wanted to have a try at something a little more image dependant and what came to mind was dis/placed image rollovers of the type previously achieved with JavaScript - but I wanted to do it without JavaScript. I also wanted to make it multi-linkable so that links anywhere on the page could have effect on the main image, in this case a photograph of my car which I took last autumn.

Point your mouse at any of the colors at the bottom to change the car color or hover over one of the following text links...

So how does it work?

By including a <span> within the <a> tag and setting its display to none except in the hover state, and then using some absolute positioning to place the span in the right place over the image. There is only one set of CSS rules for the rollover and each separate rollover image is held within the span tag itself.

Wondering about the text alignment around the circled image?

This is just a set of empty divs with the right widths forcing the text to the right of the image.

© 2005 Marcos J. Drake. All rights reserved.
To find out more about me visit my portfolio.