HTML 图像映射

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

图像映射

<map> 标记定义了一个图像映射。图像映射是具有可单击区域的图像。区域由一个或多个<area>标记定义。

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

它是如何工作的?

图像映射背后的想法是，您应该能够根据您在图像中单击的位置执行不同的操作。

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

Image 图像

使用 <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 pixels

现在您有足够的数据来创建可单击的圆形区域:

这是一个可单击的区域，它将用户发送到页面 "coffee.htm":

Shape="poly"

shape="poly" 包含多个坐标点，用于创建由直线(多边形)形成的形状。

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

就像牛角面包的形状！

我们怎样才能使下图中的羊角面包成为一个可点击的链接?

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

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

这是一个可单击的区域，它将用户发送到页面 "croissant.htm":

图像映射 和 JavaScript

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

将 click 事件添加到 he <area> 元素以执行JavaScript函数:

本章小结

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

HTML Image 标签