Image Map/Tutorial/Clickable Areas

Learning Objective
In this learning resource we will address the assignment of a link to geometric shape in the Online-ImageMap-Editor. The Online-ImageMap-Editor is an AppLSAC, that can be used offline without internet connectivity.

You can select the following geometric forms as clickable areas: To all clickable areas a link/URL is assigned. The webbased resource will be displayed when the used clickable areas.
 * rectangle,
 * circle,
 * polygon.

Rectangle
The following image contains a clickable area as rectangle over the waterwheel: The wiki syntax of the imagemap was generated with the Online ImageMap Editor

Circle
The following example contains a clickable circle assigned over the compass: In the example above 400px was inserted in the export imagemap from Online ImageMap Editor, to scale the image. So can see, that scaling the image in the MediaWiki will transform the coordinates of the clickable areas accordingly.

The source code of the image is:
 * In general an image map contains more the one clickable area.
 * the "w:" is short for " Wikipedia: "

External Links in the Image Map
In the following link we use an example to external link with a standard URL. Of course the link below can be accomplished with " Compass " as well and but is shows how to add external link in image maps for Wikiversity learning resources.

The source code of the image is: