轻松上手,快乐学习!

HTML 图像映射


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


图像映射

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

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

Workplace Sun Mercury Venus

实例

以下是上面图像映射的 HTML 源代码:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
亲自试一试 »

它是如何工作的?

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

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


Image 图像

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

<img src="workplace.jpg" alt="Workplace" 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像素处:

Workplace

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

Workplace

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

实例

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
亲自试一试 »

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

Workplace

Shape="circle"

要添加圆区域,首先定位圆心的坐标:

337,300

Workplace

然后指定圆的半径:

44 pixels

Workplace

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

实例

<area shape="circle" coords="337, 300, 44" href="coffee.htm">
亲自试一试 »

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

Workplace

Shape="poly"

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

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

就像牛角面包的形状!

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

French Food

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

French Food

坐标成对出现,一个用于 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.htm">
亲自试一试 »

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

French Food

图像映射 和 JavaScript

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

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

实例

在这里,我们使用 onclick 属性指定在单击区域时执行的 JavaScript 函数:

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

<script>
function myFunction() {
  alert("You clicked the coffee cup!");
}
</script>
亲自试一试 »

本章小结

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

HTML Image 标签

标签 描述
<img> 定义图像
<map> 定义图像映射
<area> 定义图像地图中的可单击区域
<picture> 为多个图像资源定义容器

如需所有可用的 HTML 标签的完整列表,请访问 HTML 标签参考手册