dougv.com « Doug Vanderweide

Simple Image Rollover Via CSS Only

Recently asked on Yahoo! Answers:

Is it possible to create a mouse over image that doesn’t use javascript?
And if not, is it possible to create one that doesn’t use the <a> link tag? I need to insert a mouse over image into a product page but the module I’m using already defines the <a> link for the potential button/mouse over image. ??? I just need to create a no-hassle, simple mouse over image that doesn’t use the <a> tag. If I use the <a> tag, it will override the link in the module. Help!

This is fairly easy to do with CSS alone, except rather than placing your image with an IMG tag, you use a DIV tag, and set the background-image property of that DIV to be the image you want to use.

Let’s start with the DIV itself, which calls a class we will call myRollover:

To make this work, we need a base style for the myRollover class that sets the height and width of the DIV to be those of the image; I’m also going to place a black scribe around the image.

The image is set as the background image of the DIV. So long as we don’t put any text or other content inside the containing DIV, it will appear like any other image on the page. To prove that, I’m going to float this “image” to the left, wrapping text around it, and set the margin of the DIV to 10px on the right and bottom to set the text off.

div.myRollover {
	float: left;
	margin: 0 10px 10px 0;
	width: 376px;
	height: 490px;
	border: solid 1px #000;
	background-image: url(3.jpg);
}

We need a CSS class that changes the background image when we hover over the image:

div.myRollover:hover {
	background-image: url(2.jpg);
}

Finally, we want to pre-load the rollover image so that the effect is seamless; we do that with an img tag that takes the class noshow, and by defining the noshow class as display: none.

img.noshow {
	display: none;
}

You can see this in action here:

http://www.dougv.com/demo/css_image_swap_mouseover/

I distribute code under the GNU GPL version 3.