Image Map Plugin

An image map is a graphical object where portions of the image act as links. With this plugin, you can not only create an image map, but also an alternate representation that can be used by non-visual browsers.


Alternate Text

DescriptionAn interwiki linkEven image links workDirect link to a media file

Type normal wiki markup here. Links will be automatically detected and used in the image map.

{{map>imagemap.png|Alternate Text}}
Type normal wiki markup here. Links will be automatically 
detected and used in the image map.
  * [[imagemap#Syntax|Description @ 10,12,40,30]]
  * [[wp>Image_map|An interwiki link @ 110,50,40]]
  * [[|{{w3c-logo.png|Even image links work @10,115,80,95,150,115,80,135}}]]
  * {{w3c-logo.png|Direct link to a media file @155,90,244,142}}

This example will display the image media_link. (if the browser is capable of it.) There will be three links in the image:

  • A link to this wiki page in a rectangle.
  • An interwiki link in a circle.
  • An external link in a polygon. The link is defined with an image, so the alternate text of the image is used for the map.
  • A link to a media file.

For a link to be used in the map, it must define the shape as part of the link text. This is done with the @ character followed by a list of coordinates. The number of coordinates determines the shape of the link.

# shape coordinates
3 circle center-x,center-y,radius
4 rectangle left,top,right,bottom
6+ polygon x1,y1,x2,y2,x3,y3…

If the label does not contain a suitable shape description, then that link will be ignored for the map. The coordinates will be removed from the link tag, in both the image map and the alternate markup.

The wiki markup inside the map block will be generated by not displayed in most browsers. If using an image map is not desirable, however, the browser can hide the image and display the alternate markup. The plugin is already configured for the braille, aural, and tty CSS media types.


Download using the plugin manager, or manually and unzip in your plugins folder. After installing, you must refresh the style cache. Go to the configuration editor and press “save” so DokuWiki will rebuild the CSS.