Plot Points For Image Map

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

Solution 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"

Solution 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

<imgsrc="us_map.gif"width="771"height="448"border="0"usemap="#map" /><mapname="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 --><areashape="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" /><areashape="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" /><areashape="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" /><areashape="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>

Solution 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.

Solution 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/

Solution 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.