Marusya's School Notes

Image Sprites

An Image Sprite

An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth. Instead of using separate multiple images, we use a single image which have all images in it. Then, with CSS, we can show just the part of the image sprite that we need. In the following example, the easiest way to use image sprites is to have CSS specify which part of the image to show:

HTML file:

Displayed by browser:

<body>
<img id="home" src="../html_beg/images/img_trans.gif">
<hr />
<h3>Example Explained:</h3>
<p><b><img id="home" src="../html_beg/images/img_trans.gif"></b>
<br />    This line defines a small transparent image because the src attribute cannot be empty. The displayed image will be the background image we specify in CSS (img_navsprites.gif)</p>
<p><b>width: 46px; height: 44px;</b>
<br />    Defines the portion of the image we want to use</p>
<p><b>background: url(../html_beg/images/img_navsprites.gif) 0 0;</b>
<br />    Defines the background image and its position (left 0px, top 0px)</p>
<hr />
<table class="small">
    <tr>
        <td class="small">
<img id="next" src="../html_beg/images/img_trans.gif">
        </td>
        <td class="small">
<p>Now we can expand on this by using links and hover effects...</p>
        </td>
    </tr>
</table>
</body>

Example Explained:

<img id="home" src="../html_beg/images/img_trans.gif">
This line defines a small transparent image because the src attribute cannot be empty. The displayed image will be the background image we specify in CSS (img_navsprites.gif)

width: 46px; height: 44px;
Defines the portion of the image we want to use

background: url(../html_beg/images/img_navsprites.gif) 0 0;
Defines the background image and its position (left 0px, top 0px)

Now we can expand on this by using links and hover effects...

The days of javascript rollovers are over because it can be done with CSS now.