<area>对象的属性

属性 描述 W3C
alt 设置或返回当浏览器无法显示某个区域时的替换文字。 Yes
coords 设置或返回图像映射中可点击区域的坐标。 Yes
hash 设置或返回某个区域中 URL 的锚部分。 Yes
host 设置或返回某个区域中 URL 的主机名和端口。 Yes
hostname 设置或返回href属性值得主机部分。 Yes
href 设置或返回某个区域中href属性值 Yes
noHref 设置或者返回某个区域的 nohref 属性值。 Yes
pathname 设置或者返回某个区域 href 属性值的路径名部分。 Yes
port 设置或者返回某个区域 href 属性值的端口部分。 Yes
protocol 设置或者返回某个区域 href 属性值的协议部分。 Yes
search 设置或者返回某个区域 href 属性值的查询字符串部分。 Yes
shape 设置或者返回某个区域 shape属性值。 Yes
target 设置或者返回某个区域 target 属性值。 Yes

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

下面列出了每种形状的适当值:
圆形:shape="circ",coords="x,y,radius"
这里的 x 和 y 定义了圆心的位置("0,0" 是图像左上角的坐标),r 是以像素为单位的圆形半径。

多边形:shape="poly",coords="x1,y1,x2,y2,x3,y3,...,xn,yn"
每一对 "x,y" 坐标都定义了多边形的一个顶点("0,0" 是图像左上角的坐标)。定义三角形至少需要三组坐标;高纬多边形则需要更多数量的顶点。
多边形会自动封闭,因此在列表的结尾不需要重复第一个坐标来闭合整个区域。

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

<img src="data:image.jpg" border="0" usemap="#map" alt="image" />

<map name="map">
<area shape="circ" coords="100,100,30" href ="circle.html" alt="circle" target="_blank" />
<area shape="poly" coords="100,30,50,180,150,170" href ="polygon.html" alt="polygon" target="_blank" />
<area shape="rect" coords="0,0,200,200" href ="rectangle.html" alt="rect" target="_blank" />
</map>

HTML <area> 对象的更多相关文章

  1. 浏览器端-W3School-HTML:HTML DOM Area 对象

    ylbtech-浏览器端-W3School-HTML:HTML DOM Area 对象 1.返回顶部 1. HTML DOM Area 对象 Area 对象 Area 对象代表图像映射的一个区域(图像 ...

  2. JavaScript学习笔记——DOM_document对象

    javascript-document对象详解 DOM document(html xml) object modledocument对象(DOM核心对象) 作用: 1.内容 innerHTML 2. ...

  3. [CareerCup] 14.5 Object Reflection 对象反射

    14.5 Explain what object reflection is in Java and why it is useful. Java中的对象反射机制可以获得Java类和对象的反射信息,并 ...

  4. 【转】Android Camera(五)使用Camera功能 AREA的理解

    http://blog.csdn.net/think_soft/article/details/7998478 使用Camera功能 大多数的Camera功能都是使用Camera.Parameters ...

  5. HTML:Browser 对象

    ylbtech-HTML:Browser 对象 1.返回顶部 1. Window 对象 Window 对象表示浏览器中打开的窗口. 如果文档包含框架(frame 或 iframe 标签),浏览器会为 ...

  6. 使用Camera功能 AREA的理解

    转至 http://blog.csdn.net/think_soft/article/details/7998478 使用Camera功能 大多数的Camera功能都是使用Camera.Paramet ...

  7. 浏览器根对象window之Location

    1. Location Location 对象包含有关当前 URL 的信息.Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问. 1.1 Loc ...

  8. Location - BOM对象

    Location 对象 Location 对象包含有关当前 URL 的信息. Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问. 例子 把用户 ...

  9. location对象介绍

    Location 对象 Location 对象 Location 对象包含有关当前 URL 的信息. Location 对象是 Window 对象的一个部分,可通过 window.location 属 ...

随机推荐

  1. Mysql查看sql是否走事务

    登陆进入server [root@gzmtest_25 ~]# su - mysql [mysql@gzmtest_25 ~]$ mysql.local Welcome to the MySQL mo ...

  2. log4net preserveLogFileNameExtension 和 watch

    preserveLogFileNameExtension <log4net> <appender name="fileappender" type="l ...

  3. case when in sql server's stored procedure

    https://docs.microsoft.com/en-us/sql/t-sql/language-elements/case-transact-sql Evaluates a list of c ...

  4. Codeforces--630A--Again Twenty Five! (水题)

     Again Twenty Five! Time Limit: 500MS   Memory Limit: 65536KB   64bit IO Format: %I64d & %I64u ...

  5. java 分布式锁

    转自:http://www.hollischuang.com/archives/1716 目前几乎很多大型网站及应用都是分布式部署的,分布式场景中的数据一致性问题一直是一个比较重要的话题.分布式的CA ...

  6. 洛谷 P1081 开车旅行 —— 倍增

    题目:https://www.luogu.org/problemnew/show/P1081 真是倍增好题! 预处理:f[i][j] 表示从 i 点开始走 2^j 次 AB (A,B各走一次)到达的点 ...

  7. SQLyog 快捷方式

    连接Ctrl+M 创建新连接Ctrl+N 以当前连接属性创建新连接Ctrl+F4/Ctrl+W 断开当前连接Ctrl+Tab 切换到下一个连接Ctrl+Shift+Tab 切换到上一个连接Ctrl+1 ...

  8. C# Area 双重路由如何写

    在WebApi项目里面 一般除了接口, 还有管理端...一些乱七八糟的,你想展示的东西, 一种做法是分开写: 比如管理后台一个项目, 然后接口一个, 然后页面一个, 其实这样做也可以,但是这么做, 无 ...

  9. 自学Python七 爬虫实战一

    此文承接上文,让我们写一个简简单单的爬虫,循序而渐进不是吗?此次进行的练习是爬取前5页什么值得买网站中的白菜价包邮信息.包括名称,价格,推荐人,时间. 我们所需要做的工作:1.确定URL并获得页面代码 ...

  10. CORS 和 JSONP

    跨域资源共享(CORS) 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制. CORS(Cross-Origin Resource Sharing) ...