Image Map/Tutorial

The tutorial for generation of Image Maps consists of 3 major steps:

A possible result of an image map is visible on the right. The water wheel is linked to a Wikipedia article about water wheels. You can replace the link with any web resouce that is accessible.

  • Video,
  • Images,
  • Web pages,
  • Questionnaires online surveys,
  • ....

Image Map GraphEdit

Create a visual representation (Image Map Graph - IMG) in LibreOffice Draw and highlight those areas with links to other web resource. This can also be used for the learners to get an overview what can be explored in a learning resource.


The image abover can also be used in the ImageMap Editor to link the Image Map Graph to the image maps as nodes of the graph.

Offline UseEdit

The Online-ImageMap-Editor does not store any user generated data on a server. If you want to use the application offline * download the following ZIP-File,

  • unzip downloaded that contains the HTML and Javascript-Files of the ImageMap-Editor and
  • start the
    in docs/-folder with your browser (e.g. Firefox).
  • the /docs-Folder contains all necessary files for the ImageMap-Editor (optional)
    • rename /docs-Folder to ImageMapEditor (optional),
    • create a /WebApp-Folder in your /Documents (optional) and
    • copy the renamed folder /ImageMapEditor-Folder to /WebApp/ImageMapEditor (optional)


See alsoEdit