Wikipedia:Wikipedia Signpost/2008-03-03/Tutorial

ByNihiltres

Level: Intermediate

This week's tutorial explains how to use the syntax for the ImageMap MediaWiki extension, which allows images and sections thereof of variable shape and size to link to any link that could be made in text (any valid wikilink, interwiki link, or external link) rather than to the image description page.

A basic understanding of the image syntax is assumed.

The basic structure

Each piece of ImageMap code may be broken down into several sections. All ImageMap code is first contained within <imagemap> and </imagemap> tags. Within these tags, information is separated into lines. Each line is either a statement, blank, or a comment.

For example, this is a valid piece of ImageMap code:

<imagemap> Image:Example.png|This line is a statement #This line is a comment, followed by a statement on the next line default [[wikilink|This line is a statement]] #This comment line is followed by a blank line, which is in turn followed by a statement desc none #There being no more code, we can close the ImageMap tag, as below </imagemap>

The image line

The first line must be a line specifying the image. This code is identical in syntax to normal image syntax without the surrounding square brackets. All of the basic image syntax and extended image syntax applies, though options such as thumb may not be fully supported by ImageMap. The text provided as a comment in the image syntax on this line is not visible except as alternative text when the image is unavailable, except for options such as thumb which might use it.

For example, in the case that the syntax for the normal, unmapped image was [[Image:WikipediaSignpostHead.svg|100px]], the ImageMap code for the first line would be

Image:WikipediaSignpostHead.svg|100px

Mapping an area to a link

After the first line, any valid lines are acceptable. Usually the second line, and perhaps more following it, contain the areas which the ImageMap uses to map to the image. An ImageMap must have at least one area or default target specified.

Each line that describes an area can be broken down into three parts: the type of area, numerical parameters for that area as necessary, and a valid link in wiki format. These parts are separated on the line by spaces. When hovering over an area, the link destination, or the alternate text (if provided), is displayed as the tooltip when applicable.

For example, the following might be a valid line:

rect 0 0 150 150 Tooltip text

When two or more areas overlap, the area specified first in the code takes precedence unless it is default.

There are four types of area that can be used:

Default

A default area is specified by the type default and the link. It specifies a default target for the image where no areas are specified which overrides the default behaviour of linking to the image description page. Most simple ImageMaps with a single target should use this for simplicity. This type should only be specified once.

Rectangle

The simplest shape is a rectangle. First, the type rect should be specified, and then two points are specified using four numbers separated only by spaces. The first two numbers correspond to the top-left corner of the rectangle, and the second pair correspond to its bottom-right corner. The number pairs are distances, in pixels, first horizontally and then vertically from the top-left pixel of the image, relative to its default size. For example, the top-left pixel of the image has the coordinates 0 0, while the pixel two to the right and one downwards from it would be 2 1. After these coordinates are specified, any valid link, in normal wiki syntax, is used.

Circle

Many buttons, icons, and other images conducive to use with ImageMap are circular. For this, one uses the type circle. After specifying the coordinates for the centre of the circle as for the corner of a rectangle, a third single number specifies the radius of the circle, in pixels. After this is specified, any valid link, as for the rectangle, is used.

Polygon

Sometimes complex shapes are required for ImageMaps. This, using the type poly allows one to specify a polygon as an area by specifying the coordinates for each point of the polygon in turn in the same method used to define points for the rectangle. Irregular shapes may therefore be properly mapped. The number of points used should be kept to a minimum, especially as polygons with many points sometimes do not work. Polygons with fewer than 20 points should always work. For more complex shapes, using multiple overlapping polygons is an effective workaround and helps simplify each shape. After the last point, any valid link can be used.

For the more complex shapes, it is easiest to use the graphical ImageMap creator on the toolserver at link here

The image description icon

Overview

Else