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 order to build the basic image gallery that I mentioned in the beginning, the first step that I'm going to take involves creating the corresponding CSS sprites in such a way that each one of them will contain both a thumbnail and an enlarged version of the picture to display. Does this sound a bit confusing?

To clarify how every CSS sprite will be designed, take a look at the following background images, which will be used for building the image gallery in question. These pictures are included below:

Okay, at this time I believe that the above images should give you an accurate idea of how this sample image gallery is going to work. What I did here was basically create four background pictures, which as I said before, house both the scaled-down and enlarged versions of the image to be displayed.

Now that you have seen the four previous pictures, the set of CSS styles required for creating the sprites that will make the image gallery work properly is as simple as this:

<!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{
       width: 100px;
       height: 83px;
       margin: 0;
       padding: 0;
    }

    #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{
       width: 100px;
       height: 83px;
       margin: 0;
       padding: 0;
    }

    #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{
       width: 100px;
       height: 83px;
       margin: 0;
       padding: 0;
    }

    #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{
       width: 100px;
       height: 83px;
       margin: 0;
       padding: 0;
    }

    #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>

For this specific case, I defined four DIVs that will behave as the respective containers for each one of the images that comprises the gallery, something that's clearly reflected by the structural markup that corresponds to the previous file.

Also, it's worthwhile to notice here how the image gallery works. Each time the mouse is positioned over a specific picture included in the web document, its enlarged version is displayed, according to the structure of the CSS sprites that were created previously.

Of course, this happens like this simply because every a:hover subclass that corresponds to the links included into the gallery changes the position of each background image. Quite simple, right?

However, there are a couple of bugs to correct with reference to the above example, since each time the mouse cursor is located on a thumbnail, it overlaps with the next image. This makes the whole gallery look rather primitive.

Therefore, in the course of the section to come I'm going to modify some of the CSS styles that you learned before to correct this problem.

Want to see how the improved incarnation of this image gallery will look? Okay, click on the link that appears below and keep reading.

Next: Improving the original CSS sprite-based image gallery >>