GNU Image Manipulation Program/Image maps

From Wikiversity
Jump to navigation Jump to search
Dr Johnson - Dictionary writerBoswell - BiographerSir Joshua Reynolds - HostDavid Garrick - actorEdmund Burke - statesmanPasqual Paoli - Corsican patriotCharles Burney - music historianThomas Warton - poet laureateOliver Goldsmith - writerprob.The Infant Academy 1782unknown paintingAn unknown portraitservant - poss. Francis BarberUse button to enlarge or use hyperlinks
Image map example of The Club. Clicking on a person in the picture causes the browser to load the appropriate article.
Water Wheel Link to Wikipedia
Click on Water Wheel - Image River: Queich, City: Annweiler, Country: Germany

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.

Explore an ImageMap in Wikiversity[edit | edit source]

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[edit | edit source]

Imagemaps from GIMP to Mediawiki[edit | edit source]

  • 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[edit | edit source]

The MediaWiki needs the imagemap in a specific format mentioned above. The imagemap editor by Adam Maschek[4] 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[edit | edit source]

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[edit | edit source]

  • 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.

References[edit | edit source]

  1. ↑ W3Schools - Learning Environment for Web Developers - https://www.w3schools.com/ (accessed 20017/08/12)
  2. ↑ GIMP - GNU Image Manipulation Program for Linux, Windows and Mac - OpenSource - https://www.gimp.org/downloads/ (accessed 2017/08/24)
  3. ↑ MediaWiki Javascript ImageMap Editor adapted by Bert Niehaus - based on GitHub fork of Editor provided by Adam Maschek (accessed 2017/10/08) - https://niebert.github.io/imgmap/
  4. ↑ Image Map Editor - Javascript by Adam Maschek (accessed 2017/10/09) - https://github.com/maschek/imgmap
Retrieved from "https://en.wikiversity.org/w/index.php?title=GNU_Image_Manipulation_Program/Image_maps&oldid=2478377"