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此类的工具软件添加热点的时候,一定要设置不同的名称,才会避免热点冲突而无法正常加载的问题。

  • 相关阅读:
    电子书《数字化转型领导者的技术修养》免费下载
    数字签名
    C:条件编译
    轻量级日志收集方案Loki
    安装Kubernetes(k8s)保姆级教程---无坑版
    设计模式七大原则-迪米特法则
    设计模式七大原则-开闭原则
    设计模式七大原则-里氏替换原则
    deepin-terminal改造风云再起
    deepin-terminal再改造
  • 原文地址:https://www.cnblogs.com/xyyt/p/3955545.html
Copyright © 2011-2022 走看看