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」随便连，而是必须成对出现的像素坐标，且起点和终点自动闭合——你不用重复写第一个点。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 正确格式：coords="10,20,30,40,50,60,70,80" → 表示 (10,20)→(30,40)→(50,60)→(70,80)→(10,20) 四边形
• 坐标单位是相对于 <img> 左上角的绝对像素值，不是百分比（除非配合 JS 动态换算）
• 至少需要 3 对坐标（6 个数字），否则浏览器忽略该区域
• 坐标顺序影响渲染方向，但不影响点击检测；顺时针/逆时针都可，只要不自交

嵌套在 map 里却点不中？检查这些硬性条件

@#@#@#@#@#@#@#@#@#@0 可拖拽画多边形，实时导出 <code><area> 代码

把 <area> 加上 onmousedown="console.log('hit')" 快速验证是否触发

用浏览器开发者工具选中 <area> 元素，看右侧样式面板是否显示 “:hover” 状态（虽然没样式，但能确认是否被识别）

注意：Chrome DevTools 的 “Elements > Show Rulers” 不会显示 <area> 边界，得靠实际点击反馈判断

实际项目里，真正麻烦的不是写对 coords，而是图片尺寸变化后如何同步更新所有多边形坐标——这一步几乎必须靠 JS 计算，纯 HTML 搞不定。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！