1) <area> 标签定义图像映射中的区域。
2) area 元素总是嵌套在 <map> 标签中。
3) 所有主流浏览器都支持 <area> 标签。
4) 属性
属性 | 值 | 描述 |
coords | 坐标值 | 定义可点击区域(对鼠标敏感的区域)的坐标。 |
href | URL | 定义此区域的目标 URL。 |
nohref | nohref | 从图像映射排除某个区域。 |
shape | default,rect,circ,poly | 定义区域的形状。 |
target | _blank,_parent,_self,_top | 打开方式L。 |
coords 属性
定义和用法
coords 属性规定区域的 x 和 y 坐标。
coords 属性与 shape 属性配合使用,来规定区域的尺寸、形状和位置。
图像左上角的坐标是 "0,0"。
详细解释
<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="map/map.jpg" alt="校区地图" width="1004" height="601" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="134,59,255,92" href="edushiMap.html" />
<area shape="rect" coords="345,122,464,160" href="edushiMap.html" />
<area shape="rect" coords="269,187,387,221" href="edushiMap.html" />
<area shape="rect" coords="515,174,631,208" href="edushiMap.html" />
<area shape="rect" coords="273,474,389,509" href="edushiMap.html" />
</map>
分享到:
相关推荐
area 元素总是嵌套在 <map> 标签中。本文重点给大家介绍html area标签的相关知识,需要的朋友参考下吧
Web-前端html+css从入门到精通 117. map标签与area标签.zip
js抠图+area标签显示 index.html jquery.Jcrop.js jquery.min.js pool.jpg
动态改变map-area区域背景色,可滑动改变背景色
标签:area 说明:定义一个客户端图像映射中一个超级链接区域的形状、坐标和关联 URL。 标签:attribute 说明:以对象的形式代表了 HTML 元素的标签属性或属性。 标签:b 说明:指定文本应以粗体渲染。 标签:...
html标签 标准HTML标签列表 它只是可以在任何环境中使用的几个JSON文件。 它有意地删除了过时的标签。 安装 $ npm install html-tags 用法 const htmlTags = require ( 'html-tags' ) ; console . log ( ...
mapAreahtml 的area只能在固定尺寸的html上使用,通过这段js就可以实现自动适配了#使用方法在map标签下面的area标签需要添加class="MXC_hotPhotoItem"默认所有的坐标是基于750宽度的图片进行定位如果图片大小非标准...
标签:area 说明:定义一个客户端图像映射中一个超级链接区域的形状、坐标和关联 URL。 标签:attribute 说明:以对象的形式代表了 HTML 元素的标签属性或属性 标签:base 说明:指定一个显式 URL 用于解析对于...
HTML标签; <meta>属性Content,name,scheme <!DOCTYPE> 属性coords,shape, 属性 属性 <area>属性 属性 属性 <audio>属性 属性 <base>属性 属性 属性 <body>属性 ...
不允许写结束标记的标签:area(定义图像映射中的区域)、base(为页面上的所有链接规定默认地址或默认目标)、br、col(为表格中一个或多个列定义属性值)、embed(定义嵌入的内容,比如插件–5)、hr、img、input、keygen...
很多时候我们需要使用地址三级联动,即省市区三级联动。网上有很多插件,在此介绍Vue的一款地区联动...3.在对应vue文件的template模板上写html标签,如下图所示: 4.在对应vue文件的script上进行data默认,如下图所
<DIV id=area> <LI><A href="http://www.jspcn.net/">JSPCN主页</A> <LI><A href="http://www.jspcn.net/index.html" target=_blank><B>JSP空间</B></A> <LI><A href=...
map标签 定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。 area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。 img标签中的usemap属性可引用的map标签中的id或name...
主要为大家介绍下如果在textarea文本域中显示HTML代码,其实多用于网页编辑的开发,大家可以参考下
Html 5 标签(按照英文字母a~z顺序排列): 1、<!--...--> 定义注释。 2、<!DOCTYPE> 定义文档类型。 3、<a> 定义超链接。 4、<abbr> 定义缩写。 5、<address> 定义地址元素。 6、<area> 定义图像映射中的区域。 7...
HTML (非XHTML),MIME type 为 text/html ,允许省略一些标签。通过 HTML 4 DTD,你可以省略以下标签(那些所谓可避免的元素,这里用删除线加以标记) </area> </base> <body> </body> ...
我就是靠这个文档实现logic:iterate的循环的 struts 标签 logic:iterate使用 logic:iterate <br>第一页 是struts官方的说明, 第二页 是个例子 第三页 是我实现的arrayList放入标签的方法。 这是页面...
ImageArea 相关框架 前端:HTML5 + CSS3 + Jade(Pug) 后端:Node.js 前端框架:Bootstrap4 Web框架:express框架 本地数据库:MongoDB(存储⽤用户基本信息) 云端数据库:OSS(存储⽤用户的图⽚片) 功能(不完全列举)...
jquery.maphilight.min.js下载,html中area标签高亮和添加背景颜色,使用jquery.maphilight.js库改变area背景