Sprite Image

Beautiful Buttonaad-ban

button

The best practice is to combine all button states into one image and divide them out using CSS. This is because it:

  • reduces http requests resulting in faster transfers
  • prevents flickering effect caused by change of state by loading all states as one file

The CSS Code

Now that we’ve brought the different states into a single image we need to tell the browser what part of the image we want when necessary through CSS.

The static, initial state of the button is defined in CSS as follows:

a.button {
	background: url(../images/button.png) no-repeat 0 0;
	width: 186px;
	height: 52px;
	display: block;
	text-indent: -9999px;
}

The background image is positioned to the top and left with the width and height of the button being defined as to only show the top third of the sprite. The rest of the code is a simple image replacement technique on the <a> tag that has a class of ‘button’.

Hover State CSS

The hover state retains all properties and values with the exception of the background position as it’ll need to be pushed up to show the second part of the sprite as shown:

a.button:hover { background-position: 0 -52px; }

Changing the first value would result in the background image moving left and right along the X axis. Obviously we don’t want that so the image is moved upwards along the Y axis as a negative value of the height of the button itself. This moves the hover state of the sprite into view when the mouse hovers over the link.

Click State CSS

As you can probably guess the click state will basically be the same but moving the button up again as follows:

a.button:active { background-position: 0 -104px; }

aad-ban1
Advertisements

4 thoughts on “Sprite Image

  1. Good day! I know this is kinda off topic nevertheless I’d figured I’d ask. Would you be interested in trading links or maybe guest authoring a blog post or vice-versa? My blog covers a lot of the same subjects as yours and I think we could greatly benefit from each other. If you happen to be interested feel free to send me an e-mail. I look forward to hearing from you! Awesome blog by the way!

  2. I definitely wanted to post a small message so as to express gratitude to you for some of the amazing tips you are placing on this site. My extensive internet investigation has at the end of the day been paid with incredibly good details to talk about with my relatives. I would declare that we website visitors actually are truly fortunate to dwell in a fabulous site with so many outstanding individuals with useful things. I feel rather fortunate to have come across your webpages and look forward to some more amazing moments reading here. Thank you again for all the details.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s