如何在区域形状上使用onMouseOver更改图像？

Question

我有这样的：

<div class="map_container"> 

    <%= image_tag("maps/mainmap.png", :width => "450", :height => "450", :usemap => "#mainmap", :alt => "") %> 

    <map name="mainmap"> 

    <area shape="poly" 
     coords="158,43,152,49,164,86,165,112,153,153,139,169,145,236,201,241,202,251,166,253,142,257,132,294,102,269,85,240,68,227,53,213,28,202,27" alt="" 
     onmouseover="document.body.style.cursor='pointer'" 
     onmouseout="document.body.style.cursor='default'" > 
    </map>    
</div> 

其改变光标当我把鼠标移动到该区域的形状，但我怎样才能使它改变图像（mainmap.png）显示？

编辑

我已经试过如下：

onmouseover="this.src='image2.png';"不工作，但我只能得到原始图像使用轨道IMAGE_TAG帮手，行显示：<img src="maps/mainmap.png" width="450" height="450" usemap="#mainmap" alt="">也不显示mainmap.png图像。那么，这是我的应用程序找到图像的目录的问题？

非常感谢任何帮助，非常感谢。

Answer 1

我假设你不使用任何JS框架，所以试试这个：

function changeImage(area) { 
    var parent= area.parentNode, // Get the parent of area 
     name = parent.getAttribute('name'), // Get the name attribute of the area which is same as the id of the image used 
     img = document.getElementById(name); // Get the image obj 

    img.src = "maps/newmap.png"; // Set the new image source 
}