绘制图像映射点

Question

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

有没有快速的方法来创建不规则多边形的边界坐标,例如可以在区域地图上找到？

编辑
必须有一种方法来做到这一点.我的Windows PC上有Fireworks 8以及photoshop CS3,但我对Fireworks更熟悉.

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

我试过插入一个热点,一个多边形切片,然后导出到"html和图像".这两个都给我方形热点,而不是多边形.我也尝试右键单击路径和编辑>复制路径轮廓,以及编辑>复制Html代码.也不给我多边形坐标.

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

Answer 1

Gimp提供了一个名为Gimp图像映射的插件/过滤器,它有一个很好的界面来帮助创建一个图像映射.我认为它将提供您正在寻找的功能.选择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)使用魔棒和选框工具创建选框.

2)右键单击>修改选框>转换为路径

3)右键单击路径并选择"插入热点"(或按Ctrl + U)

4)选择"文件">"导出"

5)为"另存为类型"选择"HTML和图像"