image - image map does not work in google chrome

Question

Can any one tell me where the error is in this html coding?

https://newmedia.leeds.ac.uk/ug10/cs10jy/portfolio/studenthands/imagemap.html

I have wrote this code but I cant seem to see where i'm going wrong after looking online and following tutorials...

<img src ="images/socialnetwork.png"
width="220" border="0"
usemap ="#socialmap" />

<map id ="socialmap"
name="socialmap">
<area shape ="poly" coords ="77,83,163,127"
 href ="https://www.facebook.com/StudentHands" target="_blank" />
<area shape ="poly" coords ="1,105,75,153"
href ="https://twitter.com/StudentHands" target="_blank" />
</map>

Any help would be very much appreciated!

Answer 1

用name属性更改 map 标签的 id 属性，它会起作用

Answer 2

<area shape ="poly" coords ="77,83,163,127"
 href ="https://www.facebook.com/StudentHands" target="_blank" />

坐标不会形成多边形，它只能画一条线。坐标被视为 "x1,y1,x2,y2,......xn,yn" 其中 n>=3

Answer 3

删除地图代码中属性和 = 之间的换行符和空格。那应该有帮助。

尝试这个

<img src="images/socialnetwork.png" width="220" border="0" usemap="#socialmap" />

<map id="socialmap" name="socialmap">
<area shape ="poly" coords ="77,83,163,127" href ="https://www.facebook.com/StudentHands" target="_blank" />
<area shape ="poly" coords ="1,105,75,153" href ="https://twitter.com/StudentHands" target="_blank" />
</map>