响应式图片地图生成器

在图片上绘制可点击区域,并生成响应式 HTML/CSS。

  • 不上传
  • 百分比坐标
  • HTML + CSS

图片

22%

加载图片后在上方拖动即可创建可点击区域。选中区域后拖动边角可调整大小。文件只在浏览器中处理。

加载图片后即可在此绘制区域。

链接区域

#链接 URL替代文本标题W %H %目标删除

代码

选择 HTML / CSS 分开会输出 link 标签和独立 CSS 文件。还原会读取 data-rh-wrap / data-rh-link 与内联链接。

使用方法

加载图片后拖动创建链接区域。位置以百分比保存,图片缩放时区域仍保持对齐。选中区域后可拖动控制点调整大小,填写 URL、alt、title,然后复制 HTML/CSS 或把 CSS 保存为单独文件。

提示

  • 使用点击区域清晰的图片;区域为矩形。
  • alt 供屏幕阅读器使用,title 为鼠标悬停提示。
  • 发布前在 PC 和手机宽度下检查效果。
  • 快速粘贴用内联样式;若网站 CSS 可能覆盖,则用类模式。

常见问题

图片会上传吗?

不会。图片和编辑内容只在浏览器中处理,不会发送给 beancuit 或其他人。

适合什么图片?

横幅、商品图、说明图等点击区域清晰的图片。位置以百分比保存,所以调整图片大小时区域会跟随。

生成的代码怎么用?

把 HTML 和 CSS 复制到网站,或选择 HTML / CSS 分开并把 CSS 保存为单独文件。

内联和类模式有什么区别?

内联方式可直接粘贴,无需额外 CSS。类模式使用随机父类,减少与网站 CSS 的冲突。

相关标签

其他工具

结果仅供参考。计算可能有误,不构成法律、医疗或财务建议。重要决定请务必先咨询相关机构或专业人士。

搜索