rodsdot.com :: image map with roll over effects

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005, 2006 Roderick Divilbiss">
<title>rodsdot.com :: image map with roll over effects</title>
<script type="text/javascript">
<!--
var Images=new Array();
Images[0]=new Image();
Images[0].src='images/texas0.gif';
Images[1]=new Image();
Images[1].src='images/texas1.gif';
Images[2]=new Image();
Images[2].src='images/texas2.gif';
Images[3]=new Image();
Images[3].src='images/texas3.gif';
Images[4]=new Image();
Images[4].src='images/texas4.gif';
Images[5]=new Image();
Images[5].src='images/texas5.gif';
Images[6]=new Image();
Images[6].src='images/texas6.gif';
Images[7]=new Image();
Images[7].src='images/texas7.gif';
Images[8]=new Image();
Images[8].src='images/texas8.gif';

function mover(region) {
  document.getElementById('theMap').src=Images[region].src;
}

function mout() {
  document.getElementById('theMap').src=Images[0].src;
}

function mapClick(region) {
  document.getElementById('youClicked').innerHTML='You clicked region '+region.toString();
  document.getElementById('theMap').src=Images[0].src;
}
//-->
</script>
</head>

<body>
<div id="youClicked">Please click the map.</div>
<map name="ImageMap">
<area href="javascript:void(0);" shape="poly" coords="148, 21, 146, 202, 248, 206, 252, 22" onclick="mapClick(1);" onmouseover="mover(1);" onmouseout="mout();" alt="Texas region 1">
<area href="javascript:void(0);" shape="poly" coords="250, 101, 349, 113, 349, 210, 250, 206" onclick="mapClick(2);" onmouseover="mover(2);" onmouseout="mout();" alt="Texas region 2">
<area href="javascript:void(0);" shape="poly" coords="349, 113, 350, 209, 468, 215, 453, 127" onclick="mapClick(3);" onmouseover="mover(3);" onmouseout="mout();" alt="Texas region 3">
<area href="javascript:void(0);" shape="poly" coords="17, 198, 114, 202, 189, 257, 129, 349" onclick="mapClick(4);" onmouseover="mover(4);" onmouseout="mout();" alt="Texas region 4">
<area href="javascript:void(0);" shape="poly" coords="113, 202, 189, 256, 170, 289, 220, 322, 227, 299, 270, 298, 341, 211" onclick="mapClick(5);" onmouseover="mover(5);" onmouseout="mout();" alt="Texas region 5">
<area href="javascript:void(0);" shape="poly" coords="342, 212, 406, 332, 477, 292, 475, 215" onclick="mapClick(6);" onmouseover="mover(6);" onmouseout="mout();" alt="Texas region 6">
<area href="javascript:void(0);" shape="poly" coords="219, 322, 289, 443, 364, 461, 354, 386, 269, 300, 229, 299" onclick="mapClick(7);" onmouseover="mover(7);" onmouseout="mout();" alt="Texas region 7">
<area href="javascript:void(0);" shape="poly" coords="269, 300, 355, 387, 404, 333, 343, 211" onclick="mapClick(8);" onmouseover="mover(8);" onmouseout="mout();" alt="Texas region 8">
</map><img id="theMap" alt="A map of texas divided into eight regions" src="images/texas0.gif" width="500" height="477" usemap="#ImageMap">
</div></body>

</html>
How can you make an image map with roll over effects?
