STYLE SHEETS

Creating a Basic Image Gallery with CSS Sprites

If you’re a web designer who’s looking for an approach to reduce the number of requests made by the browser, then you should examine the vast terrain of CSS sprites. Welcome to the final part of the series “Using CSS Sprites.” This three-part series shows you how to incorporate them into real world applications, and provides you with a respectable set of practical examples on the topic.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 6

February 26, 2007

TABLE OF CONTENTS:

In this case, the modifications that I'm going to introduce to the CSS rules will affect basically the values of the margins attached to each image that belongs to the gallery, but this quick and dirty solution can be easily replaced by creating a carefully-planned layout of the web document where the pictures will be displayed.

Having clarified this important point, here is the complete source code that corresponds to the improved version of the sample image gallery. Have a look at the signature of this new file, please:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Rollover Buttons using CSS sprites</title>
<style type="text/css">
    body{
       padding: 0;
       margin: 0;
       background: #fff;
    }

    h1{
       font: bold 24px Arial, Helvetica, sans-serif;
       color: #000;
    }

    #diva,#divb,#divc,#divd{
       width: 100px;
       height: 83px;
       margin: 0;
       padding: 0;
       margin-bottom: 170px;
    }

    #diva a:link,#diva a:visited{
       display: block;
       width: 100px;
       height: 83px;
       color: #fff;
       background: #fff url(bg_img1.jpg) 0 0 no-repeat;
    }

    #diva a:hover{
       display: block;
       width: 300px;
       height: 250px;
       color: #fff;
       background-position: -100px 0px;
    }

    #divb a:link,#divb a:visited{
       display: block;
       width: 100px;
       height: 83px;
       color: #fff;
       background: #fff url(bg_img2.jpg) 0 0 no-repeat;
    }

    #divb a:hover{
       display: block;
       width: 300px;
       height: 250px;
       color: #fff;
       background-position: -100px 0px;
    }

    #divc a:link,#divc a:visited{
       display: block;
       width: 100px;
       height: 83px;
       color: #fff;
       background: #fff url(bg_img2.jpg) 0 0 no-repeat;
    }

    #divc a:hover{
       display: block;
       width: 300px;
       height: 250px;
       color: #c90;
       background-position: -100px 0px;
    }

    #divd a:link,#divd a:visited{
       display: block;
       width: 100px;
       height: 83px;
       color: #000;
       background: #fff url(bg_img2.jpg) 0 0 no-repeat;
    }

    #divd a:hover{
       display: block;
       width: 300px;
       height: 250px;
       color: #c90;
       background-position: -100px 0px;
    }
</style>
</head>
<body>
    <h1>Simple Image Gallery using CSS sprites</h1>
    <div id="diva"><a href="#"></a></div>
    <div id="divb"><a href="#"></a></div>
    <div id="divc"><a href="#"></a></div>
    <div id="divd"><a href="#"></a></div>
</body>
</html>

As shown above, each of the images that comprises this basic gallery has now been spaced significantly in respect to each other, in this way solving the overlapping issue that I discussed in the previous section. However, as I said before, this is a primitive solution that should be replaced, for example, with a better layout of the web document where the gallery is going to be included.

Well, at this time I'm pretty certain that you already understood how a simple image gallery can be created with a few basic CSS sprites. As you saw, the process is extremely simple. It can be achieved only by designing all the background images in a way that can be easily manipulated via CSS code.

Having provided you with two versions of this sample image gallery, in the final section of this tutorial I'll list the complete source code of each of them, making it easy for you to use the one that best suits your needs.

So, don't waste more time; jump straight into the following section. We're almost finished!

Next: Complete Source Code for Both Versions of the Gallery >>