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

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

电商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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

JSTL学习总结

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

什么是网页标签?

网页标签即HTML标签是网页浏览器识别符,是浏览器程序默认系统默认许可标签。HTML标签是HTML语言中最基本的单位,HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分。

如何将 JavaScript 代码添加到网页中,以及 <script> 标签的属性

本教程的这一部分内容是关于 JavaScript 语言本身的。但是,我们需要一个工作环境来运行我们的脚本,由于本教程是在线的,所以浏览器是一个不错的选择。我们会尽可能少地使用浏览器特定的命令(比如 alert)

浅析script标签的async和defer属性

前端当然要从 HTML 开始,我们来聊聊在 script 标签中加上 async/defer 时的功能及差异。我们都知道,浏览器解析 HTML 是一行一行按照顺序向后读取的,在传统的写法中,当浏览器读到 <script> 时,便会暂停解析 DOM,同时立即开始下载 <script> 中定义的资源

浏览器是如何将标签转成 DOM ?

进入主话题之前,先罗列一下浏览器的主要构成:用户界面- 包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分;浏览器引擎- 用来查询及操作渲染引擎的接口

自动播放页面中所有audio标签

在浏览游戏百科中的BGM部分,想把页面中的音频像音乐播放器一样自动地一首接一首播放,参考了这篇博客以后,写了以下代码,在开发者工具的控制台里运行就行。应该说适用范围比上述参考博客要广,不受DOM树结构影响

Html中a标签用法总结:创建email,电话,描点链接等。以及防止链接被搜索引擎收录

a标签是我们常用的一个标签之一,这篇文章主要讲解如何使用a来创建email,电话,描点链接等。以及防止链接被搜索引擎收录。

HTML <link> 标签 PC移动网站适配

在pc版网页上,添加指向对应移动版网址的特殊链接rel=alternate标记,这有助于百度发现网站的移动版网页所在的位置;同时在移动版网页上,添加指向对应pc版网址的链接rel=canonical标记。

10 个不常用但你有必要知道的 html 标签

HTML 也被称为超文本记语言( hyper text markup language )是为网页创建和其他可在网页浏览器中看到的信息设计的一种标记语言。HTML 被用来结构化信息,如标题、段落和列表等,也可用来在一定程度上描述文档的外观和语义。

关于v-if和v-for不能一起使用在同一个标签上

遍历object的所有value(即li中的v-for),当拿到testData的第一个元素TESTOBJECT时,执行div中的v-for,此时的item对应T E S T O B J E C T这10个元素,于是循环10次,每一次都判断当前元素是否是array,很显然每次判断都是object

点击更多...

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