What are we facing?
I liked the post about Rollover Image for links using pure CSS but I would like to have just one image, not two: one for the "regular state" and another for the "hover state". There could be a delay between loading the first image and the second image, causing flickering. Is it possible doing that with just pure CSS? Am I being too demanding?
The Solution
Fortunately, CSS provides the power to do that. It is called the Pixy-style rollover. Let's use the same example of the previous post.
Here is the same image but merged vertically:
Using the following link code:
<a href="http://www.aggiorno.com/try.aspx" id="pixy"><span>aggiorno</span></a>
And using the following CSS
a#pixy {
background:transparent url(“Aggiorno-sprite.jpg”) no-repeat scroll center top;
display:block;
height:110px !important;
width:110px;
}
a#pixy span { display:none; }
a#pixy:hover { background-position:center bottom; }
You then will get the link showing the top part of the image when regular state. In hover state, the bottom part is displayed. Hover it and believe your eyes:
aggiorno
Some external references
[advertisement] Try
Aggiorno for free, the assistant tool for web development you always wanted.
