• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > wordpress问答 > 如何给网页中同一图片的不同区域添加链接?

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

    作者: 分类:wordpress问答 点击: 8,073 次
    wordpress CMS主题:ssmay主题

      在网页开发过程中,给网页上的一个图片添加一个链接,是很简单的一件事情,只需添加一个<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”。具体,大家可以多做做看。



      QQ二维码

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

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.