什么是图像映射？
图像映射是指将一张图像的其中某些区域分别作为链接的点击区域，当用户点击图像的某个区域时，会跳转到指定的链接或执行相应的操作。
在HTML中，我们可以使用<map>和<area>标签来实现图像映射。
如何创建一个图像映射？
步骤1：为图像添加<map>标签
首先，需要为要实现图像映射的图像添加一个<map>标签，并为该标签设置一个name属性，该属性的值将在<img>标签的usemap属性中使用，用来关联图像和<map>标签。下面是一个例子：
<img src="example.jpg" alt="Example" usemap="#example-map">
<map name="example-map">
// 这里将添加<area>标签
</map>
在上面的例子中，我们为一张名为example.jpg的图片设置了一个usemap属性，并将其值设置为"#example-map"。接下来，我们需要在<map>标签中添加<area>标签。
步骤2：为图像的点击区域添加<area>标签
在<map>标签中，每个<area>标签表示图像的一个点击区域，其coords属性用来定义点击区域的坐标。具体来说，coords属性值的格式取决于<area>标签的shape属性值。常用的形状有矩形、圆形和多边形，它们的坐标值格式如下：
矩形：x1,y1,x2,y2
圆形：x,y,radius
多边形：x1,y1,x2,y2,x3,y3,...,xn,yn
除了coords属性外，<area>标签还有其它属性，其中最重要的是href属性，用来设置点击该区域时要跳转到的页面或执行的操作。下面是一个完整的例子：
<img src="example.jpg" alt="Example" usemap="#example-map">
<map name="example-map">
<!-- 矩形区域 -->
<area shape="rect" coords="0,0,100,100" href="page1.html">
<!-- 圆形区域 -->
<area shape="circle" coords="200,100,50" href="page2.html">
<!-- 多边形区域 -->
<area shape="poly" coords="300,0,400,0,350,100" href="page3.html">
</map>
在上面的例子中，我们为<img>标签添加了一个usemap属性，并将其值设置为"#example-map"。然后，我们在<map>标签中添加了三个<area>标签，分别表示图像的三个点击区域。第一个区域为矩形区域，其坐标值为0,0,100,100，表示左上角为(0,0)，右下角为(100,100)；第二个区域为圆形区域，其坐标值为200,100,50，表示圆心为(200,100)，半径为50；第三个区域为多边形区域，其坐标值为300,0,400,0,350,100，表示该多边形的顶点为(300,0)、(400,0)和(350,100)。
总结
图像映射是一种便捷的交互技术，能够让用户通过点击图像的不同区域来实现不同的功能。在HTML中，我们使用<map>和<area>标签来实现图像映射，其中每个<area>标签表示图像的一个点击区域。在添加<area>标签时，需要设置其shape和coords属性，并为其设置href属性来指定点击该区域时要跳转到的页面或执行的操作。