Figure 1: Multiple-image Rollover Sprite
Figure 1 shows the on and off image mini-sprite (enlarged for easier viewing). To display the on and off portion of our image we just need to change the background position in our menu. Here is the code:
a:link, a:visited {
display: block;
width: 127px;
height:25px;
line-height: 25px;
color: #000;
text-decoration: none;
background: #fc0 url(image-rolloverdual.png) no-repeat left top;
text-indent: 25px;
color: #000;
}
a:hover {
/* background: #c00; */
background-position: right top;
color: #fff;
}
The background in the off state (:link) positions the background image to the left and top showing the off state portion of the image. On rollover (:hover) the background position is shifted to the right displaying the “on” portion of the background image. The width value effectively clips the image to show only the portion of the image that you want displayed. You can also use this technique to highlight visited links. For extra credit, create the above effect entirely with CSS.
Here is the finished version of the dual rollover.