免费在线HTML图片热区地图生成器，上传图片并拖拽创建可点击热区。支持矩形/圆形/多边形三种热区形状，自定义链接和提示文本，一键生成完整的HTML图片地图代码。纯前端本地运行。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用
Updated: 2026-07-11
生成的 HTML
请先上传图片并添加热区...
💡 使用说明
1. 上传图片作为热区地图底图
2. 选择形状（矩形/圆形/多边形），点击并拖拽图片创建热区
3. 设置每个热区的链接 URL 和提示文字
4. 可删除或修改已有热区
5. 一键复制完整 HTML 代码
❓ 常见问题
什么是 HTML Image Map？
HTML Image Map（图片热区地图）允许在一张图片上定义多个可点击区域，每个区域可以链接到不同的 URL。常用于地图导航、产品展示、交互式信息图等场景。通过 <map> 和 <area> 标签实现。
三种形状分别适合什么场景？
矩形(rect)适合按钮、卡片等规则区域。圆形(circle)适合头像、图标、坐标点等。多边形(poly)适合不规则形状，如地图上的国家、产品图中的特定零件。可根据实际需求灵活选择。
热区坐标在不同屏幕下会失效吗？
热区坐标是基于原始图片尺寸的像素值。如果图片缩放显示，坐标仍然正确（因为坐标相对于图片本身）。建议在使用时不要使用 srcset 等方式改变图片的实际渲染尺寸。