Have you ever pulled a handful of hair from your head? If you’ve ever tried to create an HTML Image Map with the GIMP, then I’m sure your sitting in clumps of it. No More! With gen_imgmap.py, you can auto-generate your image maps from a simple PNG image file and a CSV 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:
Now, all you need is a CSV 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 CSV 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):
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
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 (-i tells gen_imgmap.py to use integer color codes):
./gen_imgmap.py -i alaska.png attributes.csv map.html
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:
You may also notice that a folder called “masks” is created, and that this folder contains a bunch of PNG image masks with column two of the CSV file as their image name. gen_imgmap.py 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 this page to see how I have applied this method to a production web page.
To use gen_imgmap.py you’ll need the following software:
- ImageMagick ≥ 6.3.0
- Python ≥ 2.4
- numpy ≥ 1.0
- PIL ≥ 1.1.6
You can get it here: gen_imgmap.py.
Update:
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.
