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:

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

The complete source file for this version can be downloaded here.

    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 usual, you can also download a ZIP file here containing all the supporting material and source files that belong to this CSS sprite-based image gallery.

Conclusion

Sad but true, this is the end of the series. However, in these three articles, I walked you through the basic points of creating and using CSS sprites to prevent delays when displaying background images, and to decrease the number of requests made by the browser. I hope you enjoy using this neat and unusual approach.

See you in the next web development tutorial!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.