Extension:ImageMap

From MediaWiki.org

Manual on MediaWiki Extensions
List of MediaWiki Extensions

ImageMap Release status: stable
Implementation	Tag
Description	HTML image maps
Author(s)	Tim Starling
MediaWiki	1.11+
License	No license specified
Download	Subversion
Hooks used	ParserFirstCallInit

ImageMap is 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). Consider choosing an ImageMap extension before deciding on which ImageMap extension to use.

Contents 1 Syntax example 2 Syntax description 3 Installation Guide 3.1 Parameters 4 Known Bugs 5 Known feature requests 6 Image map editor

[edit] Syntax example

<imagemap>
Image:Foo.jpg|200px|picture of a foo
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
</imagemap>

Output of this example:

Note that the red border in the above example is part of the image itself. The <imagemap> extension does not add a border.

[edit] 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. They should be specified as (distance from left edge, distance from top).

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. To hide the description link, set it to none. Possible values: top-right, bottom-right, bottom-left, top-left, none

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

[edit] 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

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

[edit] Parameters

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 (http://www.example.com) as link destination

[edit] Known Bugs

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

[edit] Known feature requests

• Bugzilla:8657 Superimpose another image as click destination

[edit] Image map editor

• A graphical tool to determine the coordinates. Author: meta:User:Dapete
• A simple guide on how to use the Image Map editor with the ImageMap extension can be found on wikiHow.

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)#Utilities and links.