Interactive Maps with the GIMP

Using the GNU Image Manipulation Program, you can easily create interactive maps for use in your game - just for your records, for the players' use in an online video conference game, or maybe as a solitaire dungeon where the player advances on the map and clicks on numbered areas as they proceed.

To start, open an existing image with the GIMP - perhaps a wilderness or dungeon map. For this example, I'm going to recycle an old side view "dungeon" I posted here last year. Then choose Filters - Web - Image Map.

That's going to bring up the image mapping editor.

From the mapping menu in this new window, choose your selection shape. I use the rectangle (it seems less wonky). Use it to select parts of your image, just as you would with the toolbox's rectangle select tool. As you make selections, new layers will appear in the sidebar on the right. You can edit the information in these entries as you go along or come back to edit them later by double clicking them in the sidebar.


In the above example, I've selected the number 3 on my map and now am choosing what will happen when the 3 is clicked on in the image - in this case it will take the user to a new web page with a description. If the link is relative, it means that the destination web page is located in the same directory as the original image. The "ALT text" area will display hovering text on mouse over if Internet Explorer is used (other web browsers will not use it).

Once the image is mapped, in the image map window, choose save - GIMP should append a .map to the end of the file name. Change it to .html now or after saving. The image mapping editor will disappear and you're back to your original image.

To test, put the image file in the same directory and double click your newly saved .html file to open it in your browser. Quick and dirty image mapping! Click the numbers on my lazy example to see it in action.