HTML 图片映射

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

图片映射

HTML<map>标签定义图片映射。图片地图是具有可点击区域的图片。这些区域由一个或多个定义<area>标签。

尝试点击下图中的电脑、手机或咖啡：

它是如何工作的？

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

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

图片

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

这个usemap值以哈希标签开头#后面是图片映射的名称，用于创建图片和图片映射之间的关系。

创建图片映射

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

这个<map>元素用于创建图片映射，并通过使用所需的链接到图片name属性：

这个name属性必须具有相同的值<img>的usemap属性 。

区域

然后，添加可点击区域。

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

形状

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

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

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

形状="rect"

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

所以，坐标34,44距离左边距 34 像素，距离顶部 44 像素：

该坐标270,350距离左边距 270 像素，距离顶部 350 像素：

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

这是可点击的区域，并将用户带到页面 "computer.htm"：

形状="circle"

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

337,300

然后指定圆的半径：

44像素

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

这是可点击的区域，并将用户带到页面 "coffee.htm"：

形状="poly"

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

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

也许像牛角面包形状！

我们怎样才能使下图中的牛角面包成为可点击的链接呢？

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

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

这是可点击的区域，并将用户带到页面 "croissant.htm"：

图片映射和 JavaScript

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

添加一个click事件到<area>执行 JavaScript 函数的元素：

章节总结

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

HTML练习

HTML 图片标签