HTML and CSS Reference
In-Depth Information
As you can see from the CSS, in the hover state the background image is slid 17 pixels to the
left, thus revealing the different portion of the image.
Because the image has already been downloaded for the default state, there is no need to
call a new image off the server, so we have effectively preloaded all the images we need.
Remote Image Swaps
Perhaps you're thinking. “Ah, that's all well and good if I want the image underneath the mouse
pointer to change on hover, but my JavaScript changes an image elsewhere on the page. CSS
can't do that, can it?”
Actually, it can . . . but not in all cases. Let's look at an example. The following CSS works
by placing an empty span element inside the link that triggers the hover effect, and applying
a unique id to that link:
<li><a href="nowhere.html" id="ex4" >Link one <span></span> </a></li>
<li><a href="nowhere.html" id="ex5" >Link two <span></span> </a></li>
<li><a href="nowhere.html" id="ex6" >Link three <span></span> </a></li>
When the mouse hovers on that link, we can set the span element to display as a block-
level element somewhere else on the page (using absolute positioning) and with whatever
background image we want. Because that span element is empty, we'll also need to specify
height and width , as illustrated in Figure 8-18; otherwise, it won't show up on the page.
Figure 8-18. An empty span, positioned absolutely and set to display as a block-level element
and given a fixed height and width (border shown for demonstration purposes only)
And here's the CSS that achieves the aims stated in the preceding section—the positioning
aspects are highlighted in bold:
#ex4:hover span {
background: url(metro.jpg);
background-repeat: no-repeat;
#ex5:hover span {
background-image: url(tower.jpg);
Search WWH ::

Custom Search