views:

1056

answers:

5
+4  A: 

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>
Colin Harrington
"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).
Joshua
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?
Colin Harrington
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)
Rick
A: 

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.

Colin Harrington
+3  A: 

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"

FailBoy
Thanks. That works perfectly.
Joshua
A: 

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/

Cory Schires
+1  A: 

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&amp;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.

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