如何给网页中同一图片的不同区域添加链接？

扫描下面的二维码，“关注”我的百家号。

在网页开发过程中，给网页上的一个图片添加一个链接，是很简单的一件事情，只需添加一个<a href="链接"></a>就可以了。但是，我们有时会有一些特殊需要，需要在同一张图片的不同区域添加不同的链接，比如我前段时间开发的一个医院竞价网站，就有这么个需求，区域1链接到商务通，区域2链接到电话，区域名3链接到其它页面。如下图所示：

通过下面这段代码，就可以实现对方的需求：

<div style=" margin-top:100px">
<img src="/lib/img/sjright1.gif" width="28" height="130" style="border:none;" usemap="#Map2"/>
<map name="Map2" id="Map2">
<area shape="rect" coords="0,0,28,40" href="/swt/" target="_blank"/>
<area shape="rect" coords="0,40,28,80" href="tel:4000057103" target="_blank"/>
<area shape="rect" coords="0,80,28,130" href="/swt/" target="_blank"/>
</map>
</div>

代码解释：

1、<img> 中的 usemap="#Map2" 要与 <map>中的name="Map2" 相对应。usemap 属性与 <map> 元素的 name 或 id 属性相关联，以建立 <img> 与 <map> 之间的关系。

2、<area>元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

3、<area>属性解说：

coords ：坐标值，定义可点击区域的坐标，这个坐标是以图片的大小为基础的，如上面代码中的 coords="0,0,28,40" 就是头片的左上角X坐标 0,0 和区域1的右下角Y坐标28,40。
href： 定义此区域的目标 URL。
shape： 定义区域的形状。rect定义矩形区域。circ定义圆形，poly定义多边形区域。

通过上面的代码，我们就简单实现了网页中同一图片的不同区域添加不同的链接。注意，coords的坐标值要根据图片的大小做出相应的调整，如：上图中的区域名1的图片大小如果宽100px高120px的话，那么coords的值就是 “0,0,100,120”。具体，大家可以多做做看。