本文详细介绍了 html 中 `` 标签的 `usemap` 属性与 `
理解 HTML 图像地图（Image Map）
HTML 图像地图允许您在单个图像上定义多个可点击的区域，每个区域可以链接到不同的 URL。这通过组合 <img>、<map> 和 <area> 三个标签来实现。
- <img> 标签：用于嵌入图像。它的 usemap 属性是关键，它指定了要使用的图像地图的名称。
- <map> 标签：定义客户端图像地图。它通过 name 属性为地图提供一个名称，这个名称将被 <img> 标签的 usemap 属性引用。
- <area> 标签：定义图像地图中的一个可点击区域。它必须嵌套在 <map> 标签内部，并指定区域的形状、坐标和链接。
usemap 属性与 # 前缀
在实现图像地图时，一个常见的错误是 <img> 标签的 usemap 属性未能正确引用 <map> 标签的 name 属性。usemap 属性的值必须以哈希符号（#）开头，后跟 <map> 标签的 name 属性值。这个 # 符号表示它是一个对文档中某个元素的引用（类似于 ID 选择器）。
错误示例（usemap 缺少 #）：
<img src="path/to/image.jpg" usemap="myMapName" alt="My Image" /> <map name="myMapName"> <!-- area 标签 --> </map>
在这种情况下，area 标签将不会生效，因为 usemap="myMapName" 没有正确指向 name="myMapName" 的 <map> 元素。
立即学习“前端免费学习笔记（深入）”；
正确示例（usemap 包含 #）：
<img src="path/to/image.jpg" usemap="#myMapName" alt="My Image" /> <map name="myMapName"> <!-- area 标签 --> </map>
加上 # 后，<img> 标签就能正确识别并应用名为 myMapName 的图像地图。
<area> 标签的关键属性
<area> 标签定义了图像地图中的一个具体可点击区域。其主要属性包括：
-
shape：定义区域的形状。
- rect：矩形。coords 属性需要四个值：x1,y1,x2,y2（左上角和右下角的坐标）。
- circle：圆形。coords 属性需要三个值：x,y,r（圆心坐标和半径）。
- poly：多边形。coords 属性需要一系列 x,y 坐标对，形成多边形的顶点。
- default：定义整个图像的默认区域，当用户点击图像上未被其他 area 覆盖的部分时触发。
- coords：定义区域的坐标。这些坐标是相对于图像左上角（0,0）的像素值。
- href：指定点击此区域时跳转的 URL。
- alt：为区域提供替代文本，用于无障碍访问和当图像无法显示时。
- title：提供区域的额外信息，通常在鼠标悬停时显示为工具提示。
- target：指定链接打开的方式（如 _blank 在新窗口/标签页中打开）。
完整示例代码
以下是一个完整的 HTML 图像地图示例，演示了如何正确使用 <img>、<map> 和 <area> 标签来创建一个具有矩形可点击区域的图像。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 图像地图示例</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
text-align: center;
}
img {
border: 2px solid #ccc;
max-width: 100%; /* 确保图片在小屏幕上也能适应 */
height: auto;
}
p {
margin-top: 20px;
font-size: 1.1em;
color: #555;
}
</style>
</head>
<body>
<h1>交互式图像地图演示</h1>
<p>点击图片中的特定区域（例如右下角的矩形区域）来跳转到维基百科页面。</p>
<!-- 图像标签，通过 usemap 属性关联到图像地图 -->
<img
src="https://picsum.photos/800/600"
alt="示例图片，包含可点击区域"
width="800"
usemap="#hackerMap"
/>
<!-- 图像地图定义 -->
<map name="hackerMap">
<!-- 定义一个矩形区域 -->
<area
target="_blank"
alt="匿名黑客组织介绍"
title="点击查看 Anonymous 维基百科"
href="https://www.php.cn/link/d3edd466842655ec6dc7ac0590baf52d"
coords="500,450,700,550"
shape="rect"
/>
<!-- 可以添加更多 area 标签定义其他区域 -->
<!-- <area shape="circle" coords="100,100,50" href="another-link.html" alt="圆形区域"> -->
</map>
<p>请注意 `<img>` 标签的 `usemap="#hackerMap"` 如何引用 `<map name="hackerMap">`。</p>
</body>
</html>在上述代码中：
- <img> 标签的 usemap 属性值为 "#hackerMap"，它指向了下方 <map> 标签的 name="hackerMap"。
- <area> 标签定义了一个矩形区域，其坐标为 500,450,700,550，表示一个从 (500,450) 到 (700,550) 的矩形区域。当用户点击此区域时，将会在新标签页中打开 https://www.php.cn/link/d3edd466842655ec6dc7ac0590baf52d。
注意事项与最佳实践
- usemap 的 # 前缀：再次强调，这是最常见的错误，务必确保 usemap 属性值以 # 开头。
- 唯一性：<map> 标签的 name 属性值在整个 HTML 文档中应该是唯一的。
- 坐标准确性：coords 属性的值必须准确地反映图像上可点击区域的像素坐标。可以使用图像编辑工具（如 Photoshop、GIMP）或在线图像地图生成器来辅助获取坐标。
- 可访问性：为 <area> 标签提供有意义的 alt 和 title 属性，以改善用户体验和屏幕阅读器等辅助技术的兼容性。
- 图像路径：确保 <img> 标签的 src 属性指向的图像路径是正确的，并且图像能够被浏览器加载。避免使用本地文件系统路径（如 C:\Users\...），而应使用相对路径或绝对 URL。
-
响应式设计挑战：传统的图像地图是基于固定像素坐标的，这使得它们在响应式设计中难以适应不同屏幕尺寸。当图像尺寸变化时，area 标签的坐标可能不再准确。
- 对于简单的图像地图，可以通过 JavaScript 动态调整 coords，或者使用 CSS transform: scale() 配合 JavaScript 来实现。
- 对于更复杂的交互式图像，考虑使用 SVG (Scalable Vector Graphics) 或 CSS 布局结合 JavaScript 来实现，它们在响应式方面表现更优。
- 语法错误：检查 <area> 标签是否有多余的闭合斜杠（如 />），这可能导致解析错误。正确的自闭合标签格式是 <area ... />，但如果写成 .../>/> 则会出错。
总结
HTML 图像地图提供了一种在单个图像上定义多个交互区域的强大机制。掌握 <img> 标签 usemap 属性与 <map> 标签 name 属性之间通过 # 符号建立的关联是实现此功能的关键。同时，正确配置 <area> 标签的 shape、coords、href 以及 alt 和 title 属性，能够确保图像地图功能正常、用户体验良好且具备一定的可访问性。在现代 Web 开发中，对于复杂的交互需求，也应考虑 SVG 或其他更灵活的响应式解决方案。
