扩展阅读
  • java命名空间javax.swing.text.html类html.tag的类成员方法: html定义及介绍
  • 基于HTML5的幻灯片 html5slides
  • java命名空间javax.swing.text.html类html.tag的类成员方法: html.tag定义及介绍
  • 基于 KBEngine 的 HTML5 插件 kbengine_html5
  • java命名空间javax.swing.text.html类html.unknowntag的类成员方法: html.unknowntag定义及介绍
  • 让 IE 支持 HTML5 html5shim
  • java命名空间javax.swing.text.html类htmleditorkit.inserthtmltextaction的类成员方法: html定义及介绍
  • HTML文档格式化工具 HTML Tidy
  • java命名空间javax.swing.text.html类html的类成员方法: getallattributekeys定义及介绍
  • HTML5 在线工具 html5demos
  • java命名空间javax.swing.text.html.parser类dtd的类成员方法: html定义及介绍
  • 框架网页中如何使用sendredirect(a.html),使得a.html不显示在框架中,是整页显示!
  • java命名空间javax.swing.text.html类html.tag的类成员方法: comment定义及介绍
  • Sar数据转HTML Sar2html
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: color定义及介绍
  • 关于editplus的使用,编译完生成.class后,我又编写了html来执行applet,将其保存,如何经ie解释打开(直接在editplus上操作)不是显示html语言呀
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: vlink定义及介绍
  • 操作系统 iis7站长之家
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: rel定义及介绍
  • 在html运行的applet中需要访问oracle,在jb里可以连接,但直接点击html时就出现找不到类“sun.jdbc.odbd.JdbcOdbcDriver"?
  • java命名空间javax.swing.text.html类html.attribute的类成员方法: src定义及介绍
  • 把 CDATA 中的内容(有可能是不规范的Html代码)以Html方式展现出来。
  •  
    当前位置:  Web服务器/前端>html5

    HTML <area> 标签的shape属性和coords属性详细介绍

     
        发布时间:2014-5-6  


        本文导语:  HTML <area> 标签的shape属性定义和用法 shape 属性与 coords 属性配合,可以规定区域的尺寸、形状和位置。HTML <area> 标签的shape属性详细解释:shape 属性用于定义图像映射中对鼠标敏感的区域的形状...

        HTML <area> 标签shape属性定义和用法

         shape 属性与 coords 属性配合,可以规定区域的尺寸、形状和位置。

    HTML <area> 标签的shape属性详细解释:

    shape 属性用于定义图像映射中对鼠标敏感的区域的形状:

    圆形(circ 或 circle

    多边形(poly 或 polygon

    矩形(rect 或 rectangle)

         shape 属性的值会影响浏览器对 coords 属性的解释。如果未使用 shape 属性,那么会假设使用值 default。依照标准,default 意味着该区域覆盖整个图像。在实际中,浏览器默认使用矩形区域,并期望能找到 4 个 coords 值。如果没有指定形状,而且在标签中也没有包括 4 个坐标,那么浏览器会忽略整个区域。

         可以识别 shape 属性的 default 值的浏览器,可以提供一个包括全部热点的区域,以用于在超过其他热点定义的范围之外单击的情况。由于区域在 <map> 标签中是采用“先来先得”的顺序,所有必须将默认区域放置在后面。否则,默认区域会覆盖其他的图像映射中出现的所有区域。

    浏览器在形状名称的实现方面没有严格要求。例如,对于矩形,Netscape 4 不能识别 "rectangle",却能识别 "rect"。出于这个原因,我们建议使用缩写的名称。

    HTML <area> 标签的shape属性语法

    <a shape="value">

    属性值    描述

    default规定全部区域。

    rect定义矩形区域。

    circ定义圆形。

    poly定义多边形区域。

      HTML <area> 标签的shape属性示例代码:

    <img src ="planets.gif" alt="Planets" usemap ="#planetmap" />
    <map name="planetmap">
      <area shape="rect" coords="0,0,110,260" href="/article/sun.htm" alt="Sun" />
      <area shape="circle" coords="129,161,10" href="/article/mercur.htm" alt="Mercury" />
      <area shape="circle" coords="180,139,14" href="/article/venus.htm" alt="Venus" />
    </map>


      HTML <area> 标签的coords属性定义和用法

       coords 属性规定区域的 x 和 y 坐标。coords 属性与 shape 属性配合使用,来规定区域的尺寸、形状和位置。图像左上角的坐标是 "0,0"。

    HTML <area> 标签的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 像素图像的右下方四分之一处,定义了一个对鼠标敏感的区域,并在图像的正中间定义了一个圆形区域。

    <map name="map">

     <area shape="rect" coords="75,75,99,99" nohref="/article/nohref/index.html">

     <area shape="circ" coords="50,50,25" nohref="/article/nohref/index.html">

    </map>

    HTML <area> 标签的coords属性提示注释

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

    HTML <area> 标签的coords属性语法

    <area coords="value">

    属性值   描述

    x1,y1,x2,y2如果 shape 属性设置为 "rect",则该值规定矩形左上角和右下角的坐标。

    x,y,radius如果 shape 属性设置为 "circ",则该值规定圆心的坐标和半径。

    x1,y1,x2,y2,..,xn,yn如果 shape 属性设置为 "poly",则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致,那么为了关闭多边形,浏览器必须添加最后一对坐标。

    HTML <area> 标签的coords属性示例代码:

    <img src ="planets.gif" alt="Planets" usemap ="#planetmap" />
    <map name="planetmap">
      <area shape="rect" coords="0,0,110,260" href="/article/sun.htm" alt="Sun" />
      <area shape="circle" coords="129,161,10" href="/article/mercur.htm" alt="Mercury" />
      <area shape="circle" coords="180,139,14" href="/article/venus.htm" alt="Venus" />
    </map>


    • 本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
      本站(WWW.)站内文章除注明原创外,均为转载,整理或搜集自网络.欢迎任何形式的转载,转载请注明出处.
      转载请注明:文章转载自:[169IT-IT技术资讯]
      本文标题:HTML <area> 标签的shape属性和coords属性详细介绍
    相关文章推荐:


    站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3