Imagemaps

You can generate an imagemap by assigning clickable hyperlink regions to any image on this wiki! This is possible thanks to Extension:ImageMap by MediaWiki developer Tim Starling.

Hovering over a defined region of the picture will cause a box with the link text to appear and clicking it takes the user to a different website inside (or outside?) the wiki. On some devices, the outline of the region will briefly light up when clicked as well.

What They Are Good For

Being able to click specific objects that appear in an image to "zoom in" for more information is as intuitive as it gets and can help, for instance, with learning the names of things or where they are stored.

We currently have imagemaps on the following pages, just give it a try:

adhesive tape
drills
<where else?>

Also check out multi-photo imagemaps!

How to Create Them

You need to define areas as rectangles (coordinates of top left and bottom right corner) or polygons (coordinates of every corner in order) before you can link them. Coordinates refer to the original image, i.e. there may still be values over 1000 even if you're working on a 300 px thumb.

Adding an imagemap to an article is pretty similar to linking a file, with a new line for each region you want to define. Have a look at the examples on the Extension:ImageMap page or the source code of the ones we have created so far to understand the syntax!

Easy Way

This "Online Image Map Editor" is great for determining coordinates quickly and copy/pasting them into the wiki code, and can even be used as a fully compatible mask. The only thing you may have to change in the end is the link to the image file which is internally linked for us but externally linked for the editor.

screenshot of the tool

Basic steps:

select image source and click "accept" in the corresponding row
define a new area (select rectangle, circle or poly) by pointing and clicking - not dragging
finish a poly by holding SHIFT on the last click
repeat adding areas until you have covered what you wanted to link
define links: "Href" is the name of the wiki page you'd like to link to, "Alt" is the displayed mouseover text
repeat defining links and alt texts for the other entries
make sure "Wiki imagemap" is selected as output
click the blue "get imagemap HTML" icon next to the zoom selector at the top
copy and paste the generated code into a wiki page
use the preview function to make sure it worked and release your awesome imagemap!

Manual Way

If you are offline or having trouble uploading to tools like the Image Map Editor mentioned above, you can open your file in any graphics program that shows coordinates (even MS Paint does that) and write down the ones you need. For polygons, this gets extremely tedious so do not attempt do it this way unless you absolutely need to kill some time, for example on a car ride...