HTML map 语法
在 HTML 中，map 标签用于定义图片映射，也就是图片可点击区域。这些区域可以链接到其他网页、触发 JavaScript 事件 等。
语法：
<map name="地图名称">
<area href="链接地址" alt="替代文本" shape="形状" coords="坐标">
</map>
<img src="图片路径" usemap="#地图名称">说明：
对于 map 标签来说，“map 标签的 name 属性” 必须与 “img 标签的 usemap 属性” 一致，以创建图片与映射之间的关系。
对于 area 标签来说，它必须作为子元素嵌套在 map 标签内。area 标签的常用属性有 4 个：
href：定义区域的链接地址。当用户点击该区域时，会跳转到该链接地址。alt：定义当图片无法显示时的替代文本。shape：用于定义区域的形状，可选值有 "rect"（默认值）、"circle"、"poly"。coords：用于定义区域的坐标，格式取决于 shape 属性。- 当 shape="rect" 时，坐标格式为 “左上角 x 坐标, 左上角 y 坐标, 右下角 x 坐标, 右下角 y 坐标”，比如：
x1, y1, x2, y2。 - 当 shape="circle" 时，坐标格式为 “圆心 x 坐标, 圆心 y 坐标, 半径”，比如
centerX, centerY, radius。 - 当 shape="poly" 时，坐标格式为各个顶点的 x 坐标和 y 坐标，用逗号分隔，比如：
x1, y1, x2, y2, x3, y3, ...。
- 当 shape="rect" 时，坐标格式为 “左上角 x 坐标, 左上角 y 坐标, 右下角 x 坐标, 右下角 y 坐标”，比如：
提示: 手动计算 coords 坐标是非常繁琐的。在实际开发中，我们通常使用在线工具（可以搜索 "Online Image Map Generator"）来通过鼠标框选区域，自动生成对应的代码。
HTML map 摘要
| 属于 | HTML 图片 |
|---|---|
| 使用频率 | 低 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML map 示例
接下来，我们通过一个简单的例子来讲解一下 HTML map 标签是如何使用的。
示例：map 标签的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<img usemap="#frontend" src="./imgs/html-css-js.jpg" alt="">
<map name="frontend">
<area shape="rect" coords="35,205,195,365" alt="html" href="https://www.lvyenet.com/html">
<area shape="rect" coords="205,205,365,365" alt="css" href="https://www.lvyenet.com/css">
<area shape="rect" coords="120,35,280,195" alt="javascript" href="https://www.lvyenet.com/javascript">
</map>
</div>
</body>
</html>
页面效果如下图所示。
分析：
当我们点击图片中的不同区域时，就会跳转到相应的链接。需要注意的是，map 标签的 name 为 "frontend"，此时 img 标签 usemap 属性值应该写成 "#frontend"，而不能写成 "frontend"。
map 标签的注意事项
虽然 map 标签功能强大，但在现代网页开发，尤其是响应式网页设计中，其使用频率有所降低。主要原因有以下两点：
- 响应式设计复杂性：coords 属性是基于固定像素的，当图像尺寸根据屏幕大小发生变化时，热点区域的坐标不会自动调整，这就需要借助 JavaScript 来动态计算和更新坐标，从而增加了开发的复杂性。
- 可访问性较差：虽然 alt 属性提供了替代文本，但对于屏幕阅读器的用户来说，图像映射可能不如直接的文本链接列表直观和易用。
对于大多数交互需求，使用 CSS 定位 和叠加在图像上的链接（a 标签）或按钮，再结合 JavaScript 处理事件，通常能更好地满足响应式设计和可访问性要求。
因此，map 标签更适用于图像尺寸固定且交互需求简单的场景，或者作为一些特定应用的补充。
