Image Map/Tutorial/Clickable Areas

Select a geometric form and insert a link

Learning Objective edit

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:

rectangle,
circle,
polygon.

To all clickable areas a link/URL is assigned. The webbased resource will be displayed when the used clickable areas.

Rectangle edit

The following image contains a clickable area as rectangle over the waterwheel:

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

The wiki syntax of the imagemap was generated with the Online ImageMap Editor

<imagemap>
   File:Annweiler Queich 05.JPG|Image of River Queich in Annweiler|350px|thumb
   rect 1178 344 1508 1243 [[Wikipedia:Water_wheel|Water Wheel Link to Wikipedia]]
</imagemap>

Circle edit

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.

Subtitle of Image

The source code of the image is:

<imagemap>
  Image:Kompas_Sofia.JPG|400px|Subtitle of Image
  circle 1607 939 935 [[w:Compass|Compass]]  
</imagemap>

In general an image map contains more the one clickable area.
the "w:" is short for "Wikipedia:"

External Links in the Image Map edit

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.