Dan Olsavsky's Blog

Tuesday, October 16, 2007

CSS Image Roll-Overs

CSS Image Roll-overs.

By combining the four states of a button (normal, hover, active and visited) in to one image, the image roll-over happens quicker and requires less load time. In addition, the images are cached in to the temporary browser memory so they dont have to be re-loaded on to each page of the web site. (see CSS Sprites)

EXAMPLE:

The Image.





The CSS.

#button p a{
background-image: url(../images/button.jpg);
display: block;
height: 42px;
width: 107px;
background-position: 0px 0px;
}
#button p :hover{
background-position: -107px 0px;
}
#button p :active{
background-position: -214px 0px;
}

The HTML.

<div id="button">
<p><a href="read-more.html"><!-- --></a></p>
</div>

posted by dano at 9:53 AM

0 Comments:

Post a Comment

<< Home

© Dan Olsavsky | 2004-2009. This site is optimized for viewing in Mozilla's Firefox. Some features may not appear in other internet browsers. Please note that I do not develop the content for the websites featured in my portfolio. I do however, work with some phenomenal writers that can get the job done. The Search Engine Optimization on most of the sites was done by a highly-skilled professional at Page 1 Solutions, LLC. Some of the websites have been edited aesthetically by other Website Design Professionals but I keep the Lightbox images original, because I like to keep it real. I am employed full-time, however... you too can retain my services at a very reasonable rate! A huge shout out to everybody who has helped me along the way and who continue to support me. You know who you are.. Click here to view the Sitemap or click here to Contact me.