javascript - 如何在区域形状上使用 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';"这不起作用，但我只能使用 rails 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
}