Image Map Generator-免费在线影像地图生成器，快速生成HTML图像地图源代码

Toy-编辑部 • 2023年9月26日 09:53 • 投稿

最近有朋友问到要怎么制作影像地图，说真的已经好久没有听到这个名词了，早期这个还流行的，或许有些朋友不知什么是影像地图，其实简单的来说，影像地图就是在一张图片中，透过节点方式把链接的区块一一的绘制出来，用户就可透过框取好的区块连到不同的页面中。

更重要的是这一张图完全不用切割，但早期梅干都是透过Dreamweaver所制作，现在都使用VS Code或是Sublime居多，而梅干上网搜寻了一下，找到了一个还不错用的线上影像地图产生器，不但可框取圆形、矩形外，甚至还有不规则形，因此想要制作影像地图的朋友，不妨也一块来看看啰！

Image Map Generator链接网址：https://www.image-map.net/

Step1
首先在进入这个影像图地产生器的平台中，可将要制作的影像画面给加载，左边是从本地电脑，右边是网络。
梅问题-Image Map Generator-免费在线影像地图生成器，快速生成HTML影像地图源代码

Step2
当把图片加载后，分别可从下方的下拉菜单中，选择所需的框选方式，分别有Rect矩形、Poly不规则形、Circle圆形。
梅问题-Image Map Generator-免费在线影像地图生成器，快速生成HTML影像地图源代码

Step3
当选择不规形时，就以单点的方式，一一的点选构成一个面。
梅问题-Image Map Generator-免费在线影像地图生成器，快速生成HTML影像地图源代码

Step4
当把所需的区块建立好后，就可针对这些区块设定连结与开启方式。
梅问题-Image Map Generator-免费在线影像地图生成器，快速生成HTML影像地图源代码

Step5
再点下方的产生钮后，就会跳出一个源代码的对话框，再把源代码全部复制起来。
梅问题-Image Map Generator-免费在线影像地图生成器，快速生成HTML影像地图源代码

Step6
哈~这样就可在一张图片，同时有多个链接啦！是不是超有趣的呀！
梅问题-Image Map Generator-免费在线影像地图生成器，快速生成HTML影像地图源代码

#範例預覽：
https://codepen.io/minwt/embed/rNqzbXp?default-tab=html%2Cresult