图片地图在谷歌浏览器中不起作用

Question

任何人都可以告诉我这个html编码中的错误在哪里吗？

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

我已经编写了这段代码，但我似乎无法在网上查看教程后看到我出错了...

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

非常感谢任何帮助！

Answer 1

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

坐标不形成多边形，只能形成一条线。 coords被视为“x1，y1，x2，y2，...... xn，yn”，其中n> = 3

Answer 2

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

试试这个

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

Answer 3

使用 name 属性更改地图标签的id属性，它将起作用