ZH
PortuguêsEnglishEspañolDeutschFrançaisItaliano日本語Русский中文
首页 收藏
Voltar

图片热区生成器(可点击区域)

选择图片和形状,然后绘制:矩形和圆形用拖动,多边形用点击各个角点(点击第一个点或双击即可闭合)。

使用方法

图片上的可点击区域


可用语言: PortuguêsEspañolEnglishDeutschFrançaisItaliano日本語Русский中文

下一个工具CSS 媒体查询生成器(断点)→
广告

图片热区生成器(可点击区域): 用途

图片热区能把图片的一部分变成链接:户型图中的各个地块、商场里的店铺、产品的各个部件或菜单上的菜品。选择图片,通过拖动(矩形和圆形)或点击角点(多边形)绘制区域。

为每个区域填写链接和替代文字。代码可输出为带 map 和 area 的经典格式,或用百分比定位链接(多边形用 clip-path)的响应式版本,能在任何屏幕尺寸下跟随图片。

使用方法

  1. 选择图片。
  2. 绘制区域并填写链接和文字。
  3. 选择格式并复制代码。

使用场景

  • 地块或户型图。
  • 门店或活动地图。
  • 带可点击部件的产品图。

常见问题

图片热区在手机上能用吗?

经典的 map 加 area 使用原图的像素坐标,所以图片在手机屏幕上缩小后,区域位置会错位。因此生成器还提供响应式版本,用百分比定位的链接叠加在图片上,适应任何尺寸。

这些区域无障碍吗?

每个区域都有替代文字(alt 或 aria-label),说明它指向哪里。请填写这段文字:屏幕阅读器会朗读它,图片加载失败时也会显示它。

真的免费吗?

是的,100%免费。无需注册,无需订阅,不限使用次数。所有工具:Tools123是免费的。

相似工具

非常感谢您的支持!

每一笔捐赠都有助于维持网站运行。这些工具旨在帮助您,但我们有服务器开销。如果您愿意支持,将不胜感激!请选择或输入金额:

通过Stripe安全支付。将在新标签页打开。

工具按现状提供,不作任何保证。我们不对结果及其使用承担责任。