Html 图像映射答案

【问题标题】：Html Image mapsHtml 图像映射
【发布时间】：2014-09-09 12:17:54
【问题描述】：

我正在尝试用 html 制作图像映射，但由于某种原因它无法正常工作。

我的代码：

<img id="Image map" src="Koala.jpg" border="0" usemap="#koala" alt="" />
    <map id="koala">
        <area shape="rect" coords="438,370,552,583" href="http://www.google.com/" alt="Koala nose">
    </map>
</ol>

是的，它在一个有序列表中，不确定这是否会有所帮助。

我引用的图片 (Koala.jpg) 在这里：http://i.imgur.com/bZHlxCg.jpg

当我运行 html 文件时，一切都在那里，除了考拉根本无法点击。

【问题讨论】：

对我来说看起来不错 - 鼻子是可点击的 jsfiddle.net/euB4E
奇怪...对我不起作用。你用的是什么浏览器？
听起来像是地图名称的问题 - 请参阅下面的答案

标签： html image map area

【解决方案1】：

添加 name="koala" 以使 Chrome 和 Safari 也能正常工作 - http://jsfiddle.net/L4kUm/

 <img id="Image map" src="http://i.imgur.com/bZHlxCg.jpg" border="0" usemap="#koala" alt="" />

 <map id="koala" name="koala">
 <area shape="rect" coords="438,370,552,583" href="http://www.google.com/" alt="Koala nose">
 </map>

【讨论】：