plot points for image map

javascript imagemap fireworks
Joshua picture Joshua · Dec 9, 2009 · Viewed 8.5k times · Source

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

Colin Harrington picture Colin Harrington · Dec 18, 2009

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>

Related questions

Using JQuery hover with HTML image map

I have a complicated background image with a lot of small regions that need rollover illustration highlights, along with additional text display and associated links for each one. The final illustration stacks several static images with transparency using z-index, and …

Read More
How do I highlight parts of an imagemap on mouseover?

I need to display an imagemap with about 70 areas in it. The area of the imagemap the mouse cursor is currently at is supposed to be highlighted in a certain color. Is this possible and if yes, how?

Read More
Can I have an onclick event on a imagemap area element?

I would like to put an onclick event on an area element. Here is my setup: <img id="image" src="wheel.png" width="2795" height="2795" usemap="#Map" > <map name="Map"> <area class="blue" onclick="myFunction()" shape="…

Read More