HTML and CSS Reference
In-Depth Information
background-repeat: no-repeat;
display:block;
width:100px;
height:100px;
position:absolute;
top:450px;
left:400px;
}
#ex6:hover span {
background-image: url(clock.jpg);
background-repeat: no-repeat;
display:block;
width:100px;
height:100px;
position:absolute;
top:450px;
left:500px;
}
...
You can see the effect in Figure 8-19 (the mouse cursor does not show in the screen shots,
but you can see from the link styles which one is being hovered over).
Figure 8-19.
Hovering over links displays an image elsewhere on the page.
Remote Image Swapping and Sprites Combined
The previous example showed that it's possible to make an image appear elsewhere on the
page, not just underneath your mouse pointer. The problem with this technique, once again,
is the issue of preloading. These images may be quite large in file size and you don't want to
have a time delay. So, you can use the sprites technique (placing all the images in one image
