绘制图像映射点

Question

我想在我的网页上为图像地图添加自动区域突出显示。我发现mapper.js库对于实现这一点非常有用，但是在区域地图周围创建x，y图非常耗时。

是否可以快速创建不规则多边形的边界坐标，例如可以在区域地图上找到？

修改
必须要有办法做到这一点。我的Windows PC上有Fireworks 8和photoshop CS3，但我对Fireworks更熟悉。

如果我创建了一个选框，我可以右键单击＆gt;修改选框＆gt;转换为路径。这创造了一个带有几个点的路径，但我不知道如何进入下一步，即提取这些点的坐标。

我尝试插入热点，多边形切片，然后导出为“html和图像”。这两个都给我方形热点，而不是多边形。我也尝试右键单击路径并编辑＆gt;复制路径大纲，以及编辑＆gt;复制Html代码。也没有给我多边形坐标。

我只能为切片获得多边形坐标。有没有办法将路径转换为Fireworks 8中的切片？

Answer 1

Gimp提供a plugin/filter called Gimp image map，它有一个很好的界面来帮助创建图像映射。我认为它将提供您正在寻找的功能。选择Filters -> Web -> Image Map...以显示对话框

打开“图像映射”对话框后，您可以创建多边形区域，让您高兴：

您可以根据需要修改链接，替换文字，框架，多边形本身甚至设置javascript事件来创建和自定义区域。

完成后，将其保存，然后您就可以使用刚刚保存在html中的片段

<img src="us_map.gif" width="771" height="448" border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Colin Harrington -->
<area shape="poly" coords="149,292,254,332,308,41,262,33,232,27,169,14,120,9,102,52,92,190" alt="West Coast" href="wc.html" />
<area shape="poly" coords="474,267,522,368,574,62,465,17,422,19,326,51,284,161,293,224,322,250,363,219,419,222" alt="Midwest" href="mw.html" />
<area shape="poly" coords="634,58,583,74,527,360,670,419,757,180,770,65,770,24,705,10,735,29" alt="East Coast" href="ec.html" />
<area shape="poly" coords="380,251,379,285,458,300,464,363,413,426,330,373,287,317,335,323,340,250" alt="Texas" href="tx.html" />
</map>

Answer 2

对于Fireworks 8：

1）使用魔杖＆amp;创建你的选框。选框工具。

2）右键单击＆gt;修改选框＆gt;转换为路径

3）右键单击路径并选择“插入热点”（或按Ctrl + U）

4）选择文件＆gt;出口

5）选择“另存为类型”的“HTML和图像”

Answer 3

这适用于想要从地图图像自动生成坐标的受挫的人。

在photoshop中打开你的地图。 使用魔棒选择图像边缘 将选取框转换为路径 将此路径导出到插图画家 在Illustrator中打开文件 '另存为...'SVG文件（注意：NOT svgcompressed） 在选项菜单中选择“链接” 点击保存

在文本编辑器中打开你的.svg文件，你就会有你的坐标。

Answer 4

这是一个简单易用的网络应用程序，用于创建图像映射。这将节省你不得不处理其他程序（DreamWeaver，PhotoShop，Gimp等）。

http://www.image-mapper.com/

Answer 5

Answer 6

如果您希望留在Adobe的阵营，ImageReady能够像Gimp一样创建图像映射。他们有a tutorial on using it to create image maps online，但页面上的css目前已损坏，除非您打印，否则您将无法看到该页面。然后它看起来像this pdf。