拖放绘制热区
使用鼠标拖动或双击，即可轻松定义可点击区域。
Core Features
直观而强大的图片热区功能
无需复杂设置，集中提供所需功能，快速准确地完成图片热区。
为每个区域设置链接
每个热区都能设置不同的目标地址，并可选择是否在新窗口中打开。
实时生成代码
每次添加或编辑区域时，HTML 图片热区代码都会自动更新。
一键复制代码
将生成的代码直接复制到剪贴板，并粘贴到网站中使用。
灵活加载图片
上传本地图片或粘贴图片地址，即可立即开始操作。
浏览器自动保存
操作过程会临时自动保存到浏览器本地存储中。
How It Works
三步完成图片热区
加载图片、绘制链接区域、复制代码，简单三步即可完成。
加载图片
上传本地文件或输入图片地址，将图片加载到工作区。支持常见图片格式。
绘制链接区域
选择拖动或双击模式，在图片上绘制可点击区域，并为每个区域设置地址和打开方式。
复制 HTML 代码
检查自动生成的 HTML 图片热区代码，复制到剪贴板后粘贴到需要的位置。
Use Cases
适用于多种场景
可用于电商、营销、教育等多个领域，通过图片热区改善交互体验。
在线商城
将产品目录图片中的单个商品直接链接到详情页，缩短购买路径。
- 让产品合集横幅支持互动
- 为造型手册和搭配指南添加链接
- 帮助用户快速浏览分类
营销活动
在活动图片或信息图中添加多个可点击区域，引导访客进入相应落地页或活动页面。
- 制作包含多个链接的活动横幅
- 制作交互式宣传册
- 设置用于 A/B 测试的点击区域
教育与培训
将图表或地图的不同部分链接到详细说明，让学习资料更清晰、更具互动性。
- 交互式解剖图和地图
- 分步骤教程导航
- 可点击的学习资料
Live Demo
立即体验
界面简单直观，任何人都能轻松使用。以下为工具的实际操作界面。
FAQ
常见问题
关于图片热区生成器使用方法的常见问题。
什么是图片热区？
图片热区是一种 HTML 技术，可以在一张图片中定义多个可点击区域，并将各区域连接到不同地址。用户点击图片的特定部分后，会打开该热区设置的链接。
支持哪些浏览器？
支持当前版本的 Chrome、Firefox、Edge 和 Safari。为获得更好的使用体验，建议保持浏览器为最新版本。
生成的代码如何使用？
将生成的 HTML 代码复制到网站 HTML 文件或 CMS 编辑器中即可。代码会同时提供图片元素和 map 元素，可直接使用。
操作内容会保存吗？
工具会将操作内容临时保存在浏览器本地存储中。清除浏览器数据后保存内容也会被删除，因此重要项目请另行保存代码。
可以在手机上使用吗？
当前工具针对桌面环境进行了优化。需要精确绘制热区时，建议使用带鼠标的台式机或笔记本电脑。
可以免费使用吗？
可以。工具完全免费，无需注册或登录，生成的代码也没有使用限制。
Program Feedback
쓰다가 불편한 점,
그대로 알려주세요
버그 신고, 개선 요청, 새 기능 제안 모두 환영합니다. 재현 방법과 사용 환경을 함께 남겨 주시면 훨씬 빨리 고칠 수 있습니다.
- 1접수 확인
- 2재현·원인 파악
- 3수정 반영 후 회신
급한 문의
답변이 급하시면 이메일 opci1004@gmail.com 또는 텔레그램 @bluecvs 로도 연락하실 수 있습니다.