HTML区域映射脚本怎么写？原生逻辑实现解析-html教程-PHP中文网

area元素的href必须为有效URL才能触发原生跳转；空值、#、拼写错误或多余空格会导致静默失败，需通过检查元素确认href存在且合法。

html区域映射脚本怎么写？原生逻辑实现解析

area 元素的 href 属性必须是有效 URL 才能触发跳转

原生 <map></map> + <area> 本身不执行脚本，只做坐标映射和导航。如果你点了 <area> 却没反应，大概率是 href 值写成了空字符串、#、或拼写错误的路径（比如 href="page.html " 多了个空格）。浏览器会静默忽略无效值，不会报错，这点特别容易被忽略。

验证方法：右键图片 → “检查元素”，确认 <area> 标签已渲染且 href 属性存在、非空、格式合法（支持 https://、/path、#id 等）。

href 为 #section1 时，页面需存在 id="section1" 的元素
想阻止默认跳转（比如改用 JS 处理），必须加 onclick="return false;" 或用事件监听器调用 event.preventDefault()
不支持 javascript:void(0) 在部分旧版 Safari 中会触发空白页

用 addEventListener 绑定 area 点击事件要注意事件冒泡和 target 判断

<area> 无法直接绑定 onclick 属性（HTML 规范不推荐），但可以用 JS 为整个 <map></map> 或其父 <img> 添加事件监听——因为 <area> 本身不生成独立 DOM 节点（在大多数浏览器中不可见于 document.querySelectorAll('area') 的运行时结果），点击实际触发在图片上，靠 clientX/clientY 和 coords 反推命中区域。

更可靠的做法是：给 <img> 绑定 click，再手动比对坐标：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

const img = document.querySelector('img[usemap]');
const map = document.querySelector('map[name="myMap"]');
const areas = map.querySelectorAll('area');
<p>img.addEventListener('click', (e) => {
const rect = img.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;</p><p>for (const area of areas) {
if (isPointInArea(x, y, area)) {
console.log('hit:', area.dataset.action);
break;
}
}
});</p><p>function isPointInArea(x, y, area) {
const coords = area.coords.split(',').map(Number);
const shape = area.shape.toLowerCase();</p><p>if (shape === 'rect') {
return x >= coords[0] && x = coords[1] && y  dx + dy  dy </p><h3>area 的 shape 和 coords 解析逻辑不能硬编码，要按规范处理空格与单位</h3><p><code>coords</code> 是逗号分隔的数字字符串，但浏览器容错性强：允许开头/结尾空格、中间多个空格、甚至带单位（如 <code>"10px,20px,100px,80px"</code>）。原生解析不会报错，但手动比对坐标时若直接 <code>split(',')</code> 后 <code>parseInt</code>，可能因空格导致 <code>NaN</code>。</p>

安全写法：用 coords.match(/-?\d+/g) 提取所有整数，忽略单位和空格
shape="default" 表示整个图片区域，此时 coords 应为空，但有些老代码误写成 coords="0,0,9999,9999"，需额外判断
IE 支持 shape="poly" 的顶点数上限为 100，现代浏览器无此限制，但超长 coords 字符串会影响解析性能