1. 4.8.12 map 元素
      2. 4.8.13 area 元素
      3. 4.8.14 图片地图

4.8.12 map 元素

元素/map

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet Explorer是
Firefox Android4+Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别:
流动内容.
短语内容.
可感知内容.
可以使用此元素的上下文:
在期望 短语内容 的地方。
内容模型:
透明的.
text/html 中的标签省略:
两个标签都不能省略。
内容属性:
全局属性
name — 图片地图 的名称，以便从 usemap 属性中 引用 它
可访问性注意事项:
针对作者.
针对实现者.
DOM 接口:
使用 HTMLMapElement。

map 元素与 img 元素和任何 area 元素子级一起定义了一个 图片地图。该元素 表示 它的子级。

name 属性为地图提供一个名称，以便可以 引用 它。该属性必须存在，并且必须具有一个非空值，且不包含 ASCII 空格。name 属性的值不能与同一 树 中的另一个 map 元素的 name 属性的值相同。如果还指定了 id 属性，则两个属性必须具有相同的值。

map.areas

返回 HTMLCollection，其中包含 area 元素，它们位于 map 中。

图片地图可以与页面上的其他内容一起定义，以便于维护。此示例是一个页面，页面顶部有一个图片地图，底部有一组相应的文本链接。

<!DOCTYPE HTML>
<HTML LANG="EN">
<TITLE>Babies™: Toys</TITLE>
<HEADER>
 <H1>Toys</H1>
 <IMG SRC="/images/menu.gif"
      ALT="Babies™ navigation menu. Select a department to go to its page."
      USEMAP="#NAV">
</HEADER>
 ...
<FOOTER>
 <MAP NAME="NAV">
  <P>
   <A HREF="/clothes/">Clothes</A>
   <AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"> |
   <A HREF="/toys/">Toys</A>
   <AREA ALT="Toys" COORDS="100,0,200,50" HREF="/toys/"> |
   <A HREF="/food/">Food</A>
   <AREA ALT="Food" COORDS="200,0,300,50" HREF="/food/"> |
   <A HREF="/books/">Books</A>
   <AREA ALT="Books" COORDS="300,0,400,50" HREF="/books/">
  </P>
 </MAP>
</FOOTER>

4.8.13 area 元素

元素/area

所有当前引擎都支持。

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (旧版)12+Internet Explorer是
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
类别:
流动内容.
短语内容.
可以使用此元素的上下文:
在期望 短语内容 的地方，但前提是必须存在一个 map 元素祖先。
内容模型:
无.
text/html 中的标签省略:
没有 结束标签。
内容属性:
全局属性
alt — 当图像不可用时使用的替代文本
coords — 在 图片地图 中创建形状的坐标
shape — 在 图片地图 中创建的形状类型
href — 超链接 的地址
target — 用于 超链接 导航 的 可导航 内容
download — 是否下载资源而不是导航到它，以及如果是，则为其文件名
ping — 要 ping 的 URL
rel — 包含 超链接 的文档中的位置与目标资源之间的关系
referrerpolicy — 由元素启动的 获取 的 来源策略
可访问性注意事项:
如果元素具有 href 属性：针对作者；针对实现者。
否则：针对作者；针对实现者。
DOM 接口:
使用 HTMLAreaElement。

area 元素 表示 具有某些文本和 图片地图 上的相应区域的超链接，或者图片地图上的死区。

具有父节点的 area 元素必须具有一个 map 元素祖先。

如果 area 元素具有 href 属性，则 area 元素表示一个 超链接。在这种情况下，alt 属性必须存在。它指定超链接的文本。它的值必须是文本，当与为 图片地图 的其他超链接指定的文本以及图像的替代文本一起呈现时（但不包括图像本身），它为用户提供了与超链接在不使用其文本，但将其形状应用于图像时使用时相同类型的选择。如果同一 图片地图 中存在另一个 area 元素，它指向同一个资源，并且具有一个非空 alt 属性，则可以将 alt 属性留空。

如果 area 元素没有 href 属性，则由该元素表示的区域无法选择，并且必须省略 alt 属性。

在这两种情况下，shape 和 coords 属性指定区域。

shape 属性是一个具有以下关键字和状态的 枚举属性

关键字状态
circle 圆形状态
default 默认状态
poly 多边形状态
rect 矩形状态

该属性的 缺失值默认值 和 无效值默认值 都是 矩形 状态。

coords 属性必须，如果指定，包含一个 有效的浮点数列表。此属性提供 shape 属性描述的形状的坐标。

在 圆形状态 中，area 元素必须具有一个存在的 coords 属性，其中包含三个整数，最后一个整数必须是非负数。第一个整数必须是图像左边缘到圆心在 CSS 像素 中的距离，第二个整数必须是图像上边缘到圆心在 CSS 像素 中的距离，第三个整数必须是圆的半径，同样以 CSS 像素 为单位。

在 默认状态 中，area 元素不能具有 coords 属性。（区域为整个图像。）

在 多边形状态 中，area 元素必须具有一个 coords 属性，其中至少包含六个整数，并且整数的个数必须是偶数。每对整数必须表示一个坐标，该坐标以图像左边缘和顶边缘在 CSS 像素 中的距离分别给出，并且所有坐标一起必须按顺序表示多边形的点。

在 矩形状态 中，area 元素必须具有一个 coords 属性，其中恰好包含四个整数，第一个整数必须小于第三个整数，第二个整数必须小于第四个整数。四个点必须分别表示图像左边缘到矩形左侧的距离、顶部边缘到顶部的距离、左边缘到右侧的距离以及顶部边缘到底部的距离，所有这些距离都以 CSS 像素 为单位。

如果 href 属性不存在，则必须省略 target、download、ping、rel 和 referrerpolicy 属性。

如果在 itemprop 属性指定在 area 元素上，那么 href 属性也必须指定。

4.8.14 图片地图

一个 图片地图 允许将图像上的几何区域与 超链接 相关联。

一个图像，以 img 元素的形式，可以与一个图片地图（以 map 元素的形式）相关联，方法是在 img 元素上指定一个 usemap 属性。如果指定了 usemap 属性，则它必须是一个 有效的哈希名称引用 到 map 元素。

考虑一个如下所示的图像

A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.

如果我们只想让彩色区域可点击，我们可以这样做

<p>
 Please select a shape:
 <img src="shapes.png" usemap="#shapes"
      alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
 <map name="shapes">
  <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
  <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
  <area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
  <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
  <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
        href="yellow.html" alt="Yellow star.">
 </map>
</p>