无需登录 数据私有 本地保存

热区图片地图生成 - Image Map可视化

12
0
0
0
选择形状后在图片上绘制
上传图片或拖放到此处

支持 JPG、PNG、GIF、WebP、SVG

生成的HTML代码
尚未生成代码，请先上传图片并绘制热区。
热区列表 0

暂无热区，请在图片上绘制

热区属性

请选择一个热区进行编辑

常见问题与知识点

HTML图片热区地图允许在一张图片上定义多个可点击区域（热区），每个热区可以链接到不同的URL。通过<map>和<area>标签实现，支持矩形(rect)、圆形(circle)和多边形(poly)三种形状。它广泛应用于产品展示、导航地图、信息图等场景。

本工具生成的热区坐标基于图片的原始像素尺寸（naturalWidth × naturalHeight）。这意味着无论图片在网页上如何缩放显示，生成的HTML代码都能精确对应图片的原始尺寸。建议在最终使用时，确保图片以原始尺寸或等比例显示，以保证热区位置准确。

选择"多边形"模式后，在图片上单击添加顶点，每次点击创建一个新顶点。要完成多边形绘制，可以双击最后一个顶点，或者点击第一个顶点（起始点）来闭合多边形。绘制过程中会在顶点之间显示连线预览。多边形热区非常适合不规则形状的区域标注。

将生成的<map>代码放置在HTML中任意位置（通常放在<body>末尾），然后在对应的<img>标签中添加usemap="#imagemap"属性即可关联。注意usemap的值需要与map标签的name属性一致（带#号）。

HTML的<area>坐标是固定像素值，不会随图片缩放自动调整。如果图片在响应式布局中被缩放（如max-width:100%），热区坐标会出现偏移。解决方案：1) 使用JavaScript库如image-map-resizer自动调整坐标；2) 确保图片以固定尺寸显示；3) 在服务器端使用响应式图片方案。

alt属性提供热区的替代文本描述，对SEO和无障碍访问非常重要。屏幕阅读器会读取alt文本，搜索引擎也将其作为理解图片内容的重要信号。建议为每个热区填写有意义且准确描述链接目标的alt文本。
🔧 相关工具