Help:Image map

The ImageMap extension 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.

You need to use Enhanced Editor when creating image maps.

How to create an image map on Saintapedia

Using the public tool

1. To create an image map, first go to the page where the image is located that you wish to add click-able sections.
2. Follow on the image to go to the file page where the image is stored on Saintapedia.
3. Click on the image again and copy the URL.
4. Go to Help:Image map and follow the tool link.
5. Paste in the URL.
6. Go back to the image's file page and copy its name.
7. Add the file page's name and click on Load.
8. Scroll down and select the first shape you wish to use.
9. For rectangles, left click on one corner or the section and right click on the opposite corner.
10. Give the section a name.
11. Add additional click-able sections as desired.
12. Copy the "ImageMap extension code"
13. Edit the Saintapedia page where you want to add the image map.
14. Paste in the code
15. Save the page after adding edit summary (optional).

Put your Image Map in a template and categorize

1. Put the image map in a template so it can be called from anywhere as needed and to hide the imagemap syntax from the average user.
2. Add a Documentation subpage by adding the following as the last characters in your template: <noinclude>{{Documentation}}</noinclude>. Note, do not leave any spaces or line returns between the last characters of your template and the first nowiki tag.

Image Maps on Saintapedia

<DynamicPageList>

 category=Image maps
 ordermethod=sortkey
 order=ascending
 shownamespace=false

</DynamicPageList>

Parameters and functions

Please see the main extension page on Metawiki for complete description: mediawikiwiki:Extension:ImageMap. A summary of the relevant section is as follows:

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 Desc-20.png 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 "thumb" or "frame" images, which instead employ the usual double-rectangle icon .

Example:

<imagemap>

Image:PolierMartinWombwellZoffany.jpg|thumb|200px|Colonel Antoine Polier

rect 269 140 344 305 [[Claude Martin]]

rect 124 147 181 298 [[Antoine Polier|Antoine-Louis Polier]]

desc none

</imagemap>

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

External links

Creating shaded map of US

• http://mapchart.net/usa.html
• http://diymaps.net/us_12.htm
• http://diymaps.net