zoukankan      html  css  js  c++  java
  • 图片添加热点MAP之后连接无效的解决方法

    好些接触网店的同事都会遇到这个问题:就是明明给图片添加了热点超链接,但是点击图片就是没反应。

    其实这个问题就是热点冲突,也就是说这个页面中至少有2个名称相同的热点导致热点冲突无法正确加载。

    谷歌浏览器或火狐浏览器下——查看元素——页面代码中ctrl+f搜索map,看下name="Map"肯定不是只有一个的。

    解决这个问题,就先了解下热点的原理吧:

    热点的原理

        图片通过usemap="#Map"属性将名称为"Map"的热点区域及连接映射到图片上。

        热点添加完毕后,查看页面源代码,你会发现在代码最底下多出几行内容,这些就是热点生成的:

    <img src="1.png" width="667" height="354" border="0"usemap="#Map"/>

      <mapname="Map"id="Map">

        <area shape="rect" coords="212,3,452,186" href="链接1" target="_blank" />

        <area shape="poly" coords="674,190" href="链接2" />

        <area shape="poly" coords="675,177" href="链接3" />

      </map>

    一张图片对应一个热点,不同的热点名称不能相同

    一般来说,图片的usermap属性对应的是map热点的name的属性值。所以如果页面中如果有多个图片添加热点,那么每一个图片的usemap值跟对应的热点地图的name值一定要一样,且不同的热点区域name值不可以相同,如果相同,那么图片上的热点区域将会以相同名称的第一个热点区域为准。

    解决了上面的问题,再看下你的网页,是不是已经好了呢?

    所以说在使用dw此类的工具软件添加热点的时候,一定要设置不同的名称,才会避免热点冲突而无法正常加载的问题。

  • 相关阅读:
    Cookie 干货
    element-ui 框架中使用 NavMenu 导航菜单组件时,点击一个子菜单会出现多个子菜单同时展开或折叠?
    数组遍历的方法
    前端网页字体
    样式小收藏:完成、错误、提示动态图标样式
    多语言网站利器 rel="alternate" hreflang="x"
    网页中文章显示一部分,然后“查看全文”
    仿水滴筹中快捷留言祝福、随机生成祝福
    TypeScript知识点
    前端项目经验
  • 原文地址:https://www.cnblogs.com/xyyt/p/3955545.html
Copyright © 2011-2022 走看看