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