Extension:ImageMap

An extension for client-side clickable image maps.

Another implementation, that includes the functionality of both this extension and the McNaught imagemap extension is available at Extension:ImageMap_(Alternate). This new implementation, currently in beta, provides a few extensions to this version, such as allowing URLs to external web pages in links and the cleanup of several bugs.

Syntax example
Output of this example:

Syntax description
The contents of an &lt;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.


 * desc : 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.


 * rect : 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.


 * circle: 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.


 * poly: A polygon. The coordinates of the vertices are given, followed by a link in square brackets. Polygons must be defined before any other form!


 * default: 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 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.

Installation Guide

 * 1) Make a directory in extensions: ImageMap
 * 2) Download all files from subversion in this directory
 * 3) Add require_once( "$IP/extensions/ImageMap/ImageMap.php" ); to your LocalSettings.php

Test installation:
 * 1) Download Image:Foo.jpg and upload it to your wiki.
 * 2) Make a new Article ImageMap and copy & paste the text of this article (at least section "syntax example") to your article

Trouble Shooting:
 * 1) Check to see if your php DOM is turned on. You may need to install it if it is not.

Parameters

 * $wgImageMapAllowExternalLinks = false
 * Set this to true to enable extern links (http://www.example.com) as link destination

Known Bugs

 * 8640 	ImageMap extension icon assumes a standard location
 * 8718 	Information icon on imagemap is wrong placed when image is centered.
 * 8788 	ImageMap makes accompanying links unclickable
 * 8835	ImageMap does not accept links in the image caption
 * 9126	Image maps fail to scroll in IE7
 * 9295	More than 19 imagemap polygons causes page to fail to render and is blank; can't preview or save

Known feature requests

 * 8657 Superimpose another image as click destination

Image map editor

 * A graphical tool to determine the coordinates. Author: meta:User:Dapete

In addition, the Image Map Conversion special page can be used to convert HTML format image map information into the format for this extension. It can be used to convert the output from the utilities for file-based image maps as listed at Extension:ImageMap (Alternate).