Help:Imagemap

Imagemap is a MediaWiki extension that allows creating clickable areas on a given image. Each area can link to a page on the wiki and display the title or any alternate text. There is a script by Dapete at MetaWiki (Peter Schlömer) that makes editing them much easier; any imagemaps on this wiki have been created through the use of this script. Other scripts and sites for editing imagemaps are also available elsewhere, but these instructions assume the use of this one.

Technical details

Imagemaps are specified within <imagemap> tags. (To use any wikitext other than simple links within them, the #tag parser function is required.) The first line specifies the file to use, and optionally the size to display it at. Area definitions follow. Blank lines can be used for organization, and a line starting with # is a comment which will be ignored by the parser.

Areas are defined using coordinates on the full resolution image and will automatically scale when the image is resized on a page. Therefore, if the image dimensions change as a result of a reupload, areas may break. Areas can be defined as a rect (rectangle), circle, or poly (polygon). Each line defining an area will start with the type, followed by all of its sets of coordinates (x then y, measured from the top left of the image) separated only by spaces, and lastly the link (a standard wikilink, with optional display text).

When areas overlap, priority is given to the one that is defined first in the code, so small, finicky, or inset areas should be defined first.

Script

1. On the file page for the image you want to map, open the browser console (F12) and in the Console tab, paste the entire code from the box on this page: MediaWiki:ImageMapEdit.js at dev on Wikia (Fandom) (which imports the code from another site) and press Enter. You can then close the browser console. This code can also be added to your personal JS if you want it to load on every file page.
2. Under the image and the links to other resolutions, there will now be a clickable link that says "ImageMapEdit >". Click it to open the editor.

To add a new area, click one of the area types under "Create new area". You can then click on the image to create points and set the link target and text.

To edit an existing area, click it under "Edit area". The link can be edited, the area's coordinates can be deleted to create the area again, or the area can be deleted entirely.

All of the current areas will be shown as overlays on top of the image.

The interface is the default image embed on the file page, which can be too small for very large or detailed images. It should be possible to replace the embed with a larger one, or you can simply zoom the page in. At a certain point the image's container will scroll instead of enlarging, so there is a limit to this unless you edit the CSS. This guide only covers the zoom-in method currently.

Creating a new imagemap

Create and define the areas you want, then copy everything in the "Generated wikicode" box and paste it into the wikitext of whatever page you want the imagemap on. Be sure to add the size you want the image to display at on the page, if smaller than its normal size: add the dimension(s) on the first line after the file name, like File:Imagemap.png|500px|. Add any blank lines or comments as desired, and preview to make sure it works the way you want.

Updating an existing imagemap

If you only need to add new points or replace an existing area, you can simply create new areas and copy their code lines into the existing imagemap code. You can also load the imagemap to view all the areas, which will be needed to edit specific points on an existing one.

With the script loaded, under "Import areas from wikicode", click the "Show text box >" link. Paste the full wikitext of the existing imagemap and click Import below the textbox. Note that this will remove all blank lines and comments, so it is better to paste only the new or changed lines (new lines will appear at the bottom of the generated code) back to the original source rather than fully overwriting. The imported areas will now show in the area list and on the image.

Updating an existing set of points is tricky because the script does not have a function for this. If you want to avoid recreating the area entirely, this is a way to do it:

1. Create a new area.
2. Find an existing point in the area you want to edit that is closest to the part you want to change.
3. Click at that point and continue defining any points that need to exist for the change.
4. Finish with a click at another point that already existed, keeping in mind that the new points will be inserted between the two preexisting points in the next step (so don't shortcut through another part of the area that you want to keep).
5. Now with the new generated line for the area you just defined, match up the first and last points to two points on the existing area that you want to add to. Make sure you are looking at an x and y coordinate, not a y and the following x.
6. Delete those two existing points and any between them, and insert the new set of points where they were in the code. Import it again to check that it came out how you wanted (keep a copy of the old code just in case).

External links

• Help:ImageMap at community on Wikia (Fandom)
• Extension:ImageMap on the MW wiki