以下是最常见的图片文件类型，所有浏览器（Chrome、Edge、Firefox、Safari、Opera）均支持这些类型：

注意：加载大型图片需要时间，并且会降低网页速度。请谨慎使用图片。

HTML 图像映射

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

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

示例

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">code>

<map name="workmap">code>

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

<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">code>

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

</map>

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

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

图像映射与其他图像的唯一区别是您必须添加 usemap 属性：

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">code>

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

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

创建图像映射

然后，添加 <map> 元素。

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

<map name="workmap">code>

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="xxx.html">code>

这是可点击的区域，并将用户发送到页面“xxx.html”：

Shape=“circle”

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

337,300

然后指定圆的半径：

44 像素

示例

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

这是可点击的区域，并将用户发送到页面“coffee.htm”：

Shape=“poly”

shape=“poly” 包含多个坐标点，创建由直线形成的形状（多边形）。这可用于创建任何形状。

示例

<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">code>

这是可点击的区域，并将用户发送到页面“croissant.htm”：

图像地图和 JavaScript