Complex shape image maps — OZONE Asylum, home of the Mad Scientists

Complex shape image maps

This page's ID: 30986

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	I ended up just using an old ImageReady copy I had at home. This simply isn't worth doing by hand (DavidJCobb), particularly when ImageReady can do it... it just bothers me this functionality appears to be completely gone in [i]newer[/i] versions of Adobe software. A demonstration: Get [url=http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/US_Secession_map_1865.svg/800px-US_Secession_map_1865.svg.png]a good image[/url]. Open in ImageReady (in this case version 3 which came with Photoshop 6). Using the right settings (tolerance, anti-aliasing, etc.), use the magic wand tool to select the precise area you want in often a single click: [url=http://reisio.com/temp/ir-im/ir-im01.png][img]http://reisio.com/temp/ir-im/ir-im01.t.png[/img][/url] Copy & paste (CTRL+C, CTRL+V) for a new layer with just this selection. Layer > New Layer Based Image Map Area: [url=http://reisio.com/temp/ir-im/ir-im02.png][img]http://reisio.com/temp/ir-im/ir-im02.t.png[/img][/url] Now you've got the sad rectangular area "modern" software tends to create. Hit the Image Map tab at bottom left: [url=http://reisio.com/temp/ir-im/ir-im03.png][img]http://reisio.com/temp/ir-im/ir-im03.t.png[/img][/url] Shape to Polygon: [url=http://reisio.com/temp/ir-im/ir-im04.png][img]http://reisio.com/temp/ir-im/ir-im04.t.png[/img][/url] Quality to 100: [url=http://reisio.com/temp/ir-im/ir-im05.png][img]http://reisio.com/temp/ir-im/ir-im05.t.png[/img][/url] See that outline tighten up ? yeah! File > Save Optimized As...: [url=http://reisio.com/temp/ir-im/ir-im06.png][img]http://reisio.com/temp/ir-im/ir-im06.t.png[/img][/url] Save as type: HTML Only (*.html) ? we only want the coordinates, everything else Adobe does for outputting HTML including image processing is terrible. [url=http://reisio.com/temp/ir-im/ir-im07.png][img]http://reisio.com/temp/ir-im/ir-im07.t.png[/img][/url] The terrible (yet easily cleaned) coordinates code we wanted: [url=http://reisio.com/temp/ir-im/ir-im08.png][img]http://reisio.com/temp/ir-im/ir-im08.t.png[/img][/url] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu