用HTML区域映射制作景区导览图-html教程-PHP中文网

area标签必须嵌套在map中并通过usemap属性与img关联，name和usemap值需完全一致且usemap前加#；coords坐标不随图片缩放自适应，需按显示尺寸切图或JS动态重算；SVG是更优响应式替代方案。

用html区域映射制作景区导览图

area 标签必须配合 map 使用，单独写无效

浏览器根本不会识别孤立的 <area>，它只在 <map></map> 内部起作用，且必须通过 usemap 属性与 <img> 关联。常见错误是只写了 <area> 却忘了套 <map></map>，或者 usemap 值漏了开头的 #。

正确结构长这样：

@@##@@
<map name="park-map"><area shape="rect" coords="10,20,110,120" href="gate.html" alt="南门入口">
<area shape="circle" coords="200,150,30" href="lake.html" alt="中心湖"></map>

name 和 usemap 的值必须完全一致（含大小写），且 usemap 前必须带 #
coords 顺序和含义取决于 shape：矩形是 x1,y1,x2,y2，圆形是 cx,cy,radius，多边形是连续的 x,y 对
图片尺寸变化时，coords 值不会自适应——这是后续维护最头疼的地方

响应式场景下 coords 坐标会全部错位

用 <img src="park-map.png" usemap="#park-map"> 的 width/height 或 CSS 缩放图片后，<area> 仍按原始图片像素计算坐标，导致点击区域漂移。这不是 bug，是规范行为。

Wechat Article Html

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

下载

最稳妥做法：导出图片时就按页面最终显示尺寸切图，让 src 图片原生尺寸 = 页面渲染尺寸
若必须缩放，可用 JavaScript 动态重算 coords（监听 resize，按比例缩放所有数值），但要注意 getBoundingClientRect() 获取的是视口坐标，需反推到图片原始坐标系
现代替代方案：改用 SVG <path></path> + <a></a>，天然支持缩放和事件委托，兼容性也足够（IE9+）

area 不支持 title 提示，alt 仅用于无障碍

<area> 的 title 属性在多数浏览器中被忽略，hover 无文字提示。用户不知道哪里能点，尤其对图标密集的导览图很不友好。

可行解：在 <area> 外层加一层绝对定位的 <div>，用 JS 绑定 <code>mouseenter 显示 tooltip，位置根据 getBoundingClientRect() 调整
alt 必须写，否则屏幕阅读器无法识别该热点功能；内容要具体，比如写 "荷花池（步行约3分钟）"，而不是 "景点1"
移动端点击热区小，建议每个 <area> 的最小有效尺寸不小于 44×44px，否则 iOS Safari 容易误判