Image Map

Online Image Map Editor on GitHub

ImageMap in Wikiversity allows learners to explore a learning resource visually. This learning resource is designed for authors of learning resources in Wikiversity, that want to enhance learning resources with visual explorations of the content.

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

Image Map Graph for Navigation

Objective

• Tutorial Online-ImageMap Editor: Learn to create an ImageMap for Wikiversity.
• Navigation with ImageMaps: Learn to create a Learning Environment through which learner can "walk" / navigate by application of image maps.
• Learning Resources in Image Maps: Learn to link learning resources to objects displayed on an image. Printout a selected image in light greyscale and paint the
  • rectangles, circle, polygons on that image with numbers and
  • assign learning resources and other images to that clickable area.
  • create such an image map design for all nodes in the navigation graph.

Learning Tasks

• Explore the concept of Real World Labs with learning resources in Wikiversity attached to a geographical location. Explain how image maps can help to explore the geographical location!
• Place the images representing a certain geolocation on the map a create an icon for with the
  • (Learning Resource) Wikiversity URL with the learning resource for that geolocation or
  • (Image Map Page) with Image Map on the Wikiversity page. Users change from MAP-navigation to IMAGE-based navigation.
• Explore the Image Map features and the requirments and constraints for learners with the following examples
  • Image Map Example on Wikipedia - click on single person in painting on the right.
  • You can create an Image Map in LibreOffice or GIMP. See Youtube Video for GIMP or you can try the Online image editor.
  • Create ImageMaps with webbased tool ImgMap, that does

• Select images for your Real World Lab (e.g. the image on the right with the river Queich) and create an image map that informs about the objects seen on the image (e.g. the water wheel or the river). The ImageMap editor will defined clickable areas on the image. Users explore the Real World Lab just by the web browser by selecting the river bed, or a building. By clicking on the river or the building the user can select further details of river or the building (view inside the building).
  • Use the following URL in the Online Image Map originally created by Adam Maschek and forked and adapted (2017) for an improved application within Wikiversity.

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

• Mark the water wheel and create a reference to an online resource in Wikipedia, that explains this type of old technology.
• Try other types of links that make a reference objects see on the image, e.g. a geographical map with a marker, that shows where the image was taken, or any other web-based resouce including quizzes, YouTube Videos, ...

See also

Equirectangular Image from Wikiversity used for Aframe 360 Degree Image (see Hugin)

• Real World Labs and ImageMaps: Real World Lab and visual exploration of geographical location with ImageMaps
• Technical Details of ImageMaps in Wikiversity: For further details see GIMP Image Maps in Wikiversity.
• 360 Degree Images as an replacement for Image Maps (e.g. Durlach Market or Aldara Park)
• AppLSAC: The Image Map Editor to create image maps for Wikiversity is an AppLSAC - i.e. it is a WebApp that run complete in the browser as runtime environment for the Javascript code.

Links

• Online ImageMap Editor for MediaWikis
  • WebApp that does not upload any images to a server,
  • ImgMap App is able to use online images in WikiMedia directly loaded into the WebApp.