An immediate rollover… with no delay!
Mario Laflamme March 7th, 2006 Add comment
I am convinced that most of you have already faced the problem caused by the rollovers with the delay of downloading the images. Several scripts exist and some work better than the others but the following technique is my favorite with its lightness… and even its accessibility!
Demonstration
First of all, merge the image OUT and the image OVER in a single image by placing them the one above the other one as the following image:
Then, insert the following HTML / XHTML code in your page:
<a href=”http://www.devtaxi.com/” class=”taxi”>Taxi</a>
Finally, insert the following CSS code in your style sheet.
a.taxi {
display: block;
text-indent: -10000px;
text-decoration: none;
width: 110px;
height: 73px;
background: url(taxi.gif) 0 -68px no-repeat;
}
a.taxi:hover {
background: url(taxi.gif) 0 0 no-repeat;
}
Here is the result:
Explanations
All the control is behind the background property which allows moving the image… which is half veiled with the height property which allows hiding a part of it. For its part, the text-indent property allows hiding the text, what turns out to be a better alternative than the image with its alt tag.
You can use this technique and simple modifications to achieve different results… among which a link like this one.