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 函数

章节总结

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

HTML 图片标签