Image Map/Tutorial/Clickable Areas
Learning Objective
[edit | edit source]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 | edit source]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
<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 | edit source]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:
<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 | edit source]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:
<imagemap> Image:Kompas_Sofia.JPG|400px|Subtitle of Image circle 1607 939 935 [https://en.wikipedia.org/wiki/Compass Compass] </imagemap>