CSS Sprites

mouseOver to change images using only CSS

These are the images I made in Photoshop used to create the sprites. I took 2 and 3 images and stacked them one on another

dillo sprite

dillo sprite

initial sprite

Initial Sprite

mouseover example

Mouseover Example

light bulb sprite

Light Bulb Sprite

html and css symbol sprite

Code Sprite

email button sprite

Email Button Sprite

These images can be used to change images on mouseOver. It helps if you have access to Photoshop. The CSS used for the sprites is setting the width of the image to the full width of the image and set the height of the image to half the height of the image and set the display to block. This way only the top or the bottom image will be displayed at any given time. For example, the image “Code Sprite” is 75 pixels in width and 174 pixels in height. In the CSS style code the width is set at 75 pixels but the height is set at 87 pixels, roughly half the height of the image.

The main advantage for using CSS sprites is the speed of downloading one image instead of downloading two. In these examples there may not be a noticeable difference in time when using a high speed connection to the internet as with a DSL connection. But with larger images and a slower connection to the internet as with a dial up connection, the user may need to wait more time for the page to load; making for a less enjoyable experience for the user.

Click here to learn more about CSS sprites

If you don't have Photoshop, create your own using CSS Sprites Generator and only use small image files otherwise you defeat the purpose of maintaining the quickest page load time possible.

© 2012 Lasher Works | All Rights Reserved
Website Design and Maintenance by LasherWorks.ca

Valid CSS! Valid XHTML 1.0 Transitional