HTML怎么做区域映射链接？超链接添加实用方法-html教程-PHP中文网

area标签的shape和coords必须严格匹配：shape="rect"→coords="x1,y1,x2,y2"（x2>x1且y2>y1）；shape="circle"→coords="cx,cy,r"（r为正整数）；shape="poly"→coords="x1,y1,x2,y2,x3,y3..."（坐标对数为偶数，原点在图片左上角）。

html怎么做区域映射链接？超链接添加实用方法

area 标签的 shape 和 coords 怎么填？

图像映射依赖的 shape 和 coords 属性精确定位可点击区域，这两个值必须严格匹配图像像素坐标，错一位就点不中。

常见组合有：

shape="rect" → coords="x1,y1,x2,y2"：左上角和右下角坐标，注意 x2 > x1 且 y2 > y1
shape="circle" → coords="cx,cy,r"：圆心横纵坐标加半径，单位是像素
shape="poly" → coords="x1,y1,x2,y2,x3,y3,..."：按顺时针或逆时针顺序列出所有顶点，坐标对数必须为偶数

坐标原点在图片左上角（0,0），x 向右递增、y 向下递增。别凭感觉手写——用 FireShot、ImageMapster 或在线工具（如 mapedit.net）导出 coords 更可靠。

usemap 属性为什么总不生效？

最常踩的坑是 usemap 值和的 name 不一致，或漏了 # 前缀。

正确写法只有这一种模式：

@@##@@
<map name="planetmap"><area shape="circle" coords="100,100,30" href="sun.html"></map>

关键点：

usemap 值必须以 # 开头，比如 usemap="#planetmap"
的 name 属性值必须与之完全相同（不含 #），且全页面唯一
可放在任意位置，但不能嵌套在内
浏览器不校验图片尺寸是否匹配 coords，超界区域仍可点击（只是没视觉反馈）

响应式页面里 image map 还能用吗？

不能直接用。因为 coords 是固定像素值，当图片被 CSS 缩放、max-width: 100% 拉伸或 viewport 变化时，热区会严重偏移。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

临时补救方式有限：

给加 width 和 height 固定尺寸（禁用 fluid 缩放）
用 JavaScript 监听 resize，按缩放比例重算所有 coords（代码量大、性能差）

更现实的选择是换技术栈：

用替代：矢量图形天然响应式， + 可绑定事件和 href
用绝对定位 + 热区：配合 pointer-events: auto 和 JS 计算相对坐标
纯 CSS 区域划分（如 grid + :has()）目前兼容性不足，不推荐生产环境


href 为空或指向 # 时会发生什么？
 表现和  一样：点击后页面滚回顶部，不跳转也不触发任何行为。
这不是“禁用链接”的正确方式。真正需要禁用时，应该：

去掉 href 属性（但部分浏览器会忽略该 ）
加 href="javascript:void(0)"（不推荐，影响可访问性）
加 aria-disabled="true" + CSS cursor: not-allowed + JS 阻止默认行为（适合动态控制）

如果区域本意是触发 JS 功能（比如弹窗、高亮），建议保留有效 href（如 href="/popup-data"），再用 event.preventDefault() 拦截，这样对 SEO 和键盘用户更友好。
图像映射看似简单，但 coords 与实际像素强耦合、无响应式支持、调试困难这三点，让它在现代项目中基本只适用于静态文档或遗留系统维护。真要交互丰富，SVG 或 CSS+JS 组合才是更可控的选择。