使用Map标签指定点击区域时的兼容性问题

时间: 2018-05-21阅读: 1000标签: 标签

电商m站的首页,有一个需求是配一张大的banner图,然后指定某些区域是热区,点击之后跳转到不同的活动页。听起来简单明了,实现也比较容易,立刻就想起来有个map标签,简直就是为这个需求量身定做。


简单说下做法:
我们首先会和后台约定一些规则,定义一个json对象。比如:

{
    type: 1,
    width: 100,
    height: 100,
    clickArea: [
        {
            shape: 'circle',
            coords: '10,10,10',
            href: '//jd.com'
        },
        {
            shape: 'rect',
            coords: '10,10,10,10',
            href: '//m.jd.com'
        }
    ],
    img: '一张图片.jpg'
}

我们可以约定,type为1就是map标签。之后按照我们约定的解析规则,把页面渲染上去就好了。
当然,实际上不会这么简单,一般来说,我们的首页和活动页是三端同步的。Android和iOS就不能直接使用上面的例子,还需要做一定的修改,但是大同小异。
这次出问题的地方就在这个map标签。


我们使用了模板来渲染页面,之后出来的元素大概是这样。

<img src ="planets.gif" alt="Planets" usemap ="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,110,260" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="129,161,10" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="180,139,14" href="venus.htm" alt="Venus" />
</map>

在chrome中可以正常点击,一旦到了其他浏览器,诸如FireFox,则无法点击。
同事问到我这个问题的时候,我真是觉得十分有趣,当时一起寻找是哪里的问题。
中间想了很多种可能,思路一直停留在动态计算影响了map的使用等。但是一直不能复现,后来仔细观察之后才发现,原来是img标签在书写的过程中,漏掉了usemap里的#。

咳咳咳……
在chrome中好使,是因为chrome帮我们做了兼容。

把这个bug记录下来,也算是长长记性。


PS:
后来我查了一下,之所以同事会出这个问题,也是因为map标签用的较少,而常用的label标签中的for属性,是不需要加#的,加上了反而会有错。
当然,label和map中的用法也不同,不论如何,引以为戒。

来源:https://www.cnblogs.com/liuyongjia/archive/2018/05/20/9064414.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/788

关闭

在html中创建自定义标签

Web Components 标准非常重要的一个特性是,它使开发者能够将HTML页面的功能封装为 custom elements(自定义标签),本篇介绍使用 CustomElementRegistry 来管理我们的自定义标签

在<a></a>标签中如何调用javaScript脚本

在日常工作总会遇到在<a>标签中执行js代码的情况 现在做一个总结,希望对大家有一个帮助。javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。

HTML <script> 标签

<script> 标签主要用于从服务器端加载一段javascript脚本并在当前页面中执行。因为其需要从服务器端中加载,所以会在一定程度上影响到web的性能。在性能优化中,<script>标签的优化至关重要。

HTML a标签打开新标签页避免出现安全漏洞,请使用“noopener”

这里我们有一个指向恶意网站的 href 属性,并以 _blank 属性为 target,使其在新标签页中打开。该流程看起来如此简单明了,用户在这里可能面临的安全风险是什么?

HTML的<Object>标签怎么用?

<object>标签是一个HTML标签,用于在网页中显示音频,视频,图像,PDF和Flash等多媒体;它通常用于嵌入由浏览器插件处理的Flash页面元素,如Flash和Java项目。它还可以用于在HTML页面内显示另一个网页。

HTML中<base>标签的正确使用

<base> 标签必须位于 <head> 元素内部,在一个文档中,最多能使用一个 <base> 标签,使用了<base>标签的链接后,其他链接必须在<base>标签的链接里面,不然将无法找到。

总结那些有默认margin,padding值的html标签

h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值。dl标签:有默认margin(top,bottom且相同)值,没有默认padding值。ol,ul标签:有默认margin-(top,bottom且相同)值,有默认padding-left值

Html头部meta标签

meta元素有4个属性:name、http-equiv、content、charset.meta标签通过name属性来表述页面文档的元信息,通过http-equiv属性设置http请求指令,通过charset设置页面的字符编码

video标签的属性

HTML5是下一代HTML,新增了许多新的标签,这些标签实现了许多新的功能。并且还减少了对外部插件的要求同时也可以更好的处理错误。比如HTML5中的video标签就可以很好的实现了在页面上播放视频的效果。

JSTL学习总结

在mvnrepository中,直接搜索jstl,,找到下载量最高的,下载1.2版本。下载完导入到项目里面就好了。jstl是apache对EL表达式的扩展,使用需导jar包

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!