CSS Rollovers 1 image
Posted on September 6th, 2011
The default image that is visible to the user is the black & white yaprak_bw.png and when you hover over the image, it’s replaced by yaprak_color.png with its full-color glory. However, if this is a user’s initial visit to the website and therefore the color image hasn’t already been cached, there may be a user-perceivable delay in switching to the color image. The net annoyance will depend on factors like the user’s connection speed, the load on the web server and most importantly, the attentiveness of the user. A couple of methods can be applied to pre-load alternate images to avoid the perceived latency but I will advocate for something else: don’t use separate alternate images in the first place. You can use a single image where the two rollover images are flush with each other, side by side or one on top of another. Here’s how:
The HTML code is the same. The CSS this time has:
a#yaprak {
width: 64px;
height: 64px;
background-image: url(yaprak_bw_color.png);
display: block;
text-decoration: none;
}
a#yaprak:hover {
background-position: 64px 0;
}
There’s only a single image:
Using fewer images might marginally speed up the load times for your website while also decreasing the load on your web server. Another scant advantage is that you’d have less images to worry about maintaining and uploading to your web server.
