Building a Dynamic Banner with CSS Sprites - Building a banner the classic way
(Page 2 of 4 )
Prior to developing a hands-on example where a dynamic banner will be created using CSS sprites, I'd like to show you a more conventional approach to building this popular web page element. I'm introducing this example to help you spot the differences between both methods, so you can eventually choose the one that best suits your needs.
The banner that I plan to create here will be comprised basically of two background images, which are shown below in the order they will be displayed. Having said this, take a look at them, please:
As you'll realize, instead of using an animated GIF, or even a Flash movie to build the sample dynamic banner, I'm going to use a pair of JPG images. As you saw, they are appealing enough to attract potential visitors.
The functionality exposed by the banner in question will be limited to displaying initially the first background image, and then showing the second one when the mouse cursor is positioned over the banner container. There's nothing unexpected here, right?
Now, having explained how the banner included into this example will work, please take a look at the following code listing. It is responsible for turning the corresponding banner into a fully-functional element of any web document. Here is the source code:
<!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>Sample Banner using CSS</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 24px Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
}
#bannercontainer{
width: 400px;
height: 100px;
padding: 0;
margin-left: auto;
margin-right: auto;
background: #eee;
border: 1px solid #000;
}
#bannercontainer a{
display: block;
width: 400px;
height: 100px;
padding: 0;
background: #eee url(banner1.jpg) 0 0 no-repeat;
}
#bannercontainer a:link,a:visited{
background: #eee url(banner1.jpg) 0 0 no-repeat;
}
#bannercontainer a:hover{
background: #eee url(banner2.jpg) 0 0 no-repeat;
}
</style>
</head>
<body>
<h1>Sample Banner using CSS</h1>
<div id="bannercontainer"><a href=http://www.php.net
title="Download PHP now!"></a></div>
</body>
</html>
With reference to the above example, there's a couple of things that are really worth noting. First, you should notice that the banner is created by including a simple link to the web document, as well as adding the proper CSS styles to it.
And second, the two background images that you saw a few lines before are attached to the respective a:link/a:visited and a:hover states of the <a> tag that correspond to the banner in question. Pretty simple, isn't it?
Of course, the result of implementing the previous example can be clearly appreciated by the following screen shots, where the sample banner is shown in its different states:
As you can see, the advantage of creating the previous banner is that the entire process is controlled by a couple of simple background images, in addition to including a regular link to the corresponding web document.
Nevertheless, the major drawback concerning the previous approach rests on the time that the browser needs to request the two images from the web server. This naturally introduces an undesirable delay when the last picture is displayed (at least the first time the web page is loaded).
So, considering the issue that I mentioned before, how can it be fixed quickly, without using JavaScript? Yes, you guessed right! The problem can be solved by the creation of a simple CSS sprite, which includes in the same image the two stages of the banner that you saw previously.
Therefore, if you want to learn how this CSS sprite will be created to implement the dynamic banner, please go ahead and read the following section. I'll be there, waiting for you.
Next: Rebuilding the dynamic banner as a two-image CSS sprite >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 10 
