HTML
动态标准 — 最后更新于 2024年9月12日
动态标准 — 最后更新于 2024年9月12日
map 元素所有当前引擎都支持。
所有当前引擎都支持。
name — 图像地图 的名称，用于从 usemap 属性进行引用[Exposed =Window ]
interface HTMLMapElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString name ;
[SameObject ] readonly attribute HTMLCollection areas ;
};map 元素与 img 元素和任何 area 元素后代一起，定义了一个图像地图。该元素表示其子元素。
name 属性为地图指定一个名称，以便可以对其进行引用。该属性必须存在，并且必须具有非空值，且不包含ASCII 空格。name 属性的值不得等于同一树中另一个map 元素的name 属性的值。如果还指定了id 属性，则这两个属性必须具有相同的值。
map.areas返回一个HTMLCollection，其中包含area 元素，这些元素位于map 中。
areas 属性必须返回一个以map 元素为根的HTMLCollection，其过滤器仅匹配area 元素。
IDL 属性name 必须反映同名内容属性。
可以结合页面上的其他内容定义图像地图，以简化维护。此示例显示了一个页面，该页面在页面顶部有一个图像地图，在底部有一组相应的文本链接。
<!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 > area 元素所有当前引擎都支持。
所有当前引擎都支持。
map 元素祖先。alt — 图像不可用时使用的替换文本coords — 在图像地图中创建形状的坐标shape — 在图像地图中创建的形状类型href — 超链接的地址target — 可导航的，用于超链接的导航download — 是否下载资源而不是导航到它，以及如果是，则下载的文件名ping — 要 ping 的URLrel — 包含超链接的文档中位置与目标资源之间的关系referrerpolicy — 由元素发起的获取的引用程序策略href 属性：对于作者；对于实现者。[Exposed =Window ]
interface HTMLAreaElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute DOMString alt ;
[CEReactions ] attribute DOMString coords ;
[CEReactions ] attribute DOMString shape ;
[CEReactions ] attribute DOMString target ;
[CEReactions ] attribute DOMString download ;
[CEReactions ] attribute USVString ping ;
[CEReactions ] attribute DOMString rel ;
[SameObject , PutForwards =value ] readonly attribute DOMTokenList relList ;
[CEReactions ] attribute DOMString referrerPolicy ;
// also has obsolete members
};
HTMLAreaElement includes HTMLHyperlinkElementUtils ;area 元素表示具有某些文本和图像地图上相应区域的超链接，或者图像地图上的死区。
如果area 元素具有href 属性，则area 元素表示一个超链接。在这种情况下，必须存在alt 属性。它指定超链接的文本。其值必须是文本，当与图像地图的其他超链接指定的文本以及图像的替代文本一起显示时，但在没有图像本身的情况下，为用户提供与超链接在不使用其文本但将形状应用于图像时提供的相同类型的选择。如果同一图像地图中还有另一个area 元素指向相同资源并具有非空白alt 属性，则可以将alt 属性留空。
如果area 元素没有href 属性，则该元素表示的区域无法选择，并且必须省略alt 属性。
在这两种情况下，shape 和coords 属性都指定区域。
shape 属性是一个具有以下关键字和状态的枚举属性
| 关键字 | 符合 | 状态 | 简要说明 |
|---|---|---|---|
circle
| 圆形状态 | 指定一个圆形，在coords 属性中使用正好三个整数。 | |
circ
| 否 | ||
default
| 默认状态 | 此区域是整个图像。（不使用coords 属性。） | |
poly
| 多边形状态 | 指定一个多边形，在coords 属性中使用至少六个整数。 | |
polygon
| 否 | ||
rect
| 矩形状态 | 指定一个矩形，在coords 属性中使用正好四个整数。 | |
rectangle
| 否 |
如果指定了coords 属性，则它必须包含一个有效的浮点数列表。此属性提供由shape 属性描述的形状的坐标。此属性的处理过程在图像映射处理模型中进行了描述。
在圆形状态下，area 元素必须具有一个coords 属性，该属性包含三个整数，最后一个整数必须是非负数。第一个整数必须是图像左侧边缘到圆心在CSS 像素中的距离，第二个整数必须是图像顶侧边缘到圆心在CSS 像素中的距离，第三个整数必须是圆的半径，同样以CSS 像素为单位。
在默认状态下，area 元素不能具有coords 属性。（该区域为整个图像。）
在多边形状态下，area 元素必须具有一个coords 属性，该属性至少包含六个整数，并且整数的数量必须是偶数。每对整数必须表示一个坐标，该坐标分别以CSS 像素为单位给出图像左侧和顶部边缘的距离，所有坐标一起必须按顺序表示多边形的点。
在矩形状态下，area 元素必须具有一个coords 属性，该属性正好包含四个整数，第一个整数必须小于第三个整数，第二个整数必须小于第四个整数。这四个点必须分别表示图像左侧边缘到矩形左侧的距离、顶部边缘到顶部的距离、左侧边缘到右侧的距离以及顶部边缘到底部的距离，所有距离均以CSS 像素为单位。
当用户代理允许用户访问或下载使用area 元素创建的超链接时，href、target、download 和ping 属性决定如何访问该链接。rel 属性可用于在用户访问链接之前向用户指示目标资源的可能性质。
如果href 属性不存在，则必须省略target、download、ping、rel 和referrerpolicy 属性。
如果在area 元素上指定了itemprop 属性，则还必须指定href 属性。
所有当前引擎都支持。
IDL 属性alt、coords、shape、target、download、ping 和rel 必须反映同名内容属性。
所有当前引擎都支持。
HTMLAreaElement/referrerPolicy
所有当前引擎都支持。
IDL 属性referrerPolicy 必须反映referrerpolicy 内容属性，仅限于已知值。
图像映射允许将图像上的几何区域与超链接相关联。
图像（img 元素形式）可以通过在img 元素上指定usemap 属性与图像映射（map 元素形式）相关联。如果指定了usemap 属性，则它必须是map 元素的有效哈希名称引用。
考虑如下所示的图像
如果我们只想使彩色区域可点击，我们可以按如下方式操作
< 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 > 如果img 元素指定了usemap 属性，则用户代理必须按如下方式处理它
使用解析哈希名称引用的规则解析属性的值，并将元素作为上下文节点。这将返回一个元素（map）或 null。
如果返回 null，则返回。图像最终未与图像映射相关联。
否则，用户代理必须收集map 的所有后代area 元素。将这些元素设为areas。
获得构成图像映射的area 元素列表（areas）后，交互式用户代理必须以两种方式之一处理该列表。
如果用户代理打算显示img 元素表示的文本，则它必须使用以下步骤。
删除areas 中所有没有alt 属性或其alt 属性值为空字符串的area 元素，前提是areas 中还有另一个area 元素在href 属性中具有相同的值，并且具有非空的alt 属性。
areas 中每个剩余的area 元素都表示一个超链接。所有这些超链接都应以与img 文本相关联的方式提供给用户。
在此上下文中，用户代理可能会以实现定义的方式表示没有指定alt 属性或其alt 属性为空字符串或其他不可见文本的area 和img 元素，以指示缺少合适的作者提供的文本。
如果用户代理打算显示图像并允许与图像交互以选择超链接，则必须将图像与一组分层形状相关联，这些形状取自areas 中的area 元素，并按反向树序（因此，map 中最后指定的area 元素是最底层的形状，map 中的第一个元素（按树序）是最顶层的形状）。
必须按如下方式处理areas 中的每个area 元素以获得要叠加到图像上的形状
找到元素的shape 属性表示的状态。
使用解析浮点数列表的规则解析元素的coords 属性（如果存在），并将结果设为coords 列表。如果属性不存在，则将coords 列表设为空列表。
如果 coords 列表中的项目数量小于下表中给出的 area 元素当前状态的最小数量，则形状为空；返回。
| 状态 | 最小项目数量 |
|---|---|
| 圆形状态 | 3 |
| 默认状态 | 0 |
| 多边形状态 | 6 |
| 矩形状态 | 4 |
根据以下列表中与 shape 属性状态对应的条目，检查 coords 列表中的多余项目。
如果 shape 属性表示 rectangle state，并且列表中的第一个数字在数值上大于列表中的第三个数字，则交换这两个数字。
如果 shape 属性表示 rectangle state，并且列表中的第二个数字在数值上大于列表中的第四个数字，则交换这两个数字。
如果 shape 属性表示 circle state，并且列表中的第三个数字小于或等于零，则形状为空；返回。
现在，元素表示的形状是下面列表中与 shape 属性状态对应的条目指示的形状。
令 x 为 coords 中的第一个数字，y 为第二个数字，r 为第三个数字。
该形状是一个圆，其圆心距离图像左边缘 x 个 CSS像素，距离图像顶边缘 y 个 CSS像素，其半径为 r 个 CSS像素。
该形状是一个完全覆盖整个图像的矩形。
令 xi 为 coords 中的第 (2i) 个条目，yi 为 coords 中的第 (2i+1) 个条目（coords 中的第一个条目是索引为 0 的条目）。
令 the coordinates 为 (xi, yi)，以从图像左上角测量的 CSS像素 进行解释，对于从 0 到 (N/2)-1 的所有整数 i 值，其中 N 是 coords 中项目的数量。
该形状是一个多边形，其顶点由 the coordinates 给出，其内部使用奇偶规则确定。 [GRAPHICS]
令 x1 为 coords 中的第一个数字，y1 为第二个数字，x2 为第三个数字，y2 为第四个数字。
该形状是一个矩形，其左上角由坐标 (x1, y1) 给出，其右下角由坐标 (x2, y2) 给出，这些坐标被解释为从图像左上角测量的 CSS像素。
出于历史原因，坐标必须相对于显示的图像进行解释，在 CSS 'width' 和 'height' 属性（或对于非 CSS 浏览器，图像元素的 width 和 height 属性——CSS 浏览器将这些属性映射到上述 CSS 属性）引起的任何拉伸之后。
浏览器缩放功能和使用 CSS 或 SVG 应用的转换不会影响坐标。
指向设备与一组根据上述算法分层的形状关联的图像交互必须导致相关的用户交互事件首先触发到覆盖指向设备指示的点的最顶层形状（如果有），或者触发到图像元素本身（如果没有形状覆盖该点）。用户代理还可以允许表示 超链接 的各个 area 元素被选中和激活（例如，使用键盘）。
因为 map 元素（及其 area 元素）可以与多个 img 元素关联，所以 area 元素可能对应于文档的多个 可聚焦区域。
图像映射是 动态的；如果 DOM 发生变异，则用户代理必须表现得好像它重新运行了图像映射的算法。