Question

为什么悬停时图像不会改变？图像应在悬停和onclick上更改并使用相同的图像映射

＆＃13;

<script>
function changeImage() {

document.getElementById('image').src = document.getElementById('some_id').getAttribute('data-img-src'); 
};

</script>

＆＃13;

<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>

＆＃13;

Answer 1

我更改了图片链接并将代码写入jsFiddle，您还必须更改＆＃34; map＆＃34; to＆＃34; usemap＆＃34;我摆脱了其中一张地图，我认为你不需要它：

<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>

工作小提琴：

https://jsfiddle.net/3eqb4uuj/

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

图像地图，图像应该改变onhover，

1 个答案: