ImageMapEdit Howto

Who is this HowTo for?

This HowTo might be useful to you, if...

you want to know what an imagemap is.
you are already somewhat familiar with MediaWiki, and would now like to use ImageMaps.
you would like to set up ImageMapEdit.
you would like to learn how to create and edit ImageMaps

This HowTo assumes you have already uploaded the image to the wiki, and are looking at the file description page for that image.

What is an Image Map?

ImageMaps are used when you want to make links out of multiple parts of a single image. The idea is to indicate "hot zones" on the image, which are mouse-clickable.

There are several image maps on this page.

Why do I want one?

Examples:

If you have a picture of a control panel with buttons, you can actually make the buttons pressable by using an imagemap. This might be useful for a printer manual, for instance. Clicking on a button might link to a page in the manual; or it might link to a new picture, showing the consequences of pressing the button; or it might do both!
If you have a schematic, you can make the diverse edges (lines) and nodes (boxes) in the schematic clickable. You could use this to add detailed descriptions to steps in a process.
In blueprints, you could allow access to more detailed subcomponents in the blueprint in this manner.
If you have a photograph of a group of people, you could allow the user to click through to information about each person.
In a photograph of a machine or a set of components, you could providelinks to blueprints, detail photos of each component, descriptions, specifications, etc.
You could take photos of a number of rooms in a building, and make doors in each room clickable. When one of the doors is clicked, you could "move" the user to the next room. This can be used to make guided tours.
...
There are many applications of imagemaps. Since you can use them with any picture, the system is very flexible. Use your imagination!

Why ImageMapEdit?

Putting an ImageMaps on a wiki is a bit tricky and takes a bit of work. ImageMapEdit automates and simplifies a large part of the process.

Setup

First, find out if you need to setup anything: some projects load imageMapEdit whenever you are on a page in the "File:" namespace. If this is the case, no setup is needed.

Second, check to see if imageMapEdit appears as a gadget: some projects, and specifically commons, provide it as a gadget. If this is the case, your "Setup" is to enable this gadget.

The fact that commons have it, makes it available to anyone, at least for free images: So, even if you choose not to setup imageMapEdit, you'll still be able to use it for any image stored on commons, by activating this gadget in your account at commons, and going to the image page on commons to generate the imagemap.

