代码之家 › 专栏 › 技术社区 › Joshua

图像地图的绘图点

fireworks imagemap javascript

Joshua · 技术社区 · 16 年前

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

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

编辑
一定有办法做到这一点。我的Windows PC上有Fireworks 8和Photoshop CS3,但我对Fireworks更熟悉。

如果创建一个字幕,我可以右键单击“修改字幕”>“转换为路径”。它创建了一条带有多个点的路径,但我不知道如何进入下一步,即提取这些点的坐标。

我尝试插入一个热点,一个多边形切片,然后导出到“HTML和图像”。这两个都给了我正方形的热点,而不是多边形。我还尝试右键单击路径并编辑>复制路径大纲,以及编辑>复制HTML代码。也不要给我多边形坐标。

我只能得到切片的多边形坐标。有没有一种方法可以将路径转换为烟花8中的一片?

6 回复 | 直到 13 年前

StevenMcD 15 年前

烟花8:

1)使用魔术棒和选框工具创建选框。

2)右键单击>修改字幕>转换为路径

3)右键单击路径并选择“插入热点”(或按ctrl+u)

4)选择“文件”>导出

5)选择“HTML和图像”作为“另存为类型”

Community Mohan Dere 8 年前

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

一旦打开“图像映射”对话框,您就可以随心所欲地创建多边形区域: Polygon area creator

您可以创建和自定义您喜欢修改链接、alt文本、框架、多边形本身,甚至设置javascript事件的区域。

alt text

完成后,保存它,您就可以使用刚才保存在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>

Alistair 14 年前

这是为了让沮丧的人从地图图像中自动生成坐标。

在Photoshop中打开地图。使用魔杖选择图像边缘将字幕转换为路径将此路径导出到Illustrator 在Illustrator中打开文件 “另存为…”svg文件(注意:不是svgcompressed) 在“选项”菜单中选择“链接” 点击保存

在文本编辑器中打开.svg文件,您将拥有坐标。

Cory Schires 15 年前

这是一个简单易用的网络应用程序,用于创建图像地图。这将节省您处理其他程序(Dreamweaver、Photoshop、Gimp等)的费用。

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

Rick 15 年前

其他的答案似乎是关于如何手动操作(根本不回答问题)。由于这篇文章出现在谷歌搜索结果中,我更新了一些信息,我发现至少给出了一个如何以自动化方式完成这项工作的起点:

我正在调查的一个有希望的PHP: http://www.imagemagick.org/discourse-server/viewtopic.php?f=1&t=14646

我发现的其他资源:

http://marakana.com/blog/examples/php-image-filters.html

http://vis.lbl.gov/NERSC/Software/gsharp/help/GsharpWE/userguide/imagemaps.html

http://en.wikipedia.org/wiki/Canny_edge_detector

基本上,寻找像“图像边缘检测器”这样的关键字,这种性质的东西似乎会导致更相关的结果,我仍然在寻找一个我可以使用的,但我只是有点惊讶,这么多人似乎认为这是应该手动做的事情,当它将更有效地进行编程时。

-1

Colin Harrington 16 年前

如果你想留在Adobe的营地, ImageReady 能够像gimp一样创建图像映射。他们有 a tutorial on using it to create image maps online ,但该页上的CSS当前已损坏,如果不打印,您将无法看到该页。那么它看起来像 this pdf .