====== Image Map Plugin ======

---- plugin ----
description: Create client-side image maps
author     : Tom Harris
email      : tnharris@whoopdedo.org
type       : syntax
lastupdate : 2015-11-04
compatible : !Frusterick Manners, !Elenor Of Tsort, Binky,Ponder Stibbons, Hrun, Detritus
depends    : 
conflicts  : imagemapping
similar    : 
tags       : media, images, links

downloadurl: http://www.whoopdedo.org/doku-plugins/imagemap.zip
bugtracker : 
sourcerepo : 
donationurl: 

securitywarning: This plugin crashes on DokuWiki Hogfather. See the bugs section.
----

:!: PHP7 support is missing. Please have a look at [[plugin:imagemapping]].

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.

===== Installation =====

Search and install the plugin using the [[plugin:extension|Extension Manager]]. Refer to [[:Plugins]] on how to install plugins manually.

==== Changes ====

  * 2009-05-05 - An error in the handling of custom sizes prevented the plugin from working.
  * 2012-05-31 - Improve link generation and filter unwanted URL schemes.
  * 2015-11-04 - Support media markup in the map.

A [[plugin:imagemapping|newer version of the plugin]] adds a map editor and better support for responsive images.

===== Usage and Syntax =====

See the plugin in action [[http://www.whoopdedo.org/doku/wiki/imagemap|here]].

<code>
{{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}}]]
  * {{w3c-logo.png|Direct link to a media file @155,90,244,142}}
{{<map}}
</code>

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.
  * A link to a media file.

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.

^  #   ^   shape   ^ coordinates               |
|  3   | circle    | center-x,center-y,radius  |
|  4   | rectangle | left,top,right,bottom     |
|  6+  | polygon   | x1,y1,x2,y2,x3,y3...      |

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 by 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 <code>{{map>:media_link|Alternate Text}}</code> to avoid unexpected behavior particularly when using namespaces.


===== FAQ =====
> 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").

===== Bugs =====

If the image is resized, the map coordinates will become unaligned. Some templates will automatically shrink large images to fit within the page area. To avoid unintentional resizing, you should specify the correct width and height. <code>{{map>image.png?500x400}}</code>
//(reported by Gregg Siegfried on 2013-04-17)//

== Error after update ==

  PHP Catchable fatal error:  Argument 1 passed to Doku_Handler_List::__construct() 
  must implement interface Doku_Handler_CallWriter_Interface, instance of 
  ImageMap_Handler given, called in /var/www/inc/parser/handler.php on line 235 and 
  defined in /var/www/inc/parser/handler.php on line 827, referer: [...]/doku.php