Using One Image for Multiple Buttons (Sprites) [StartupCTO]

Last Updated: 20 Oct 2023

|

Author: 135.181.114.235

Page locked

This page is currently locked for editing by another user. You have to wait until this user finishes editing or the lock expires.

Currently locked by: 43.173.179.70
Lock expires at: Dec 14, 2025 12:23 PM (176 min)

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.

= Using One Image for Multiple Buttons (Sprites) =

Each time you put an image in your HTML, your browser makes a request to the web server, which then serves that image file to the browser so it can be displayed. Those requests are expensive, so some people have started putting multiple small images (such as images for buttons or icons) into one larger image file, and then using background positioning to display only the appropriate part. That way, the browser only has to make one request to the web server; each 'image' displayed on a page is actually part of a larger image file.

You can see this on big sites like Yahoo. If you go to the [[http://www.yahoo.com|Yahoo Homepage]] and use [[http://www.getfirebug.com/|FireBug]] to inspect the icons on the left side, you'll see that every single one is stored in this file: http://l.yimg.com/a/i/ww/sp/trough_2.0.gif They use the positioning technique to display only the portion of the file they want (containing a single icon).

Here's how to do it: 
 * Make your buttons and put them all in one image. For our example case, we have Save & Cancel buttons (note the black border is unnecessary; it's just so you can see the images better):

{{:front-end-tech:css:buttons.gif|}}

 * Make an HTML file which has an element you can attach an image to. In this example, we'll use two ''<div>'' elements, but you can use pretty much any block-level element (''<div>'', ''<a>'', ''<p>'', etc.)

<code html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="button-save"></div>
<div id="button-cancel"></div>
</body>
</html>
</code>

 * Finally, make your style sheet and set the width, height & background properties:
<code css>
#button-save {
	width: 47px;		/* exact button width */
	height: 23px;		/* exact button height */
	/* button background: don't repeat the background, let it scroll with 
	   the page, and find the proper offset for the button in the file */
	background: url('buttons.gif') no-repeat scroll -6px -5px;
}

#button-cancel {
	width: 60px;
	height: 23px;
	background: url('buttons.gif') no-repeat scroll -6px -32px;
}
</code>

Page locked

About Me

Recent Changes

Get In Touch

Follow