Generating HTML Image Maps

tag:blogger.com,1999:blog-4136549864035170205.post-28209923627268349892007-01-22T20:08:00.000-08:002007-10-16T18:38:00.296-07:002007-10-16T18:38:00.296-07:00Generating HTML Image MapsHave you ever pulled a handful of hair from your head? If you’ve ever tried to create an <abbr title="HyperText Markup Language">HTML</abbr> Image Map with the <acronym>GIMP</acronym>, then I’m sure your sitting in clumps of it. No More! With <code>gen_imgmap.py</code>, you can auto-generate your image maps from a simple <abbr>PNG</abbr> image file and a <abbr>CSV</abbr> text file! Here’s how it works: Create an image that has a unique color for each area you would like to make clickable. Like this: <a href="http://bp1.blogger.com/_peI11ttMpaw/RbWvyTk1GzI/AAAAAAAAAAc/QO9r4mWdmLY/s1600-h/alaska.png"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://bp1.blogger.com/_peI11ttMpaw/RbWvyTk1GzI/AAAAAAAAAAc/QO9r4mWdmLY/s400/alaska.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5023114238184725298" /></a> Now, all you need is a <abbr>CSV</abbr> file that maps the color values in your image to the href, name, title, and any other attributes that you would like on your area tags. The first line of the <abbr>CSV</abbr> contains labels for the following rows. The first label has to be “color”, it can be either a hexadecimal color code or an integer color code. The remaining columns can be whichever attributes you would like to give to your area tags. Like This (I’m using integer color codes here): <pre><code>color, id, title, href 46621634, AKZ208, Lower Kobuk and Noatak Valleys, http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ208 47610067, AKZ217, Upper Kobuk and Noatak Valleys, http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ217 47549398, AKZ205, Northwestern Brooks Range, http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ205 49656045, AKZ206, Northeastern Brooks Range, http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ206 49847290, AKZ218, Southeastern Brooks Range, http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ218 45763761, AKZ210, Northern and Interior Seward Peninsula, http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ210 46099384, AKZ216, Lower Koyukuk and Middle Yukon Valleys, http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ216 46608056, AKZ219, Upper Koyukuk Valley, http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ219 45777072, AKZ220, Yukon Flats and Surrounding Uplands, http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ220 45322154, AKZ221, Central Interior, http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ221 47940043, AKZ222, Middle Tanana Valley, http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ222 47594677, AKZ224, Upper Tanana Valley and the Fortymile Country, http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ224 49981415, AKZ215, Lower Yukon Valley, http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ215 45428630, AKZ151, Kuskokwim Valley, http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ151 48126408, AKZ225, Denali, http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ225 49956578, AKZ223, Deltana and Tanana Flats, http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ223 47673817, AKZ226, Eastern Alaska Range, http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ226 </code></pre> If for some reason you need to use comma’s inside one of your attribute strings, you’ll have to double quote all of them. Now, all that must be done is the running of the program (<code>-i</code> tells <code>gen_imgmap.py</code> to use integer color codes): <pre><code>./gen_imgmap.py -i alaska.png attributes.csv map.html </code></pre> This will take a couple of minutes. For simpler color maps, obviously the program will run far more quickly. When it’s finished, you’ll be left with something like this: <map name='genmap'> <area shape='poly' title='Lower Koyukuk and Middle Yukon Valleys' href='http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ216' name='AKZ216' coords='65,131, 62,124, 60,122, 57,117, 57,115, 62,108, 63,105, 65,103, 70,94, 70,91, 68,89, 64,82, 58,76, 53,72, 51,71, 48,64, 35,61, 28,58, 25,58, 11,57, 11,60, 10,67, 6,80, 1,86, 1,131, 10,133, 12,135, 16,144, 16,150, 14,159, 31,159, 38,156, 40,156, 56,151, 66,144, 68,143, 68,140, 65,133'></area> <area shape='poly' title='Denali' href='http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ225' name='AKZ225' coords='85,155, 85,158, 134,159, 139,157, 142,157, 146,158, 146,137, 124,137, 117,141, 115,141, 113,143, 106,147, 104,149, 95,154, 91,154'></area> <area shape='poly' title='Southeastern Brooks Range' href='http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ218' name='AKZ218' coords='111,41, 138,42, 143,44, 163,44, 176,37, 178,35, 183,33, 185,31, 188,31, 192,30, 194,29, 194,2, 148,2, 142,8, 129,12, 126,12, 113,14, 110,14, 77,16, 76,35, 72,39, 68,44, 70,45, 91,41'></area> <area shape='poly' title='Northwestern Brooks Range' href='http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ205' name='AKZ205' coords='74,16, 76,13, 76,11, 77,4, 78,2, 53,2, 56,5, 60,8, 60,13, 62,13, 67,16'></area> <area shape='poly' title='Lower Kobuk and Noatak Valleys' href='http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ208' name='AKZ208' coords='1,37, 2,34, 1,34'></area> <area shape='poly' title='Lower Kobuk and Noatak Valleys' href='http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ208' name='AKZ208' coords='3,15, 6,2, 1,2, 1,27, 3,25'></area> <area shape='poly' title='Upper Koyukuk Valley' href='http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ219' name='AKZ219' coords='102,86, 107,79, 108,76, 112,72, 119,68, 121,66, 126,63, 128,61, 129,57, 131,54, 131,52, 133,49, 133,47, 135,44, 90,42, 88,42, 67,46, 63,50, 54,57, 49,62, 49,65, 52,70, 57,75, 65,82, 69,89, 71,91, 72,93, 76,93, 84,94, 95,89, 97,89'></area> <area shape='poly' title='Upper Kobuk and Noatak Valleys' href='http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ217' name='AKZ217' coords='50,59, 57,53, 62,49, 65,47, 71,40, 75,35, 75,17, 67,17, 62,14, 60,14, 59,8, 57,6, 50,2, 7,2, 7,4, 4,17, 4,25, 2,28, 2,33, 5,40, 5,42, 6,46, 11,55, 24,56, 40,61, 42,61, 48,62'></area> <area shape='poly' title='Deltana and Tanana Flats' href='http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ223' name='AKZ223' coords='191,152, 194,152, 194,143, 192,141, 185,137, 182,134, 175,130, 173,128, 171,128, 164,125, 154,125, 144,124, 139,126, 134,126, 134,130, 132,135, 152,136, 160,137, 163,139, 165,139, 178,146, 182,146, 189,150'></area> <area shape='poly' title='Upper Tanana Valley and the Fortymile Country' href='http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ224' name='AKZ224' coords='193,141, 194,100, 174,100, 174,128'></area> <area shape='poly' title='Baldwin Peninsula and Selawik Valley' href='http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ209' name='AKZ209' coords='9,53, 5,46, 5,43, 4,40, 2,38, 1,38, 1,54, 4,54, 9,55'></area> <area shape='poly' title='Lower Yukon Valley' href='http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ215' name='AKZ215' coords='15,147, 15,143, 10,134, 7,134, 1,133, 1,159, 13,159, 13,156'></area> <area shape='poly' title='Middle Tanana Valley' href='http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ222' name='AKZ222' coords='153,123, 164,124, 171,127, 173,127, 173,100, 170,100, 163,97, 161,97, 139,96, 139,99, 140,110, 137,117, 137,119, 135,122, 135,125, 140,125, 145,123'></area> <area shape='poly' title='Northern and Interior Seward Peninsula' href='http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ210' name='AKZ210' coords='9,66, 9,61, 10,56, 5,56, 1,55, 1,84, 5,81, 5,79'></area> <area shape='poly' title='Yukon Flats and Surrounding Uplands' href='http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ220' name='AKZ220' coords='111,74, 109,76, 108,79, 106,81, 103,86, 105,88, 107,88, 116,92, 118,92, 121,94, 137,94, 160,95, 167,98, 169,98, 194,99, 194,30, 193,30, 186,32, 171,40, 169,42, 162,45, 142,45, 137,43, 135,45, 134,49, 132,52, 132,54, 130,57, 130,59, 125,65, 118,69, 116,71'></area> <area shape='poly' title='Susitna Valley' href='http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ145' name='AKZ145' coords='139,158, 138,158'></area> <area shape='poly' title='Northeastern Brooks Range' href='http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ206' name='AKZ206' coords='118,13, 131,11, 138,8, 140,8, 146,3, 79,2, 78,10, 76,15, 92,15, 109,14'></area> <area shape='poly' title='Central Interior' href='http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ221' name='AKZ221' coords='85,154, 90,154, 96,153, 98,151, 101,150, 103,148, 110,144, 112,142, 115,140, 117,140, 124,136, 130,136, 132,133, 132,131, 134,122, 136,119, 136,117, 139,110, 139,100, 138,96, 121,95, 118,93, 116,93, 107,89, 105,89, 100,88, 97,90, 95,90, 92,92, 90,92, 87,94, 85,94, 77,95, 71,94, 70,97, 68,99, 63,108, 61,110, 58,115, 58,117, 63,124, 66,131, 66,133, 69,140, 69,142, 84,135, 86,136, 83,143, 81,145, 82,150'></area> <area shape='poly' title='Kuskokwim Valley' href='http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ151' name='AKZ151' coords='84,159, 84,156, 81,149, 81,147, 80,145, 82,143, 85,136, 83,136, 66,145, 64,147, 53,153, 51,153, 44,156, 41,156, 36,158'></area> <area shape='poly' title='Eastern Alaska Range' href='http://pafg.arh.noaa.gov/zonefcst.php?zone=AKZ226' name='AKZ226' coords='182,147, 178,147, 165,140, 163,140, 160,138, 153,138, 147,137, 147,159, 194,159, 194,153, 191,153, 189,151'></area> </map><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://bp1.blogger.com/_peI11ttMpaw/RbWvyTk1GzI/AAAAAAAAAAc/QO9r4mWdmLY/s400/alaska.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5023114238184725298" usemap="#genmap"/> You may also notice that a folder called “masks” is created, and that this folder contains a bunch of <abbr>PNG</abbr> image masks with column two of the <abbr>CSV</abbr> file as their image name. <code>gen_imgmap.py</code> uses these files to figure out where to place the bounding polygons for your area tags. You may also use them to create overlays for each region of your image. Check out <a href="http://pafg.arh.noaa.gov">this page</a> to see how I have applied this method to a production web page. To use <code>gen_imgmap.py</code> you’ll need the following software: <ul> <li>ImageMagick ≥ 6.3.0</li> <li>Python ≥ 2.4</li> <li>numpy ≥ 1.0</li> <li>PIL ≥ 1.1.6</li> </ul> You can get it here: <a href="http://pastie.textmate.org/107941"><code>gen_imgmap.py</code></a>. <h5> Update: </h5> micheal fixed a couple of problems with the script with a patch below in the comments. I have updated the link to reflect his patch. Alexhttp://www.blogger.com/profile/08423296523921081149noreply@blogger.com13