专业的虚拟主机、云空间、域名注册服务商
首页 >  网站源码 > HTML 5 标签-定义图像映射中的区域

HTML 5 标签-定义图像映射中的区域

来源:5G云网络-专业云虚拟主机、云空间、域名注册服务商 发布时间:2017-11-05 在线客服:客服专员
本站源码全部迁移至5G云源码分享网-bbs.5g-yun.com

<area> 标签定义图像映射中的区域。


   <area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面。其基本语法结构如下:  

<area    class=type   id=Value   href=url    alt=text   shape=area-shape  coods=value>

shape和coords:是两个主要的参数,用于设定热点的形状和大小。其基本用法如下:


<area shape="rect" coords="x1, y1,x2,y2" href=url>表示设定热点的形状为矩形,左上角顶点坐标为(X1,y1),右下角顶点坐标为(X2,y2)。

<area shape="circle" coords="x1, y1,r" href=url>表示设定热点的形状为圆形,圆心坐标为(X1,y1),半径为r。

<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示设定热点的形状为多边形,各顶点坐标依次为(X1,y1)、(X2,y2)、(x3,y3) ......。


   <area>标记是在图像地图中划分作用区域的,因此其划分的作用区域必须在图像地图的区域内,所以在用 <area> 标记划分区域前必须用HTML的另一个标记<map>来设定图像地图的作用区域,并为指定的图像地图设定名称,该标记的用法很简单,即<map name="图像地图名称"> ...... </map>。


HTML 5 <area> 标签属性

alt 定义此区域的替换文本。如果 href 存在,则该属性是必需的。仅在 href 属性存在时使用。

coords 定义可点击区域的坐标。

href 定义此区域的目标 URL。

hreflang 规定目标 URL 的基准语言。仅在 href 属性存在时使用。

nohref 不赞成。从图像映射排除一个区域。

media 规定目标 URL 的媒介类型。默认值:all。仅在 href 属性存在时使用。

ping 由空格分隔的 URL 列表,当用户点击该链接时,这些 URL 会获得通知。仅在 href 属性存在时使用。

rel 规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。

shape 规定区域的形状。

target 在何处打开目标 URL。

type 规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。


HTML 5 <area> 标签标准属性


class, contenteditable, contextmenu, dir, draggable, id, irrelevant,

lang, ref, registrationmark, tabindex, template, title如需完整的描述,请访 HTML 5 中标准属性。


HTML 5 <area> 标签事件属性


onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu,

ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover,

ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup,

onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout,

onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload


HTML 5 <area> 标签例子1:

<img src ="planets.gif" alt="Planets" usemap ="#planetmap" />

<map id ="planetmap">

 <area shape ="rect" coords ="0,0,82,126" href ="sun.htm" alt="Sun" />

 <area shape ="circle" coords ="90,58,3" href ="mercur.htm" alt="Mercury" />

 <area shape ="circle" coords ="124,58,8" href ="venus.htm" alt="Venus" />

</map>


HTML 5 <area> 标签例子2:

<img src ="planets.gif" alt="Planets" usemap ="#planetmap" />

<map name="planetmap">

  <area shape="rect" coords="0,0,110,260" href="sun.htm" alt="Sun" />

  <area shape="circle" coords="129,161,10" href="mercur.htm" alt="Mercury" />

  <area shape="circle" coords="180,139,14" href="venus.htm" alt="Venus" />

</map>


本站源码全部迁移至5G云源码分享网-bbs.5g-yun.com
收缩

5G云在线客服