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.
Finally, 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);
}
And finally, we need a CSS class that changes the background image when we hover over the image:
div.myRollover:hover {
background-image: url(2.jpg);
}
You can see this in action here:
http://www.dougv.com/demo/css_image_swap_mouseover/
I distribute all code under the latest version of the Creative Commons Attribution / Share-Alike License.
