Question

有人能在这里帮忙吗？我有一个由.png图像组成的图像地图，其中定义了几个“多边形”区域，每个区域后面都有一个链接。

这些链接适用于IE，但对于上面列出的其他浏览器类型，链接除了在每个多边形区域上显示图像和标题文本外什么都不做。

图像映射的代码如下：

<img title = "Concept" border = "0" src = "../images/myMap.png usemap = "#myMap">

                <map name = "myMap">
                    <area shape = "polygon" coords = "315, 230, 545, 415, 260, 575, 10, 700, 10, 285"  title = "Rules" href = "#rules" />
                    <area shape = "polygon" coords = "745, 450, 745, 680, 470, 745, 325, 635, 520, 450" title = "Polling"  href = "#polling" />                        
                    <area shape = "polygon" coords = "745, 730, 745, 895, 450, 895, 450, 815, 565, 730" title = "Visualisations"  href = "#visualisations" />
                </map>

所有链接都指向页面区域：

<h2><a name = "#rules">Rules</a></h2>

这很奇怪。

页面的HTML标题版本为：

<!DOCTYPE html>

我已经尝试将图像作为.gif和.jpeg文件无效。

如果我将图片地图中的链接更改为：

                    <area shape = "polygon" coords = "315, 230, 545, 415, 260, 575, 30, 441, 315, 230"  title = "rules" href = "<c:url value = '/aboutConcept#rules' />" />

我发现事情有效。我正在使用JSTL标签。

感谢受访者。

Answer 1

可能导致问题的一些事情：

使用形状名称poly。这是规范要求http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.6
确保坐标的确切顺序。有些浏览器会出现乱序。
在多边形中，第一个和最后一个坐标必须相同才能关闭形状。

Answer 2

单击时URL是否会更改？例如。 #rules？

url（href）"#rules"引用名为“rules”但不是“#rules”的元素。 IE过于宽容。

您很少再需要<a name="rules">，只需提供任何元素id="rules"。

Answer 3

值得合适地关闭你的标签。你错过了关于img src的结束语：

这可能是您的问题的原因，因为浏览器甚至可能看不到usemap属性。

HTML图像映射中的链接无法在FireFox，Opera，Chrome和Safari中使用

3 个答案: