PayneLess Designs - Mouseover: Image Swap (CSS

<!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" xml:lang="en" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Mouseover: Image Swap (CSS)</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="generator" content="MSS Website Studio by van IJperen Software Inc. - http://www.marsansoft.nl" />
<style type="text/css">
.banner {
background: url('http://i1087.photobucket.com/albums/j473/Stutter_Bug/camera-trans-center.png') no-repeat center scroll;
width: 280px;
height: 137px;
padding-top: 10%;
margin: 0 auto;
}

.banner:hover {
background: url('http://i1087.photobucket.com/albums/j473/Stutter_Bug/camera-trans-color-lights.png') no-repeat center scroll;
width: 280px;
height: 137px;
}

a { color: #006800; font-weight: 900; font-size: 1em; }

body { background: #000; color: #fff; }

div#wrap { width: 900px; margin: 0 auto;}

div#contents { width: 100%; margin: 0 auto; }

h1 { text-align: center; }

code { color: #ff0; font-size: 1em; }

h3 {
text-align: center;
}
</style>
</head>
<body>
<h1>Mouseover - CSS</h1>
<div id="wrap">
<div id="contents">

<pre><code>
&lt;style type="text/css">
.banner {
background: url('http://img233.imageshack.us/img233/4195/anierrorchickenvocalspx5.gif') no-repeat center scroll;
width: 128px;
height: 131px;
padding-top: 10%;
}

.banner:hover {
background: url('http://img149.imageshack.us/img149/1023/anierrorchickenguitarum3.gif') no-repeat center scroll;
width: 128px;
height: 131px;
}

a { color: #006800; font-weight: 900; font-size: 1em; }
&lt;/style>

&lt;div class="banner">&lt;a href="#" title="Mouseover Me">Mouseover Me&lt;/a>&lt;/div>
</code></pre>
<h3>Mouseover Image Below:</h3>
<div class="banner"><a href="#nogo" title="Mouseover Me">&nbsp;</a></div>

</div>
</div>
</body></html>