图片热区生成器(可点击区域)
选择图片和形状,然后绘制:矩形和圆形用拖动,多边形用点击各个角点(点击第一个点或双击即可闭合)。
使用方法图片上的可点击区域
广告
图片热区生成器(可点击区域): 用途
图片热区能把图片的一部分变成链接:户型图中的各个地块、商场里的店铺、产品的各个部件或菜单上的菜品。选择图片,通过拖动(矩形和圆形)或点击角点(多边形)绘制区域。
为每个区域填写链接和替代文字。代码可输出为带 map 和 area 的经典格式,或用百分比定位链接(多边形用 clip-path)的响应式版本,能在任何屏幕尺寸下跟随图片。
使用方法
- 选择图片。
- 绘制区域并填写链接和文字。
- 选择格式并复制代码。
使用场景
- 地块或户型图。
- 门店或活动地图。
- 带可点击部件的产品图。
常见问题
图片热区在手机上能用吗?
经典的 map 加 area 使用原图的像素坐标,所以图片在手机屏幕上缩小后,区域位置会错位。因此生成器还提供响应式版本,用百分比定位的链接叠加在图片上,适应任何尺寸。
这些区域无障碍吗?
每个区域都有替代文字(alt 或 aria-label),说明它指向哪里。请填写这段文字:屏幕阅读器会朗读它,图片加载失败时也会显示它。
真的免费吗?
是的,100%免费。无需注册,无需订阅,不限使用次数。所有工具:Tools123是免费的。