I see a lot of websites nowadays that uses CSS instead of JavaScript for their image rollover needs. That’s great except for one minor problem that’s common with a few of them…they tend to use two seperate images: one for the original state (imgA), and other for the hover version (imgB). What’s wrong with that you ask? Well imgA gets cached as soon as the site loads up, however, imgB only gets cached when the mouse hover over imgA. This results in a delay, noticeable on a 56K modem or if the image is rather large in terms of file size.
So how do you solve this minor problem? By having both states in one image of course:

Note that the original version is on the left-half of the image, while the rollover version is on right-half. By only having one image, this results in no delay during hover. And here’s the CSS code to make it work:
a#creative {
display: block;
height: 100px;
width: 100px;
text-decoration: none;
text-indent: -5000px;
background: url('creative.gif') no-repeat top left;
}a:hover#creative {
background: url('creative.gif') no-repeat top right;
}
Note that the same image has been declared for both the a and the a:hover selectors with only the position property being different: top left for the original, and top right for hover. Using the following image as a guide, the a selector will only show the top-left of the image (highlighted in blue), while the a:hover selector will only show the top-right of the image (highlighted in red):

And finally, the HTML code, which is just a matter of adding the id selector name, in this case, creative, into the anchor element:
<a id="creative" href="http://raymondsantos.com/" mce_href="http://raymondsantos.com/">Raymond Santos Creative</a>
And here’s the final results:
Raymond Santos Creative
And that brings the end of my first tutorial written for Euphoric Realms. If there’s anything you don’t understand, please let me know.