Mouseover - Simple JS

<!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 - Simple JS</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="author" content="" />
<style type="text/css">
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: .7em; }

p#image { width: 280px; margin: 0 auto; } /* Set to width of image */
</style>
</head>
<body>
<h1>Mouseover - Simple JS</h1>
<div id="wrap">
<div id="contents">

<p><code>
&lt;img src="image1.gif" onmouseover="this.src='image2.gif'" onmouseout="this.src='image1.gif'" style="width: XXXpx; height: YYYpx;" alt="" />
</code></p>
<p id="image"><img src="http://i1087.photobucket.com/albums/j473/Stutter_Bug/camera-trans-center.png" onmouseover="this.src='http://i1087.photobucket.com/albums/j473/Stutter_Bug/camera-trans-color-lights.png'" onmouseout="this.src='http://i1087.photobucket.com/albums/j473/Stutter_Bug/camera-trans-center.png'" style="width: 280px; height: 137px;" alt="" /></p>

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