Question

I want to add automatic area highlighting to image maps on my webpage. I ve found the mapper.js library to be very useful in achieving this, however creating the x,y plots around a regional map is very time consuming.

Is there a quick way to create bounding co-ordinates of a irregular polygon such as can be found on regional maps?

EDIT
There has got to be a way to do this. I have Fireworks 8 as well as photoshop CS3 on my windows PC, but I m more familiar with Fireworks.

If I create a marquee, I can right click > Modify Marquee > Convert to Path. That creates a Path with several points, but I don t know how to get to the next step which is extracting the coords of those points.

I ve tried inserting a hotspot, a polygon slice, then exporting to "html and images". Both of these give me square hotspots, not a polygon. I ve also tried right click on the path and Edit > Copy Path Outlines, as well as Edit > Copy Html Code. Neither give me the polygon coords.

I can only get polygon coords for a slice. Is there perhaps a way to convert the path to a slice in Fireworks 8?

Answer 1

For Fireworks 8 :

1) Create your marquee using the magic wand & marquee tool.

2) Right click > Modify Marquee > Convert to Path

3) Right Click on the path and select "Insert Hotspot" (or press Ctrl + U)

4) Select File > Export

5) Select "HTML and Images" for "Save as Type"

Answer 2

Gimp offers a plugin/filter called Gimp image map that has a nice interface to help create an image map. I think it will provide the functionality that you are looking for. Select Filters -> Web -> Image Map... to bring up the dialog Gimp Image Map filter

Once you have the Image Map dialog open you can create polygon areas to your heart s delight: Polygon area creator

You are able to create and customize areas as you like modifying the link, alt text, frames, the polygon itself or even setup javascript events.

alt text

After you are done, save it and you ll be able to use the fragment that you just saved in your 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 3

This is for the frustrated person looking to auto generate coords from an image of a map.

Open your map in photoshop. Use the magic wand to select the image edge Convert the marquee to a path Export this path to illustrator Open the file in illustrator save as... SVG file (note: NOT svgcompressed) In the options menu select link Hit save

Open your .svg file in a text editor and you will have your coords.

Answer 4

Here s a simple, easy-to-use web app for creating image maps. It ll save your having to deal with additional programs (DreamWeaver, PhotoShop, Gimp, etc.).

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

Answer 5

It seems the other answers were for how to do it manually (not answering the question at all).. since this post shows up in Google results for this topic, I am updating with some info I have found that at least gives a starting point on how to do this in an automated manner:

promising PHP one that I m looking into: http://www.imagemagick.org/discourse-server/viewtopic.php?f=1&t=14646

Other resources I found:

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

Basically, looking for keywords like "image edge detector" and things of this nature seem to lead to more relevant results, I am still searching for one that I can use but I m just a bit surprised that so many people seem to think this is something that should be done manually when it would be much more effective to do programatically.

Answer 6

If you prefer to stay in Adobe s camp, ImageReady has the ability to create image maps much Like Gimp. They have a tutorial on using it to create image maps online, but the css on the page is currently broken and you won t be able to see the page unless you print it. Then it will look like this pdf.

友情链接