- 加入我的QQ群
- 关注我的百家号
扫描下面的二维码,“关注”我的百家号。
在网页开发过程中,给网页上的一个图片添加一个链接,是很简单的一件事情,只需添加一个<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”。具体,大家可以多做做看。