HTML 图像映射

图像映射

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

尝试点击下图中的计算机、电话或咖啡杯：

实例

以下是上述图像映射的 HTML 源代码：

<img src="workplace.jpg" alt="工作场所" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="计算机" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="电话" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="咖啡" href="coffee.htm">
</map>

亲自试一试

它是如何工作的？

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

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

图像

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

<img src="workplace.jpg" alt="工作场所" usemap="#workmap">

usemap 值以井号 "#" 开头，后跟图像映射的名称，用于建立图像与图像映射之间的关系。

提示：您可以使用任何图像作为图像映射！

创建图像映射

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

<map> 元素用于创建图像映射，并通过必需的 name 属性链接到图像：

<map name="workmap">

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

区域

然后，添加可点击区域。

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

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

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

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

shape ="rect"

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

因此，坐标 34,44 位于距左边距 34 像素、距顶部 44 像素的位置：

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

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

实例

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

亲自试一试

此区域变为可点击区域，并将用户发送到页面 "computer.htm"：

shape ="circle"

要添加圆形区域，首先定位圆心的坐标：

337,300

然后指定圆的半径：

44 像素

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

实例

<area shape="circle" coords="337, 300, 44" href="coffee.htm">

亲自试一试

此区域变为可点击区域，并将用户发送到页面 "coffee.htm"：

shape="poly"

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

这可用于创建任何形状。

例如，可能是一个牛角面包形状！

我们如何使下图中的牛角面包成为可点击链接？

我们必须找到牛角面包所有边缘的 x 和 y 坐标：

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

实例

<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.html">

亲自试一试

此区域变为可点击区域，并将用户发送到页面 "croissant.html":

图像映射和 JavaScript

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

向 <area> 元素添加点击事件以执行 JavaScript 函数：

实例

这里，我们使用 onclick 属性在点击区域时执行 JavaScript 函数：

<map name="workmap">
  <area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>

<script>
function myFunction() {
  alert("您点击了咖啡杯！");
}
</script>

亲自试一试

本章总结

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

HTML 图像标签

如需查看所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考。