图像映射,图像应该在悬停时改变,
image map, image should change onhover,
为什么悬停时图像没有变化?图像应该在悬停和点击时改变并使用相同的图像映射
<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>
我改了图片链接,把代码写成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/
如果您需要其他方面的帮助,请发表评论,我会进行编辑
为什么悬停时图像没有变化?图像应该在悬停和点击时改变并使用相同的图像映射
<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>
我改了图片链接,把代码写成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/
如果您需要其他方面的帮助,请发表评论,我会进行编辑