HTML 图像映射

使用 HTML 图像映射，您可以在图像上创建可点击的区域。

图像映射

HTML <map> 标签定义一个图像映射。图像映射是一个带有可点击区域的图像。区域使用一个或多个 <area> 标签定义。

请尝试点击下方图片中的电脑、电话或咖啡杯

它是如何工作的？

图像映射的理念是，您可以根据在图像的哪个位置点击来执行不同的操作。

要创建图像映射，您需要一张图像，以及一些描述可点击区域的 HTML 代码。

图像

图像使用 <img> 标签插入。与其他图像的唯一区别是，您必须添加一个 usemap 属性

usemap 值以井号 # 开头，后跟图像映射的名称，用于在图像和图像映射之间创建关联。

创建图像映射

然后，添加一个 <map> 元素。

<map> 元素用于创建图像映射，并通过使用必需的 name 属性与图像关联

name 属性的值必须与 <img> 的 usemap 属性值相同。

区域

然后，添加可点击的区域。

可点击区域使用 <area> 元素定义。

形状

您必须定义可点击区域的形状，可以选择以下值之一

• rect - 定义一个矩形区域
• circle - 定义一个圆形区域
• poly - 定义一个多边形区域
• default - 定义整个区域

您还必须定义一些坐标才能将可点击区域放置在图像上。 

Shape="rect"

shape="rect" 的坐标成对出现，一对用于 x 轴，一对用于 y 轴。

所以，坐标 34,44 位于距离左边距 34 像素和距离顶部 44 像素的位置

坐标 270,350 位于距离左边距 270 像素和距离顶部 350 像素的位置

现在我们有足够的数据来创建一个可点击的矩形区域

这是变得可点击并将用户发送到页面 "computer.htm" 的区域

Shape="circle"

要添加圆形区域，请先找到圆心的坐标

337,300

然后指定圆的半径

44 像素

现在您有足够的数据来创建一个可点击的圆形区域

这是变得可点击并将用户发送到页面 "coffee.htm" 的区域

Shape="poly"

shape="poly" 包含多个坐标点，这些点构成由直线（多边形）形成的形状。

这可以用来创建任何形状。

比如一个可颂形状！

我们如何让下图的可颂饼成为可点击的链接？

我们必须找到可颂饼所有边缘的 x 和 y 坐标

坐标成对出现，一对用于 x 轴，一对用于 y 轴

这是变得可点击并将用户发送到页面 "croissant.htm" 的区域

图像映射和 JavaScript

可点击区域也可以触发 JavaScript 函数。

在 <area> 元素中添加 click 事件来执行 JavaScript 函数

Chapter Summary

• 使用 HTML <map> 元素定义图像映射
• 使用 HTML <area> 元素定义图像映射中的可点击区域
• 使用 <img> 元素的 HTML usemap 属性指向一个图像映射

HTML 图像标签