图像映射，图像应该在悬停时改变，

Question

为什么悬停时图像没有变化？图像应该在悬停和点击时改变并使用相同的图像映射

<script>
function changeImage() {

document.getElementById('image').src = document.getElementById('some_id').getAttribute('data-img-src'); 
};

</script>

<html>
<body>
 <img id="image" src="http://imgur.com/SY5h8EC" map="#map" />
<map name="map">
<map id="some_id" data-img-src='http://imgur.com/Sch9YFq'>
<area shape="poly" coords="172,227,181,224,183,213,189,201,195,193,199,190,199,184,126,93,135,93,123,79,103,96,84,117,68,140,58,162,51,186,48,201,47,214,135,219,130,227,148,227,147,225,151,227,149,223,153,227,153,221,156,225,157,214,160,202,166,190,174,179,176,177,174,174,191,176,192,192,189,189,180,200,174,212,172,224,172,227" width="453" height="453" id="area1"
              onmouseover=" changeImage();"/>
</map>
     </map> 
 
</body>
  </html>

Answer 1

我改了图片链接，把代码写成jsFiddle，你还得把"map"改成"usemap"，我去掉了一张图，我认为您不需要它：

<body>
  <img id="image" src="http://i.imgur.com/SY5h8EC.png" usemap="#map" />
    <map name="map" id="some_id" data-img-src='http://i.imgur.com/Sch9YFq.png'>
      <area shape="poly" coords="172,227,181,224,183,213,189,201,195,193,199,190,199,184,126,93,135,93,123,79,103,96,84,117,68,140,58,162,51,186,48,201,47,214,135,219,130,227,148,227,147,225,151,227,149,223,153,227,153,221,156,225,157,214,160,202,166,190,174,179,176,177,174,174,191,176,192,192,189,189,180,200,174,212,172,224,172,227" id="area1" onmouseover=" changeImage();" />
    </map>
</body>
<script>
function changeImage() { document.getElementById('image').src=document.getElementById('some_id').getAttribute('data-img-src');
}
</script>

工作Fiddle：

https://jsfiddle.net/3eqb4uuj/

如果您需要其他方面的帮助，请发表评论，我会进行编辑

图像映射，图像应该在悬停时改变，

image map, image should change onhover,

javascript

html

css

frontend

imagemap