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
}

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

1 个答案: