PayneLess Designs - CSS Image Mouseover Link

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>CSS Image Mouseover Link</title>
<link rel="stylesheet" type="text/css" href="css_page_designs.css">
<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">
body {
width: 800px;
margin: 0 auto;
font-size: 1em;
}

pre { font-size: 0.75em; background: #000; color: #ff0; }
</style>

<style type="text/css">
* { margin: 0; padding: 0; border: 0; }

a { display: block; text-decoration: none; }

a:link.mousie {
width: 455px;
height: 132px;
background: url(http://i34.tinypic.com/10ncapu.jpg) no-repeat center scroll;
}

a:hover.mousie {
background: url(http://i36.tinypic.com/fdttvp.jpg) no-repeat center scroll;
}

div#link_container {
width: 455px;
margin: 5% auto;
}

.mousie span {
visibility: hidden;
}
</style>
</head>
<body>
<div id="wrap"><!-- START WRAP --><div id="contents"><!-- START CONTENTS -->

<div id="link_container">

<a class="mousie" href="#URL_Path_Here" title="Mouseover Description"><span>Text Link Description hidden</span></a>

</div>

<h3>Basic Code Used:</h3>

<pre><code>
&lt;head>
&lt;style type="text/css">
* { margin: 0; padding: 0; border: 0; }

a { display: block; text-decoration: none; }

a:link.mousie {
width: 455px; /* Image Width */
height: 132px; /* Image Height */
background: url(mouse_off.jpg) no-repeat center scroll;
}

a:hover.mousie {
background: url(mouse_on.jpg) no-repeat center scroll;
}

div#link_container {
width: 455px; /* Image Width */
margin: 5% auto;
}

.mousie span {
visibility: hidden;
}
&lt;/style>
&lt;/head>

Between body tags:

&lt;div id="link_container">

&lt;a class="mousie" href="#URL_Path_Here" title="Mouseover Description"><span>Text Link Description hidden&lt;/span>&lt;/a>

&lt;/div>
</code></pre>

</div><!-- END CONTENTS --></div><!-- END WRAP -->
</body></html>