html-img-map allows you to create clickable HTML image maps in your favourite graphics editor. You define the areas as channels in the image and the html-img-map plug-in creates the corresponding HTML MAP tag.

Features

You don't need a special tool for creating image maps. Even ImageMap plug-in distributed with Gimp seemed something fuzzy for me. I have a similar opinion of the other tools...

No special file with description of areas needed. The areas are saved as channels in the image. It's easy to change the areas in future.

Automaticaly generates area parameters. The parameters are saved in channel name in a special format.

Creates more maps from one file.

Creating areas is as easy as creating selections is.

Exports maps to a file. Your scripts may include this file.

Shows all areas in a map in new image layer. This is good for a fast overview.

Little drawback: The areas are considered to be solid, eg. there may be no holes in them. If there are some holes, the plug-in never get know of them. It just goes along the channel border.

Look at the introduction tutorial page.

Any comments? Share them with the author: Jaromír Malenko [homepage]. I appreciate your response..

Screenshots

This example shows a map of the Czech Republic on left and the same map with highlighted areas.

To read more about using html-img-map see tutorial.

Download and instalation

Download html-img-map.py plug-in. Changelog is in the source.

Save this file to $PREFIX/lib/gimp/2.0/plug-ins/ (where $PREFIX is usually /usr) or to your ~/.gimp-2.0/plug-ins. This applies to Unix system. Under Windows there should be a similar place for plugins.

The file must have exucutble permission set. Run chmod a+x html-img-map.py.

This plug-in is released under the terms of GNU General Public Licence version 2.

Documentation

Plugin parameters

Create layer showing Map areas – Creates new layer for each MAP name showing generated areas.
Treshold for smoothing – Bigger value results in less points..
Minimal number of points in an area – Behaves intelligently, eg. when a channel with less points is found (for example a rectangle) use only those points.
Save Map to file – Saves relevant part of html code to file. If unselected, print the code to standard output.
Map file name – The code is saved to this file. If file name is empty, the code is saved to file filename.map, where filename is name of image file without extension.

Channel name

The channel name must have the following format:

MAP name="mapname"|AREA alt="description" href="url"

Only the channel which names start with MAP or AREA are be considered as defining map areas.
The "tags" are separated by a pipe (|).
The "tag" names are in uppercase.
There may be no aditional parameters to "tags". The simplest channel name is simply AREA (the word AREA is followed by a space) - the required parameters will be generated with empty values.
If the MAP tag or its name parameter is omitted, then a default value is used.
Channel not satysfying this confitions are omitted.

Example of channel names. Comments follows the -- separator, but you may not use them in channel names.

MAP name="countries"|AREA alt="Czech Republic" href="CZE.html"  -- self-explanatory
MAP name="countries"|AREA alt="Germany" href="GER.html"
MAP name="cities"|AREA alt="Prague" href="Prague.html"
MAP name="cities"|AREA alt="Berlin" href="Berlin.html"
AREA alt="" href=""                                            -- use default MAP parameters
AREA_                       -- + default AREA parameters. Note: The underscore (_) is space!