area shape="poly" 有效需满足：coords必须成对写为“x1,y1,x2,y2,x3,y3…”且至少3对；area必须嵌套在map内，img通过usemap="#name"绑定同名map；坐标基于原图像素，CSS缩放需JS重算；重叠area按DOM顺序响应，不支持z-index。
area shape="poly" 的坐标怎么写才有效
直接写 shape="poly" 但点击没反应？大概率是 coords 格式错了。它不是「x,y,x,y」随便连，而是必须成对出现的像素坐标，且起点和终点自动闭合——你不用重复写第一个点。
- 正确格式：
coords="10,20,30,40,50,60,70,80"→ 表示 (10,20)→(30,40)→(50,60)→(70,80)→(10,20) 四边形 - 坐标单位是相对于
<img>左上角的绝对像素值，不是百分比（除非配合 JS 动态换算） - 至少需要 3 对坐标（6 个数字），否则浏览器忽略该区域
- 坐标顺序影响渲染方向，但不影响点击检测；顺时针/逆时针都可，只要不自交
嵌套在 map 里却点不中？检查这些硬性条件
<area> 不是独立可用标签，它必须包裹在 <map> 内，且对应图片必须通过 usemap 属性绑定。漏掉任一环，热区就失效。
-
<img src="a.jpg" usemap="#myMap">——usemap值必须以#开头，且与<map name="myMap">中的name完全一致（大小写敏感） -
<map>必须在<img>同一文档流中，不能放在<body>外或异步加载的模板里 - 如果图片用 CSS 缩放（比如
width: 100%; height: auto），coords还是按原始尺寸计算，热区会偏移——此时必须用 JS 动态重算坐标
复杂多边形热区常见坑：重叠、透明、z-index
多个 <area> 重叠时，浏览器只响应最末尾的那个（DOM 顺序决定优先级），不是“离鼠标近的优先”。这点和 CSS 层叠完全不同。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 不要指望
z-index控制<area>层级——它不支持任何样式属性，style或class加了也无效 - 热区不响应透明/半透明区域：哪怕图片某块是 PNG 透明，只要
coords覆盖了，就仍算可点击；但若该区域被其他元素（如遮罩层<div>）挡住，且该元素没有pointer-events: none，点击就被拦截 - 移动端 Safari 对超小区域（如单点或极细线段）可能忽略点击，建议最小包围矩形宽度/高度 ≥ 8px
调试 coords 坐标：别手算，用工具+console 验证
手动数像素容易错，尤其复杂轮廓。推荐先用工具生成基础坐标，再微调。
立即学习“前端免费学习笔记（深入）”；
- 在线工具如 Image-Map.net 可拖拽画多边形，实时导出
<area>代码 - 把
<area>加上onmousedown="console.log('hit')"快速验证是否触发 - 用浏览器开发者工具选中
<area>元素，看右侧样式面板是否显示 “:hover” 状态（虽然没样式，但能确认是否被识别） - 注意：Chrome DevTools 的 “Elements > Show Rulers” 不会显示
<area>边界，得靠实际点击反馈判断
coords，而是图片尺寸变化后如何同步更新所有多边形坐标——这一步几乎必须靠 JS 计算，纯 HTML 搞不定。 
