HTML <area> 标签

什么是图像映射 (Image-map)

图像映射类似于图像超链接，但它允许你在单个图像中创建两个或多个不同的超链接。图像映射定义为一个图形图像，其中包含活动区域，用户点击该区域时可以链接到不同的目的地。图像映射的一个常见**示例**是一个国家地图，其中包含不同的州，每个州的边界与其他州分开。当访客点击对应某个州的特定区域时，网页浏览器就会显示与该区域关联的网页。图像映射的另一个有用示例是解释人、动物或任何产品的不同身体部位。不同的身体部位会带出关于每个部位的不同网页信息。

要定义图像映射，我们需要以下内容：

一个带有 **usemap** 属性的 HTML <img> 元素，该属性定义了一个有效的映射名称。

• 一个带有 **name** 属性的 HTML <map> 元素，其值必须与 **usemap** 相同。
• 一个 <map> 元素内的至少一个 <area> 元素，用于在图像映射中创建可点击区域。

图像映射的优点

• 它为您的网站提供了一个交互式的视觉元素。
• 您可以在单个图像上放置任意数量的链接，而无需担心布局问题。
• 当一个不规则形状的图像包含大量部分时，可以轻松地链接这些部分。
• 通过使用 Paintshop Pro、Photoshop、Corel Draw Painter、MS-FrontPage 2000 和 Mapedit、Jimagemap 等图像处理程序，代码会自动生成，从而使任务更容易，节省大量时间，并减轻用户计算 x、y 坐标的负担。

图像映射的缺点

• 图像映射仅适用于图形浏览器。
• 如果图像的大小未得到妥善优化，图像映射可能需要一些时间来上传。
• 您无法为每个链接提供适当的鼠标悬停效果。

area 标签是什么？

“area” 标签定义了图像映射中与超链接关联的可点击区域或活动区域。如果您点击这些区域，它将执行某些操作，例如打开新图像、新 URL 等。此标签始终与 “map” 元素一起使用。

在一个图像映射中，可以使用单个 “map” 元素中的多个 “area” 元素将不同的区域链接到不同的位置。“map” 标签必须定义一个指定映射名称的 name 属性。

“area” 元素使用（必需的）shape 和 coords 属性进行定义。

这个 shape 属性指定将成为超链接的区域的形状。它的值决定了浏览器如何解释 coords 属性的值。shape 属性的可能值可以是 rect（矩形）、circ（圆形）、poly（多边形），默认形状值为 rect，并且跨越整个区域。

语法

在上面的语法中，“map” 标签与 “img” 标签位于同一个 HTML 文件中，因此 usemap 属性的值是 “#name”。“map” 标签中指定的 name 值应与 “img” 标签的 usemap 属性值中指定的 name 匹配，以便映射指令应用于图形图像。“#” 符号表示映射文件与客户端映射的图像位于同一网页上。

以下是有关 HTML “area” 标签的一些规格：

示例

说明

上面示例中的点将在下面进行解释。

• 首先，选择一张您想用作图像映射的图片，**例如：**png。然后获取有关图像的一些高级信息，例如图像大小以及您想转换为可点击事件的图像内每个区域的像素坐标。我们将其分成四个相等的矩形，分别指定为 A、B、C 和 D。要定义每个子部分，我们需要左上角和右下角的坐标。
• 确定图像映射的坐标后，使用 “map” 标签创建客户端图像映射。它是一个块元素，包含一组 “area” 标签，每个标签定义图像的一个可点击区域。“map” 标签必须定义一个指定映射名称的 name 属性，**例如** web。**<map name = "web">**
• 接下来，定义一组 “area” 标签，每个标签定义图像的一个可点击区域。每个 “area” 标签包含 shape、coords、href 属性。然后指定 “/map” 关闭映射标签。最后，使用 “img” 标签添加图像。在 “img” 标签中添加 usemap 属性，并为其分配一个等于映射文件 URL（即 web）的值。

属性

标签特定属性

属性	值	描述
alt	text	如果浏览器无法显示图像，则在浏览器上显示的替代文本字符串。
coords	x1,y1,x2,y2(rect)	此处 (x1, y1) 坐标表示矩形区域的左上角位置，(x2, y2) 表示右下角位置。
	x,y,r(circ)	此处 (x, y) 表示圆的中心，r 表示圆的半径。
	x1,y1,x2,y2..xn,yn(poly)	此处每个 xn, yn 对表示多边形区域的顶点，n 表示顶点的数量。
href	href	此属性指定区域链接到的页面的 URL。URL 的规范与 “a” 标签中的 href 属性相同。它决定了活动区域的超链接目的地。
target (目标)	_blank	在新窗口中打开链接
	_parent	在父框架中打开链接
	_self	在当前窗口中打开链接
	_top	在同一窗口中以全屏宽度打开链接
	frame_name	在框架中。（**HTML5 中不支持**）
shape	default	它定义了默认区域（矩形）。
	rect	它定义了矩形区域。
	circle	定义圆形区域。
	poly	定义多边形。
download	filename	定义用于下载资源的超链接。
rel	alternate 作者 bookmark help license next nofollow noreferrer prefetch prev search 标签	它定义了当前文档与链接文档之间的关系。
hreflang	language_code	它指定了链接资源的语言。
type	media_type	它指定了链接源的 MIME 类型。（**HTML5 中不支持**）
nohref	nohref	此属性是可选的。它指定了指定区域没有关联的链接。
tabindex	范围从 1 到 32767	此属性用于设置网页中超链接的制表符序列。

全局属性

“area” 标签支持 HTML 中的全局属性。

事件属性

“area” 标签支持 HTML 中的事件属性。

支持的浏览器

元素	Chrome	IE	Firefox	Opera	Safari
<area>	是的	是的	是的	是的	是的