If you want to have imageMapEdit on a project which does not offer the imageMapEdit gadget, you can do so by editting your common.js page on that project (linked from "Preferences => Appearance" – if it's a red link, create it), and add the following line.

mw.loader.load('//he.wikipedia.org/w/index.php?title=Mediawiki:Gadget-ime.js&action=raw&ctype=text/javascript');

non-wikimedia wikis using mediawiki code, can either add the above line in the "mediawiki:common.js" page, or copy the script (he:Mediawiki:Gadget-ime.js) to a page on their wiki and activating it.

Use it on image pages, i.e., pages in "File:" namespace, by clicking the ImageMapEdit > link that appear under the image.

Editing an ImageMap

This part of the Howto assumes you have already uploaded the image to the wiki, and are looking at the file description page for that image. See Uploading files for details (We will use the wikicode generated by ImageMapEdit to replace the wikicode in that document).

Opening the editor

When viewing an image on the images page, a new link is available, right under the image. Click on this link, and an imagemap editor will appear.

Location of the ImageMapEdit link (original image: File:Metal movable type.jpg)

Figure: The Editor

Once you click the linkette, you should see the imageMapEdit input fields, as shown in the following image:

Above image is an imagemap, and shows the various controls, for creating a new area, editing an existing area, entering the article this area should link to, and finally, the Generated wikicode area, from which you can copy the imagemap and paste it in the article. Above the wikicode box is the "Import" button.

Deciding where to place hot zones

With ImageMaps, your Browser can't "see" the underlying image, and relies entirely on the hot zone information you enter. In fact, in theory, you could put any shape of hot zone anywhere on the image, though this might not be particularly useful.

More usefully, typically there are fairly obvious areas of the image which should be clickable. For instance, boxes in a schema, drawings of buttons, people, etc. Sometimes it can be useful to tailor an image to make it more obvious where people are supposed to click.

Create new area (draw a hot zone)

In the Create new area listbox, click on the shape you want, for your (next) area (hot zone). Then, proceed as follows for that shape.

Alternatively, you can modify previously created areas, by selecting it from the "Edit Area" listbox, and continue editing, e.g., placing the corners of a rectangle at different points, moving the center of a circle. It is not possible to relocate any of a polygon vertices, so editing an existing polygon is limited to "extending" it, by adding a vertex between the last click and the first one.

rect(angle)

In the image, click your left mouse button on one corner of the rectangle you would like to create. You should see a small red cross at the point you clicked. Next, click the right mouse button on the opposite corner. You should see now the whole rectangle, which the two points you clicked marked with red and yellow crosses.

At any time, you can select this rectangle again from the "Areas" listbox, and adjust wither the left-button (red cross) corner, the right-button (yellow cross) corner, or both.

circle

In the image, click your left mouse button in the center of the circle you would like to create. Small red cross will mark the center. Next, click the right mouse button somewhere on the circumference of the circle. You should see now the circle itself, and the marks for the two "clicks".

poly(gon)

In the image, click your left mouse button on the first point of the polygon. . Now, continue to click the left mouse button on each corner of the polygon. At any moment, the last click is assumed to be the last vertex of your polygon, and the last edge connects this vertex to the first one. As you add more points, the polygon is gradually built.

Edit Area

Once you have drawn your hot zone (area), you need to specify what the hot zone links to.

Link target: Specifies which wiki-page the user should go to, when they click on this hot zone (area).
Link Title (Optional): Optionally, you can provide a mouse-over text for the hot zone. By default, if you don't provide a specific mouse-over text, the Link target will appear in the mouse-over text instead.

The other options tweak the hot zone, or allow you to remove it from the ImageMap.

Delete an area

You can delete any area by selecting it in the "Edit area" listbox (the selected area is highlighted on the image), and then "Delete selected area".

IMPORTANT: imageMapEdit does not support any "undo", so be sure before deleting anything

Use the created ImageMap on a page

Finally, we are done creating our imagemap. Imagemaps don't exist in a vacuum, they need to be placed on a page. You typically place an ImageMap in a similar way to placing an Image. The ImageMapEdit tool has created the wikicode for us, so all we need to do is copy the code out of the Generated Code box, and paste it to the relevant page.

Note that in this example, some of the links weren't filled in yet. (note the empty [[]] behind some of the items.) Obviously, you want to fill out all the links before posting your ImageMap.

Other Functionality

General preferences

you can provide a description for the image (This is only used as alt-text).
You can place the " " information link in a different corner of the image, or leave it out altogether.

Import areas from wikicode

If you have an existing imagemap that you would like to edit, you will need to be able to access it somehow. To get the ImageMap (back) into the ImageMapEdit:

click on Show text box >
paste the wikicode for the ImageMap into the box.
click Import

Q&A

Q:My wikicode vanished, where did it go?

Say you have created an Imagemap one day, save it to the page, and go away. A little while later, you notice that you forgot a box, or you have updated the image, or at any rate, you want to revisit the imagemap

However, when you open ImageMapEdit, there's no code! Where did it go?

Answer: ImageMapEdit is not fully integrated into the wiki. It only generates and reads wikicode.

Go to the page where you put the ImageMap, and click edit.
Select and copy the ImageMap code
Then import that code back into ImageMapEdit. See: Import areas from wikicode

Q:Can I still resize my image on the page?

Answer: Sure!

In the imagemap code, just add the size you would like in pixels, just like you would do for an ordinary image; for instance:

File:ImageMap Creation.jpg|700px

Q:I Resized my image on the page, do I need to redraw my imagemap now?

Say you resize the image using the answer provided above, do you need to redraw the ImageMap to fit?

Answer: No, fortunately. The ImageMap gets scaled by the same amount as the image, and remains usable as-is.