Creating a Basic Image Gallery with CSS Sprites - Complete Source Code for Both Versions of the Gallery
(Page 4 of 4 )
As I promised before, here are the respective code listings that correspond to each version of the image gallery that was explained in previous sections.
The complete source file for this version can be downloaded here.
<!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.
<!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 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. |
