GNU Image Manipulation Program/Image maps

Imagemaps are created on GIMP using one of the extensions. Beside learning the GIMP way of creating ImageMaps the learning resource introduces into technical aspects imagemaps in Wikiversity.

Image map example of The Club. Clicking on a person in the picture causes the browser to load the appropriate article.

Click on Water Wheel - Image River: Queich, City: Annweiler, Country: Germany

Explore an ImageMap in Wikiversity

The image on the right contains an image map. Click on the people in the painting to get more information and answer the question "who is this?"

Online Image Map Editor on GitHub

Learning Resources

• (Basics about ImageMaps) Learn about the basic principles of Image Maps and explore the learning environment about ImageMaps on W3School.
• (ImageMaps with GIMP) Learn about Creating and ImageMap with GIMP with a Youtube video by TanUv90. Download GIMP
• (Javascript ImageMap Editor) A Javascript ImageMap Editor allows a direct generation of imagemap in the mediawiki format (see https://niebert.github.io/imgmap/ Online Example).

Imagemaps from GIMP to Mediawiki

• If you want to create an imagemap, you need
  • an image and
  • a list of clickable areas in the image that includes a reference to another web resource,
• to understand the concept of imagemaps try a clickable image on the right first.
• then try to create an image for yourself with Online image map editor. Use e.g. the the following image on wikimedia.

https://upload.wikimedia.org/wikipedia/commons/5/5e/Annweiler_Queich_05.JPG

• insert the link to the image in Online image map editor and press the small arrow on the right.
• mark the water wheel with (e.g. you get the coordinates 500,145,630,525, see image on the right)
  • one click on the top left of corner
  • one click on the bottom right of corner
• you will see a rectangle, and analyse the HTML code

• Watch the Youtube Video about ImageMaps with GIMP by Youtube user TanUv90
• install the GIMP's plug-in for image maps. When you use the plug-in:
  • it has simple selection tools and when an outline of an area is closed (or double mouse clicked) a dialog shows up that has text boxes for the different image table attributes and instructions.
  • Use the "alt" attribute for what the name for the object that is highlighted on a mouse-over event.
  • Use the "href" attribute to create a link, that is displayed when you click on the area.

The GIMP output and the output of the Online image map editor looks like commons:Image_talk:Afrotropic-Ecozone-Biocountries-IM.svg#Partial HTML Markup and to make the wiki markup from that it is necessary

• to search and replace "<area shape="" just gets removed,
• "" coords="" replaced with a space,
• "," replaced also with a space (in the list of coordinates/numbers),
• " href=" is replaced with " [[" or " [[:Category:" and " />" with "]]".

Web-based ImageMap converter

The MediaWiki needs the imagemap in a specific format mentioned above. The imagemap editor by Adam Maschek was forked to change the export format directly to MediaWiki. No application of regular expressions for replacement the standard image map format for HTML is necessary anymore.

Online MediaWiki ImageMap Creator

• (Select Image) Select the image for which you want to create an image map
  • (Upload) upload the image to the Online Image Editor that you have already uploaded to WikiMedia
  • (WikiMedia) If you want to use a image from wikimedia use the full size URL to the image
  • (Sample Image) Use one of the 4 sample images to explore the features of the Online Image Editor
• (Add Links on Image) Clickable areas on the image can be created as
  • rectangle,
  • circle or
  • polygone (finsh the selection of point list for the polygone by a SHIFT-click)

Note: Image Maps are create in the browser no images are uploaded to any server.

Manual Replacement of Coordinates

From GIMP or the web-based tool you will get an image map syntax like this.

<area shape="poly" coords="203,193,202,222,195,238,202,268,239,249,264,284,281,289,333,288,329,322,370,277,377,243,346,250,322,221,306,181,256,186,254,194,248,199,226,198,226,205,205,205" href="Northeast Tropical Africa" />

After converting the coordinates the code for the imagemap will look like this:

poly 203 193 202 222 195 238 202 268 239 249 264 284 281 289 333 288 329 322 370 277 377 243 346 250 322 221 306 181 256 186 254 194 248 199 226 198 226 205 205 205 [[:Category:Northeast Tropical Africa]]

View source code of this page to analyse the image map used for the painting.

See also

• Real Word Lab: Imagemaps can be used to create a visual tour in Wikiversity for a Real-World Lab as learning environment. Exploration of a physical location with real experiments is guided and supported with Wikiversity content.
• Image Map: Learning module for authors in Wikiversity to used Image Maps for visual navigation through the learning environment (especially visual exploration of a geographical location).
• Online ImageMap Editor for ImageMaps in Wikiversity and Wikipedia.