7

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

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

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

如果我创建一个选取框，我可以右键单击 > 修改选取框 > 转换为路径。这会创建一个包含多个点的路径，但我不知道如何进行下一步，即提取这些点的坐标。

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

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

4

6 回答 6

7

Gimp提供了一个名为 Gimp 图像映射的插件/过滤器，它有一个很好的界面来帮助创建图像映射。我认为它将提供您正在寻找的功能。选择Filters -> Web -> Image Map...以弹出对话框 Gimp 图像映射过滤器

打开 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>
于 2009-12-18T04:15:20.200 回答
7

对于烟花 8：

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

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

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

4) 选择文件 > 导出

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

于 2009-12-20T20:15:41.520 回答
3

这适用于希望从地图图像自动生成坐标的沮丧的人。

在 Photoshop 中打开您的地图。使用魔棒选择图像边缘 将选取框转换为路径 将此路径导出到 illustrator 在 illustrator 中打开文件 '另存为...' SVG 文件（注意：不是 svgcompressed） 在选项菜单中选择 'link' 点击保存

在文本编辑器中打开您的 .svg 文件，您将获得坐标。

于 2011-10-05T23:45:11.460 回答
2

这是一个用于创建图像地图的简单易用的 Web 应用程序。它将节省您处理其他程序（DreamWeaver、PhotoShop、Gimp 等）的麻烦。

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

于 2010-02-10T20:24:53.307 回答
2

似乎其他答案是关于如何手动完成（根本不回答问题）..因为这篇文章出现在这个主题的谷歌搜索结果中，我正在更新我发现的一些信息，这些信息至少给出了一个起点关于如何以自动方式执行此操作：

我正在研究的有前途的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

基本上，寻找诸如“图像边缘检测器”之类的关键字和这种性质的东西似乎会导致更相关的结果，我仍在寻找我可以使用的关键字，但我有点惊讶，这么多人似乎认为这一点是应该手动完成的事情，而以编程方式执行会更有效。

于 2010-07-25T05:24:03.067 回答
-1

如果您更喜欢呆在 Adob​​e 的阵营中，ImageReady可以像 Gimp 一样创建图像映射。他们有一个使用它在线创建图像地图的教程，但是页面上的 css 当前已损坏，除非您打印它，否则您将无法看到该页面。然后它看起来像这个 pdf。

于 2009-12-18T19:21:17.593 回答