wordpress CMS主题 微信
Home > wordpress问答 > 如何给网页中同一图片的不同区域添加链接?

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

高时银博客 wordpress问答 点击: 4,959 次 0 0
  • 标签:
  • 在网页开发过程中,给网页上的一个图片添加一个链接,是很简单的一件事情,只需添加一个<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”。具体,大家可以多做做看。


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201509244846.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论