zoukankan      html  css  js  c++  java
  • 分割图片上的热点区域

    coords 属性
    <area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。

    下面列出了每种形状的适当值:

    圆形:shape="circle",coords="x,y,z"
    这里的 x 和 y 定义了圆心的位置("0,0" 是图像左上角的坐标),r 是以像素为单位的圆形半径。

    多边形:shape="polygon",coords="x1,y1,x2,y2,x3,y3,..."
    每一对 "x,y" 坐标都定义了多边形的一个顶点("0,0" 是图像左上角的坐标)。定义三角形至少需要三组坐标;高纬多边形则需要更多数量的顶点。

    多边形会自动封闭,因此在列表的结尾不需要重复第一个坐标来闭合整个区域。

    矩形:shape="rectangle",coords="x1,y1,x2,y2"
    第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标,"0,0" 是图像左上角的坐标。请注意,定义举行实际上是定义带有四个顶点的多边形的一种简化方法。

    例如,下面的 XHTML 片段在一个 100x100 像素图像的右下方四分之一处,定义了一个对鼠标敏感的区域,并在图像的正中间定义了一个圆形区域。

    <img src="http://images.cnblogs.com/title_40.gif" border="0" usemap="#Map2" />
    <map name="map">
    <area shape="rect" coords="75,75,99,99" nohref="nohref">
    <area shape="circ" coords="50,50,25" nohref="nohref">
    </map>

    提示和注释
    注释:如果某个 area 标签中的坐标和其他区域发生了重叠,会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。


       本人博客的文章大部分来自网络转载,因为时间的关系,没有写明转载出处和作者。所以在些郑重的说明:文章只限交流,版权归作者。谢谢

  • 相关阅读:
    03 Gradient Descent
    RoarCTF2019 babyRSA
    SpreadJS 纯前端表格控件应用案例:在线问卷系统
    SpreadJS 纯前端表格控件应用案例:资料填报系统
    SpreadJS 纯前端表格控件应用案例:物业行业全面预算管理系统
    SpreadJS 纯前端表格控件应用案例:PtLims云平台
    SpreadJS 纯前端表格控件应用案例:实验室信息化管理系统
    身份证你需要了解的知识点
    vue-vuex-getters的基本使用
    vue-vuex-mutations的基本使用
  • 原文地址:https://www.cnblogs.com/wzg0319/p/1823108.html
Copyright © 2011-2022 走看看