如何使用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
}