Click to See Complete Forum and Search --> : Jagged, sophisticated image map


Agent 007
05-18-2007, 10:48 AM
I have a map of the world in Photoshop and I want to make each country an image map. I have tried the polygon tool in Dreamweaver, but the points are larger than 1 pixel and I cannot make it exactly accurate to the map. How can I do this with raw code? Or, how can it be done in another HTML editor? Anyone ever tried this before?

Agent 007
05-18-2007, 10:50 AM
here's an example

WebJoel
05-18-2007, 10:59 AM
I have done this with html and using a high quality image (vector if possible, or high-quality raster), and it is pixel-perfect. Ergo, I assume that Dreamweaver is clumsy and assume a 'point' is 10-px square, more-or-less.

Have you tried doing this in a program other than DW? :)

Agent 007
05-18-2007, 11:03 AM
EXACTLY

"pixel-perfect" is the exact term in my mind

Dreamweaver is clumsy.

I have not tried this with anything other than dreamweaver and messing with coordinates in the dreamweaver code view.

Mind telling me exactly how you did it pixel-perfect? Keep in mind I have to do this for the entire world map, so if another HTML editor with some kind of magic wand tool will help, that'd be nice too

KDLA
05-18-2007, 11:14 AM
Hmmm... are you using the DW polygon tool correctly? I had to outline 120 counties with it, and didn't have much of a problem.
If you make clicks along the edge of the shape, tracing it, it is much easier than trying to replicate the shape using random points.

KDLA

WebJoel
05-18-2007, 11:20 AM
You have to have your world-map available for a graphics program like PaintPro or PhotoShop, and using the image as the point-of-referance for the co-ordinates, 'pick your dots' and record them per-country for entry into the html..

e.g., on a hypothetical world-map, whose four cardinal-corners might be 0,0, 900000,0, 900000,500000 0,50000 (left-top, top-right, right-bottom, left-bottom for a map that is 900000px wide and 50000px tall "rectangle") the outline for the polygon of the U.S. might be something like:

2003,2009, 3004,4009, 10019,10089, 102003,113032 (etc etc) and these are the 'polygon co-ordinates' that you would associate with anchor on the map...

A daunting undertaking, -polygon mapping. But the results can be quite rewarding. Basically, lot'sa coffee and pad&pen, and clear an evening of distractions... :rolleyes:

I haven't done MAP is quite some time...

Agent 007
05-18-2007, 11:21 AM
KDLA - the problem is that when I click on the edge of the image, it automatically puts down a huge point. I dont exactly know what you mean by tracing the image with the Polygon tool, but if you can explain thatd be great

carrotmuseum
05-20-2007, 05:13 AM
Paint Shop Pro does a perfect job, without the mess of Dreamweaver. Or try Cutemap which I hear is simple and effective.

WebJoel
05-20-2007, 11:12 AM
CUTEMAP! -Thank you! I was trying to recall what we were using in class for doing this (before I got PaintPro and just do it via HTML). Using DW to pick-points on an image-map is like painting the Mona Lisa with toilet scrubber-brush... :eek:

p.s., -ignore the number sizes of the hypothetical example I did above: "9000000px" is like what, 900X wider than my monitor screen?? I was thinking more along the lines of '< my screenwidth', -or approx. 900px wide... but was obessing over OP's "world map" task and was thinking "think LARGE"... :eek: