Remember: always follow the Leave No Trace principles when out in the wild.


From CampWiki

Jump to: navigation, search

ImageMap is an extension for client-side clickable image maps.


Syntax example

Image:ImageMap-Example.jpg|200px|picture of a ImageMap-Example
poly 131 45 213 41 210 110 127 109 [[Display]]
poly 104 126 105 171 269 162 267 124 [[Keyboard]]
rect 15 95 94 176   [[Foo type A]]
# A comment, this line is ignored
circle 57 57 20    [[Foo type B]]
desc bottom-left

Output of this example:

DisplayKeyboardFoo type AFoo type B
picture of a ImageMap-ExampleAbout this image

Syntax description

The contents of an <imagemap> tag consists of blank lines, comments (starting with #) and logical lines. The first logical line specifies the image to be displayed. This must be in the same format as an ordinary MediaWiki image link, except without the enclosing [[ and ]].

Further lines are split into tokens, separated by whitespace. The function of each line is determined by the first token in the line. All coordinates are according to the full-size image, not the visible image.

Specifies the location of the image description link. May be either top-right, bottom-right, bottom-left, top-left or none. This puts a blue "i" icon in the specified corner, linking to the image description page. The default is bottom-right.
A rectangle. The parameters are the coordinates of the top-left and bottom-right corners, followed by a title to link to in square brackets.
A circle. The first two parameters are the coordinates of the centre, the third is the radius. The coordinates are followed by a link in square brackets.
A polygon. The coordinates of the vertices are given, followed by a link in square brackets.
Polygons must be defined before any other form!
This gives the default link, where no other regions are specified.

All coordinates are specified relative to the source image. The image can be scaled using thumbnail syntax, in which case the image map coordinates will be automatically scaled as well.

All links are given in either the form [[Page title]] or [[Page title|description]]. In the latter case, the part after the pipe "|" becomes the title attribute of the link -- in most browsers, it will pop up as a tooltip when the user hovers over it. If no explicit link description is given, the page title will be used.

Areas which overlap give precedence to the first link listed.


NOTE: This parameter has been removed in the latest version (Revision 23292). It now always permits external links. For older releases:

Note: Extension parameters must be below the extension's require_once()
  • $wgImageMapAllowExternalLinks = false
    Set this to true to enable external links ( as link destination

Image map editor

  • A simple guide on how to use the Image Map editor with the ImageMap extension can be found on wikiHow.
Personal tools