div里图片锚记后如何让他鼠标滑过换图片

<div id="datu"><img src="images/datu.gif" width="800" height="571" border="0" usemap="#Map" />
  <map name="Map" id="Map">
   <area shape="rect" coords="33,275,265,332" href="wendajuan.html" />
    <area shape="circle" coords="68,496,40" href="#" />
  </map>
</div>
这是一个大图片我锚记了两个地方可如何实现让他鼠标滑过这两个地方时换图片

追问：大哥呀你看看我那写的不对咋不行呀
<div id="datu" style="margin:0 auto"><img id="img1" src="images/datu.gif" width="800" height="571" border="0" usemap="#Map" />
  <map name="Map" id="Map">
  <area id="map1" shape="rect" coords="33,275,265,332" href="wendajuan.html" />
    <area id="map2" shape="circle" coords="68,496,40" href="#" />
  </map>
</div>我锚记的这两块地方，我想让他鼠标滑过这两块区域的时候换两块图片颜色不太一样的,但大小就跟那两块区域一样大，位置也一样那咋弄对我就是想让他鼠标移到那个 现在就注册加入吧 那个按钮时，那个按钮图片颜色改变一下，移开时还原到原来的样子，下面的那个按钮也是那样，那咋定义呀怎样写我不太明白你能不能给我写个样式谢谢
<area shape="rect"  coords="33,275,265,332" href="wendajuan.html" />这里怎呀定义标签

答案：请把这段代码放到文档放到你的代码下方



<script type="text/javascript">
	var map1=document.getElementById("map1")  //为第一个map区域定义一个ID为map1
	var map2=document.getElementById("map2")  //为第二个map区域定义一个ID为map2
	var img1=document.getElementBuId("img1")  //为img定义一个ID为img1
	map1.onmouseout=function(){
		img1.src="这里放想换的图片的路径"
	}
	map2.onmouseout=function(){
		img1.src="这里放想换的图片的路径"
	}
</script>

其他：给area写上mouseover和mouseout事件，然后就跟操作普通的标签一样了 有一个办法：就是把A，B两个图片做成背景！
例：
<div id='aa'></div>
CSS:
#aa{
width:100px; height:100px; 
background:url(A.png) no-repeat;
}
#aa:hover{
background:url(B.png) no-repeat;
}

CSS只能对内容的显示的样式进行控制，不改变内容。
 

上一个：怎么在DIV里面写一段代码把一个FLASH+XML加载进页面来，求代码，
下一个：请问div怎样对齐