StrategyWiki:Guide/Image maps

From StrategyWiki, the free strategy guide and walkthrough wiki

StrategyWiki:Guide | Table of Contents | Walkthrough

Image maps are images of which some parts of them are links.

[edit] Using the Syntax

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.

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.

Taken from ImageMap at MediaWiki.org

[edit] Example

<center>
<imagemap>
Image:PKMNGS_JhotoMap.png|Map of Jhoto
rect 543 383 576 416 [[Pokémon Gold and Silver/New Bark Town]]
rect 383 383 416 416 [[Pokémon Gold and Silver/Cherrygrove City]]
rect 319 222 352 255 [[Pokémon Gold and Silver/Violet City]]
rect 255 480 288 513 [[Pokémon Gold and Silver/Azalea Town]]
rect 191 352 224 385 [[Pokémon Gold and Silver/Goldenrod City]]
rect 255 158 288 191 [[Pokémon Gold and Silver/Ecruteak City]]
rect 126 222 159 255 [[Pokémon Gold and Silver/Olivine City]]
rect 61 383 94 416 [[Pokémon Gold and Silver/Cianwood City]]
rect 413 158 436 191 [[Pokémon Gold and Silver/Mahagony Town]]
rect 510 158 543 191 [[Pokémon Gold and Silver/Blackthorn City]]
desc bottom-left
</imagemap>
</center>

Will give (Hover mouse over the orange squares to see what imagemapping is about)