html中的map标签和area标签详解

袁志蒙 618次浏览

摘要:今天无意中发现了一组特别有意思的HTML标签:map标签和area标签,查资料后总结一下:文档:<map>:用于定义一个客户端图像映射。图像映射(...

今天无意中发现了一组特别有意思的HTML标签:map标签和area标签,查资料后总结一下:

文档:

<map>:用于定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。

<area>:定义<map>的可点击区域

当<map>设置name或者id属性时,<img>标签的usemap属性会根据<map>的id和name属性来关联<map>


<map>标签:

必需的属性:

id:unique_name 为 map 标签定义唯一的名称。


可选的属性:

name:mapname 为 image-map 规定的名称,name 属性与 <img> 标签的 usemap 属性相关联,创建图像与映射之间的联系。


<area>标签:

必需的属性:

alt:定义此区域的替换文本(它规定在图像无法显示时的替代文本)。


可选的属性:

coords:

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

圆形:shape="circle",coords="x,y,z"

矩形:shape="rectangle",coords="x1,y1,x2,y2"

多边形:shape="polygon",coords="x1,y1,x2,y2,x3,y3,..."

shape:

default表示将定义整个区域为热点

rect表示将定义一个矩形区域为热点,(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2))

circle表示将定义一个圆形区域为热点,(圆心坐标为(X1,y1),半径为r)

poly表示将定义一个多边形区域为热点,(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ……)

target:

_blank在新窗口中打开被链接文档。

_self默认。在相同的框架中打开被链接文档。

_parent在父框架集中打开被链接文档。

_top在整个窗口中打开被链接文档。

framename在指定的框架中打开被链接文档。

href:

URL定义此区域的目标 URL。


map标签和area标签的用途:与img标签绑定使用,常被用来赋予给客户端图像某处区域特殊的含义,点击该区域可跳转到新的文档。


举个例子:

<img src="map.png" alt="map" usemap="#planetmap" class="img">
<map name="planetmap" id="planetmap">
	<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" target=""_blank" />
	<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
	<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>


例如,在中国地图上把每个省份都绘制热点区域,点击不同的省份即可跳转到不同的页面。

html中的map标签和area标签详解

这里有个难点就是area标签的coords属性的值不好获取,我们可以借助PS工具DW可视化来绘制热点区域,可大大增加开发效率!


随机内容

表情

共1条评论
  • 网友评论:

    很好。

    2020-06-15 05:32:33 回复

    点击加载