Fatal编程技术网
  • html/
  • HTML图像映射中的链接在FireFox、Opera、Chrome和Safari中不起作用

HTML图像映射中的链接在FireFox、Opera、Chrome和Safari中不起作用

html image

HTML图像映射中的链接在FireFox、Opera、Chrome和Safari中不起作用,html,image,Html,Image,这里有人能帮忙吗？我有一个由.png图像组成的图像地图，其中定义了几个“多边形”区域，每个区域后面都有一个链接 这些链接在IE中工作，但对于上面列出的其他浏览器类型，这些链接除了在每个多边形区域上显示图像和标题文本外，什么都不做 图像地图的代码如下所示： <img title = "Concept" border = "0" src = "../images/myMap.png usemap = "#myMap"> <map name = "m

这里有人能帮忙吗？我有一个由.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>
这很奇怪

页面的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标记

感谢受访者。

可能导致问题的几件事：

  • 使用形状名称
    poly
    。这就是规范要求的

  • 确保坐标顺序正确。一些浏览器被无序的coords阻塞

  • 在多边形中，第一个和最后一个坐标必须相同才能闭合形状

    • 可能导致问题的两件事：

  • 使用形状名称
    poly
    。这就是规范要求的

  • 确保坐标顺序正确。一些浏览器被无序的coords阻塞

  • 在多边形中，第一个和最后一个坐标必须相同才能闭合形状

    • 单击时URL是否会更改？例如#规则

    url（href）
    “#rules”
    引用的是名为“rules”而不是“rules”的元素。他太宽容了

    您不再需要
    ，只需给出任何元素
    id=“rules”

    单击时URL是否会更改？例如#规则

    url（href）
    “#rules”
    引用的是名为“rules”而不是“rules”的元素。他太宽容了

    您几乎不再需要
    ，只需给任何元素
    id=“rules”

    适当关闭标记即可。您错过了img src的最后报价：

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

    也值得正确关闭标记。您错过了img src的最后报价：

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

    单击其中一个多边形的区域会导致浏览器栏显示该区域的链接，但浏览器不会跳转到链接指向的页面部分。@Morgan先生：即使将
    更改为
    ，单击其中一个多边形的区域也会导致浏览器栏显示该区域的链接，但是浏览器不会跳转到链接指向的页面部分。@Morgan先生：即使将
    更改为
    ？ 
                        <area shape = "polygon" coords = "315, 230, 545, 415, 260, 575, 30, 441, 315, 230"  title = "rules" href = "<c:url value = '/aboutConcept#rules' />" />