zoukankan      html  css  js  c++  java
  • 学习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定义的区域进行点击,写相应的点击连接地址,当点击相应的区域可以看到相应的效果,如下图

  • 相关阅读:
    Path Sum II
    Convert Sorted Array to Binary Search Tree
    Construct Binary Tree from Inorder and Postorder Traversal
    Construct Binary Tree from Preorder and Inorder Traversal
    Maximum Depth of Binary Tree
    Binary Tree Zigzag Level Order Traversal
    Binary Tree Level Order Traversal
    Same Tree
    Validate Binary Search Tree
    Binary Tree Inorder Traversal
  • 原文地址:https://www.cnblogs.com/KimhillZhang/p/2602462.html
Copyright © 2011-2022 走看看