The CSS method uses what is known as an image sprite to load all the rollover effects as a single image and we then use CSS to do the transition. To create the image sprite just create a single image containing all of the individual transitions. Once you have your image sprite you just need the HTML and CSS code:
CSS Code:
a.grnBTN {
display: block;
width: 200px;
height: 45px;
text-decoration: none;
background: url(“greenBTN.png”);
background-position: 200px;
}
a.grnBTN:hover {
background-position: 0 0;
}
.displace {
position: absolute;
left: -5000px;
}
HTML Code:
<a href="#" class="grnBTN" title="Image Title">
<span class="displace">Alternative Text</span>
</a>
- The width and height values in a.rollover are the size of the original image.
- The value of background-position is that of the original image width since we are literally moving from one part of the image sprite to another.
- The <span> tag was included with a text alternative to the image and displaced it off the side of the visible screen so that screen readers will read it and in the event of no CSS support a text link will be shown instead.
Working Example:
Hey, Good blog you have here. I wanted to let you all know that I think Twitter is going to be one of the better networks because of the fact that it is supported by so many industries. I also think when Twitter reveals some of it’s new features, returning traffic will go up to show the real growth of the network.
Anyway, I created a blog that offerers great resources for Twitter that are 100% free, so come and visit and don’t be a stranger.
Keep up the great work!
Exceptional read, I just passed this onto a colleague who was doing some on-line research on that. And he in fact bought me lunch due to the fact I discovered it for him grin So allow me to rephrase that: Thank you for lunch!