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 Graph edit
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 Use edit
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 https://github.com/niebert/imgmap/archive/master.zip,
- unzip downloaded imgmap-master.zip that contains the HTML and Javascript-Files of the ImageMap-Editor and
- start the
docs/index.html
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)
Download/Links edit
- ZIP-File of ImageMap-Editor for Offline-Use (HTML5 Application)
- Explore source files of ImageMap-Editor of ZIP-File on GitHub
- Online-Use of ImageMap-Editor