HTML <map> 标签

一、定义

将图片划出热点区域，定义不同的超链接

二、兼容性

兼容所有主流浏览器

三、用法

<img src="图片路径" usemap="#map标签的ID或name" alt="图片名" />
<map name="usemap的值" id="usemap的值"><!--这里是用name还是id取决于浏览器，所以要都写-->
  <area shape="热点区域形状" coords="区域对应坐标" href ="热点对应链接" alt="热点名" />
  <area shape="热点区域形状" coords="区域对应坐标" href ="热点对应链接" alt="热点名" />
  <area shape="热点区域形状" coords="区域对应坐标" href ="热点对应链接" alt="热点名" />
</map>

四、主要属性对应参数详解

①shape
a、 shape=”rect”： 矩形
b、 shape=”circle”：圆形
c、 shape=”poly”： 多边形

②coords
a、 rect矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
例：<area shape=rect coords=100,50,200,75 href="URL">

b、 circle圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度
例：<area shape=circle coords=85,155,30 href="URL">

c、 poly任意图形（多边形）：将图形之每一转折点座标依序填入
例：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">

五、实例

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <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>

六、area对象完整属性

属性	值	描述
alt	text	规定区域的替代文本。如果使用 href 属性，则该属性是必需的。
coords	coordinates	规定区域的坐标。
href	URL	规定区域的目标 URL。
hreflang*	language_code	规定目标 URL 的语言。
media*	media query	规定目标 URL 是为何种媒介/设备优化的。默认：all。
nohref	nohref	HTML 5 中不支持。
rel*	alternate author bookmark external help license next nofollow noreferrer prefetch prev search sidebar tag	规定当前文档与目标 URL 之间的关系。
shape	rect rectangle circ circle poly polygon	规定区域的形状。
target	_blank _parent _self _top framename	规定在何处打开目标 URL。
type*	mime_type	规定目标 URL 的 MIME 类型。

注：*为H5新增。