Extension:ImageMap

ImageMap is an extension which allows clickable image maps. An image map is a list of coordinates in a specific image, which hyperlinks areas of the image to multiple destinations (in contrast to a normal image link, in which the entire area of the image links to a single destination). For example, a map of the world may have each country hyperlinked to further information about that country. The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files.

Simple example without caption


The above example always links to the Main Page, no matter where you click on it. To find out more about the image, click on the blue "i" icon.

Complex example with caption


The above example links to many different pages, depending on where you click it. To find out more about the image, click on the double-rectangle icon.

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. If the first line specifies a " " or " " image, then the first line's caption and any alt parameter are treated as the image's caption and alt text in the usual way; otherwise, the first line's alt parameter (or, if absent, any caption) specifies the image's alt text. In neither case does the image itself have title text (often used for tooltips); any title text is taken from the regions described in later lines.

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. They should be specified as distance from left edge (horizontal pixel count), distance from top (vertical pixel count).


 * 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 [[Image:Desc-20.png|link=|alt=]] in the specified corner, linking to the image description page. The default is bottom-right. To hide the description link, set it to none. Possible values: top-right, bottom-right, bottom-left, top-left, none. This parameter is ignored for " " or " " images, which instead employ the usual double-rectangle icon [[Image:Magnify-clip.png|link=|alt=]].


 * Example:


 * 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!


 * 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 center, the third is the radius. The coordinates are followed by a link in square brackets.


 * 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; the part after the pipe also becomes the alt text for the link. If no explicit link description is given, the page title is used.

Areas which overlap give precedence to the first link listed.

Installation Guide
require_once("$IP/extensions/ImageMap/ImageMap.php");
 * 1) Make a directory in extensions: ImageMap
 * 2) Download the files to ImageMap
 * 3) In LocalSettings.php add the following line:

Troubleshooting:
 * 1) Check to see if your php DOM is turned on. You may need to install it if it is not.
 * 2) Check whether ImageMagick is installed, since this extension relies on /usr/bin/convert for the resizing. If it is not present, you could get a page with only XML errors (tip: use the back-button in the browser, because you can still edit the page).

Parameters to allow external links
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</tt>
 * Set this to true to enable external links (http://www.example.com) as link destination

Known Bugs
Search Imagemap bugs: open / all
 * 8600	Transclusion of variables like fails in imagemap, dup of 2257 --D0li0 21:53, 15 May 2007 (UTC)
 * 8640 	ImageMap extension icon assumes a standard location make a symbol link to the directory. --Raymond 08:16, 10 May 2007 (UTC)
 * 8718 	Information icon on imagemap is wrong placed when image is centered. 41725
 * 8788 	ImageMap makes accompanying links unclickable 41720/41725
 * 8835	ImageMap does not accept links in the image caption (neither does it accept parameters when embedded within a Template) 40684/40685
 * 9126	Image maps fail to scroll in IE7 41720
 * 9295	ImageMap extension produces PHP fatal error when given invalid link title Fixed with 21993. --Raymond 08:16, 10 May 2007 (UTC)
 * 11504    External links containing '&' are not linked properly. resolved?

Known feature requests

 * 8657 Superimpose another image as click destination

Usage with templates
If you want this extension (as with most tag extensions) to parse template parameters, magic words, or parser functions, you will need to use #tag syntax, such as w:Template:Click did.

Image map editor

 * A graphical tool to determine the coordinates. Author: meta:User:Dapete (Note: If you want to imagemap an SVG file using this tool, you must not enter the SVG files URL itself, but the URL of the PNG on the description page. Then you have to replace the width in this URL by the SVG files nominal width, as shown on the files description page.)
 * A simple guide on how to use the Image Map editor with the ImageMap extension can be found on wikiHow.
 * Online image map editor, supports all shapes, Extension:ImageMap compatible:.
 * Basic on-line image mapper. Author: meta:User:mgwalk

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).