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
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: