plot points for image map

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?

Gombosi

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"

Sruti

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

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

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.

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>

Complicity

"you can create polygon areas to your heart's delight". Do you mean manually? The point of the post is I'm looking for something more automated than zooming in to click three or four hundred times to create a particular polygon area. Both Fireworks and Photoshop have the ability to manually plot a slice (or polygon area). – Gombosi

Based on your question the level of automation that you were looking for wasn't clear to me. The GUI is much easier than editing HTML x/y points :-) I didn't realize until after the fact that Fireworks and Photoshop both had the ability to create image maps much like Gimp. It sounds like what you really want is to be able to use the magic wand tool to create Paths and then export the corresponding image map's HTML? Is this correct? – Complicity

this is garbage, every search on this topic returns results like this on how to create image maps manually which is complete and utter nonsense to waste time doing something like that when it should be very simple to generate it based on simply using an image mask (where the area you want is black or white and other area is opposite) as these masks can easily be created in any graphics program and then overlaid over an image to use as the map (where you set opacity to 0 so it doesn't appear to the user) – Kymberlykymograph

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.

Ardin

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/

Refulgent

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.

Kymberlykymograph

Nice resources. I'm don't visit the php camp too often, but hopefully the additional links will help someone out. – Gombosi

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.

Complicity