CSS: Image Rollover
This page shows how to do image rollover with CSS.
Here is a image rollover. Hover your mouse over it.
Here is the HTML:
<div id="roll86705"></div>
Here is the CSS:
#roll86705 { width:128px; height:128px; background:url(i/tile_A.png) } #roll86705:hover { background:url(i/tile_B.png) }
The trick is using the :hover
pseudo selector.
You can add the :hover
pseudo selector to other element, then specify in CSS for the appearance when user hovers over a HTML element.
For a JavaScript version of image rollover, see: Image Rollover .