学习Html标签元素area

之前为了在图片上进行作链接,比如为了在logo图片上进行点击,我的做法都在通过在图片上放入a标签,要么就通过js来实现,太愚民了,,今天 看到area标签,学到了,其实不用的,有了area标签可以灵活地定义在图片上要进行点击连接的区域,太牛了。。。。

::

 有不懂的学习下哈:

我有一张logo图片:

现在我要在这张logo图片上进行定义“点击连接”的区域,看html代码:

<div style="202px;">
   <img src="logo.jpg" style="border:0px;"; usemap="#imgMap"/>
   <map id="imgMap" name="imgMap">
      <area shape="rect" coords="80,0,186,22" href="#"/>  //定义一个矩形
      <area shape="circle" coords="30,30,30,44" href="#" /> //定义一个圆形
      <area shape="rect" coords="80,21,203,46" href="#" /> //定义一个矩形   

  </map>
</div>

这里通过定义图片(img)的usemap属性,值为map的#加name值==》  #imgMap

area 的shape属性有三个值,一个是rect:定义一个矩形,,一个是circle:定义一个原型,还有一个是poly这个我也不知道是什么情况(哈哈,不好意思啊)

这样定义后就可以通过coords定义的区域进行点击,写相应的点击连接地址,当点击相应的区域可以看到相应的效果,如下图

原文地址:https://www.cnblogs.com/KimhillZhang/p/2602462.html