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

原文地址:https://www.cnblogs.com/xyyt/p/3955545.html