HTML and CSS Reference
In-Depth Information
and revealing only what's needed), but that could make matters worse as when the visitor to
your site hovers over the link, the server needs to fetch one large image only to display a portion
of it. Madness? No, because we can preload by placing an element on the page (a
span
) and
apply the background image to that element. However, because the
span
element is empty, the
preloaded background image will not show but when the visitor hovers over the link: bingo!
The image is already downloaded there on the computer's hard drive. Whichever link we hover
over, we know the image is there ready and waiting to be used.
#imagepreload {
background-image: url(prague-big.jpg);
}
#ex7:hover span {
background-image: url(prague-big.jpg);
background-repeat: no-repeat;
display:block;
width:100px;
height:100px;
position:absolute;
top:550px;
left:300px;
}
#ex8:hover span {
background-image: url(prague-big.jpg);
background-repeat: no-repeat;
background-position: -100px 0;
display:block;
width:100px;
height:100px;
position:absolute;
top:550px;
left:400px;
}
#ex9:hover span {
background-image: url(prague-big.jpg);
background-repeat: no-repeat;
background-position: -200px 0;
display:block;
width:100px;
height:100px;
position:absolute;
top:550px;
left:500px;
}
...
<span id="imagepreload"></span>
