在网页设计中，图像映射是一种非常有用的工具，它允许在一个图片的不同区域设置多个链接。这对于创建交互式图片或地图特别有用。本文将详细介绍HTML图像映射是什么，它是如何工作的，以及如何创建一个HTML图像映射。
HTML 图像映射是什么？
HTML图像映射是在一张图片上定义了多个可点击区域的图形。每个区域都可以链接到不同的URL，使得用户可以通过点击图片的不同部分访问不同的页面或执行不同的动作。图像映射通常用于导航菜单、游戏界面或是复杂的图表和地图。
演示1
快来试一试吧！
点击“演示1”图片中电脑屏幕上的每一张图片。
以下是上面图像映射的 HTML 源代码：
<img src="https://www.zhaozhao123.cn/skin/images/sites1/2024/11/z.jpg" alt="电脑屏" usemap="#ping">
<map name="ping">
<area shape="rect" coords="131,105,207,205" target="_blank" href="https://www.zhaozhao123.cn/skin/images/sites1/2024/11/unnamed-file-1.jpg">
<area shape="rect" coords="211,97,287,213" target="_blank" href="https://www.zhaozhao123.cn/skin/images/sites1/2024/11/unnamed-file-2.jpg">
<area shape="rect" coords="291,88,367,223" target="_blank" href="https://www.zhaozhao123.cn/skin/images/sites1/2024/11/unnamed-file-3.jpg">
<area shape="rect" coords="371,97,447,212" target="_blank" href="https://www.zhaozhao123.cn/skin/images/sites1/2024/11/unnamed-file-4.jpg">
</map>HTML 图像映射是如何工作的？
HTML图像映射通过使用<map>标签和<area>标签来定义。<map>标签用于定义整个映射，而<area>标签则用来定义映射中的各个可点击区域。每个<area>标签都指定了一个区域的形状（圆形、矩形或多边形）、坐标以及目标URL。图像本身需要通过usemap属性与<map>标签关联起来。
创建HTML图像映射
要创建图像映射，您需要一个图像和一些描述可点击区域的 HTML 代码。
创建HTML图像映射的基本步骤如下：
- 选择图片：首先，你需要有一张图片，这张图片将是你的图像映射的基础。
- 定义映射：使用
<map>标签开始定义映射，并给它一个唯一的名称。 - 定义区域：使用一个或多个
<area>标签来定义映射中的可点击区域。每个<area>标签都需要指定形状（shape）、坐标（coords）和链接（href）。 - 关联映射与图片：在
<img>标签中使用usemap属性，其值应为<map>标签的name属性值前加上“#”。
图像
需要一个特殊的 usemap 属性。为图像映射提供一个唯一标识，这个标识不能包含空格。将这个标识 (preceded by a hash) 作为 usemap 属性的值。
<img src="https://www.zhaozhao123.cn/skin/images/sites1/2024/11/z.jpg" alt="电脑屏" usemap="#ping">区域——图像映射
添加一个元素：<map>，并且要加上一个name属性，该属性值必须与图像的usemap值相同。
注：<map>的name属性值前面不要加“#”，而图像的usemap值前面必须加“#”。
<map name="ping">
</map>然后，在<map>标签中添加<area>标签来定义映射中的各个可点击区域。
<map name="ping">
<area shape="rect" coords="131,105,207,205" target="_blank" href="https://www.zhaozhao123.cn/skin/images/sites1/2024/11/unnamed-file-1.jpg">
<area shape="rect" coords="211,97,287,213" target="_blank" href="https://www.zhaozhao123.cn/skin/images/sites1/2024/11/unnamed-file-2.jpg">
<area shape="rect" coords="291,88,367,223" target="_blank" href="https://www.zhaozhao123.cn/skin/images/sites1/2024/11/unnamed-file-3.jpg">
<area shape="rect" coords="371,97,447,212" target="_blank" href="https://www.zhaozhao123.cn/skin/images/sites1/2024/11/unnamed-file-4.jpg">
</map>HTML图像映射区域的形状
shape属性指定了区域的形状，它有以下几种可能的值：
- rect：矩形区域。需要使用
coords属性指定四个值，即左上角的x坐标、左上角的y坐标、右下角的x坐标和右下角的y坐标。 - circle：圆形区域。需要使用
coords属性指定三个值，即圆心的x坐标、圆心的y坐标以及半径。 - poly：多边形区域。需要使用
coords属性指定一系列坐标对，每对坐标代表多边形的一个顶点。 - default：默认区域，覆盖整个图像，除非有其他形状更精确地匹配用户点击的位置。
coords 属性
coords属性是一个逗号分隔的数值列表，用来定义由shape属性所指定形状的具体尺寸和位置。不同形状的coords属性格式如下：
- 矩形：
coords="x1,y1,x2,y2"，其中x1,y1是矩形左上角的坐标，x2,y2是矩形右下角的坐标。 - 圆形：
coords="x,y,r"，其中x,y是圆心的坐标，r是半径。 - 多边形：
coords="x1,y1,x2,y2,...,xn,yn"，其中每对x,y值定义了多边形的一个顶点。
我们再看一个示例：
演示2
快来试一试吧！
点击“演示2”图片中蔬菜。
图像映射提供了一种灵活的方式来增强静态图像的互动性，而无需使用复杂的JavaScript或CSS技术。
图像映射和JavaScript
虽然HTML图像映射本身已经很强大，但结合JavaScript可以进一步增强其功能。例如，可以使用JavaScript来动态改变链接地址、显示提示信息或者响应用户的点击事件等。下面是一个简单的例子，展示如何使用JavaScript为图像映射添加鼠标悬停效果：
<img src="image.jpg" alt="" usemap="#exampleMap" onmouseover="highlightArea(event)" onmouseout="unhighlightArea(event)">
<map name="exampleMap">
<area id="area1" shape="rect" coords="0,0,100,100" href="http://example.com/page1" alt="Page 1">
<!-- 更多区域... -->
</map>
<script>
function highlightArea(e) {
e.target.style.outline = "2px solid red";
}
function unhighlightArea(e) {
e.target.style.outline = "none";
}
</script>这个例子中，当鼠标悬停在任何一个定义的区域上时，该区域会被红色轮廓线突出显示；当鼠标移开后，轮廓线消失。
通过上述介绍，相信你对HTML图像映射有了全面的了解。利用这些知识，你可以创建出既美观又实用的交互式图片，为网站增添更多互动性和趣味性。