Story points for image card

Question

I want to add auto-selection to image maps on my web page. I found that the mapper.js library is very useful for achieving this goal, however, creating x, y graphs around a regional map takes a lot of time.

Is there a quick way to create bounding coordinates for an irregular polygon, for example, on regional maps?

EDIT
There must 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 selection, I can right-click> Change Markers> Convert To Path. This creates a Path with several points, but I don’t know how to proceed to the next step, which extracts the coordinates of these points.

I tried to insert an access point, a polygon, then export to "html and images". Both of them give me square hot spots, not a polygon. I also tried right-clicking on the path and Edit> Copy Path Outlines, as well as Edit> Copy Html Code. Do not give me polygonal coords.

I can only get polygonal coordinates for a fragment. Is there a way to convert a slice path in Fireworks 8?

Answer 1

For Fireworks 8:

1) Create your area using the magic wand tool and tent.

2) Right click> Change Selection> Convert To Path

3) Right-click on the path and select "Insert Hot Spot" (or press Ctrl + U)

4) Choose File> Export

5) Select "HTML & Images" for "Save As Type"

Answer 2

Gimp offers a plugin / filter called Gimp image map , which has a nice interface to help create an image map. I think this will provide the functionality you are looking for. Choose Filters -> Web -> Image Map... to open a dialog

Once the Image Map dialog box opens, you can create polygonal areas for your heart:

You can create and customize areas as you like to change the link, text, frames, the polygon itself, or even customize javascript events.

Once you are done save it and you can use the snippet you just saved in 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 a frustrated person who wants to automatically generate coordinates from a map image.

Open your card in Photoshop. Use the magic wand to select the edge of the image Convert the frame 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' Save hit

Open the .svg file in a text editor and your coordinates will appear.

Answer 4

Here's a simple, easy-to-use web application for creating image maps. This saves you from having to deal with additional programs (DreamWeaver, PhotoShop, Gimp, etc.).

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

Answer 5

It seems that the other answers concerned how to do it manually (without answering the question at all). Since this message appears in the Google results for this topic, I am updating some information that I found, which at least gives a starting point on how to do this automatically:

promising PHP I'm looking at: 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, searching for keywords such as “image edge detector” and similar things seem to produce more meaningful results, I'm still looking for one that I can use, but I'm just a little surprised that so many people think. that it is something that must be done manually when it would be much more efficient to do it programmatically.

Answer 6

If you prefer to stay at Adobe Camp, ImageReady has the ability to create image maps much more like Gimp. They have a tutorial on using it to create image maps on the Internet , but the css on the page is currently broken, and you cannot see the page if you do not print it. Then it will look like this pdf .