You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

技术求助:为何我的Image Map无法正常工作?

嘿,我得先给你划个重点:原生Markdown本身并不支持图像映射(image map)这个功能——这是HTML独有的特性。不过咱们有两种办法来处理你的需求,既能贴合Markdown的用法,又能保留你想要的交互效果:

方案1:直接用内嵌HTML(最省心,兼容绝大多数平台)

很多主流Markdown编辑器(比如GitHub、Stack Overflow、Notion这些)都支持直接内嵌HTML代码,所以你原来的代码稍微调整下链接(避免外链)就能用,我给你整理成代码块方便复制:

<figure>
  <img src="https://via.placeholder.com/447" alt="Ferris Family" usemap="#portrait_map" />
  <figcaption>Kathleen Ferris and daughter Linda (1957)</figcaption>
</figure>
<map name="portrait_map">
  <area shape="rect" coords="10, 50, 192, 223" href="#tb_kathleen" alt="Kathleen Ferris" />
  <area shape="circle" coords="264, 108, 80" href="#tb_linda" alt="Linda Ferris-White">
</map>

方案2:纯Markdown实现(拆分图片)

如果必须用纯Markdown语法,那只能把原图里的两个人物区域拆成单独的小图,再分别加链接,效果也不差:

另外,要是你只是想展示图片和说明,不用交互的话,纯Markdown写法是这样的:

![Kathleen Ferris and daughter Linda (1957)](https://via.placeholder.com/447)
*Kathleen Ferris and daughter Linda (1957)*

内容的提问来源于stack exchange,提问作者Mitchell Richins

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.27 15:48:14