Creating a Basic Image Gallery with CSS Sprites - Improving the original CSS sprite-based image gallery
(Page 3 of 4 )
To correct the overlapping problem that occurs when the mouse cursor is positioned on a particular image, I'm simply going to modify the original CSS styles that correspond to this basic image gallery so that all the pictures can be displayed a bit more cleanly in the respective web page.
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 >>
More Style Sheets Articles
More By Alejandro Gervasio
