Compatible with DokuWiki

• 2024-02-06 "Kaos" yes
• 2023-04-04 "Jack Jackrum" unknown
• 2022-07-31 "Igor" unknown
• 2020-07-29 "Hogfather" unknown

• Download
• Report bugs

Create client-side image maps

Last updated on

2023-03-14

Provides

Syntax

Repository

Source

Conflicts with

imagemap

Similar to imapmarkers

Tagged with images, links, media

By Gerry Weißbach

• swfobject
• underconstruction
• frootysearch
• svgimg2
• imageflow
• eclipseupdateurl
• phosphor
• siteexport
• layeranimation
• translator
• and 22 more

An image map is a graphical object where portions of the image act as links. With this plugin, you can not only create an image map, but also an alternate representation that can be used by non-visual browsers.

Search and install the plugin using the Extension Manager. Refer to Plugins on how to install plugins manually.

• Version upped (2024-03-12 14:42)
• Merge pull request #20 from cosmocode/master (2024-03-12 14:33)
• Version upped (2023-06-15 10:44)
• file cleanup (2023-03-14 19:14)
• some smaller fixes (2023-03-14 19:08)
• move error message to translation (2023-03-13 17:08)
• First working version of a coordinate editor (2023-03-13 17:04)
• Updated imagemapster lib to 1.5.4 (2023-03-06 16:20)

{{map>media_link|Alternate Text}}

Type normal wiki markup here. Links will be automatically detected and used in the image map.

[[wikipage|Description @ 10,12,40,30]]
[[wp>image_map|An interwiki link @ 110,50,40]]
[[http://w3c.org/|{{w3c_logo.png|Even image links work @10,115,80,95,150,115,80,135}}]]
{{<map}}

This example will display the image media_link. (if the browser is capable of it.) There will be three links in the image:

• A link to the wiki page wikipage in a rectangle.
• An interwiki link in a circle.
• An external link in a polygon. The link is defined with an image, so the alternate text of the image is used for the map.

For a link to be used in the map, it must define the shape as part of the link text. This is done with the @ character followed by a list of coordinates. The number of coordinates determines the shape of the link.

If the label does not contain a suitable shape description, then that link will be ignored for the map. The coordinates will be removed from the link tag, in both the image map and the alternate markup.

The wiki markup inside the map block will be generated but not displayed in most browsers. If using an image map is not desirable, however, the browser can hide the image and display the alternate markup. The plugin is already configured for the braille, aural, and tty CSS media types.

Note: As with any media link, you may want to include the leading colon when defining the image

{{map>:media_link|Alternate Text}}

to avoid unexpected behavior particularly when using namespaces.

The plugin comes with a toolbar button that will help you create and edit image maps. The button is sensitive to your current cursor position.

• Cursor inside an existing image syntax → allows you to convert this image into a new image map
• Cursor inside an existing image map, but not on an individual link → add a new link
• Cursor inside an existing image map's link → edit that link's shape

The Editor allows you to add and remove control points for the shape (Circle → Rectangle → Poligon). Simply drag and drop the control point to the desired location, click save and the coordinates of your link are updated. Edit the link syntax as usual.

Is there a way to avoid the rendering of the links additionally below the map?

The plugin includes CSS rules that will hide the text links in desktop browsers. If the styles have not been updated, then you will see the links in addition to the image map. You need to reset the cache on the server (go to the configuration admin page and click “save”) and in your browser cache (hold the Shift key while you click “Refresh”).

Responsive images should adjust the map coordinates if Javascript is enabled. The older plugin would not work properly when the image was resized.

For me, the buttons have a text in German instead of Dutch, which I would prefer. Is this a translation error or is it only available in German?

The button text is only in the German language for us as well. I love German, but I would like to change it to English if at all possible. Can we do this? Thanks! — Courtland 2017/10/5 04:44

See imagemap/script.js lines # 29 and 30.

    + unescape("<button onClick=\"imagemap.writeOutput();document.getElementById('imagemap_light').style.display='none';document.getElementById('imagemap_fade').style.display='none';\">Uebernehmen</button><br />")
    + unescape("<button onClick=\"document.getElementById('imagemap_light').style.display='none';document.getElementById('imagemap_fade').style.display='none';\">Abbrechen</button><br />")

To be able to work with the combo plugin, the links should be on a new line (not in a list). More combo imagemapping support