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

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.

===== Syntax =====

  {{map>imagemap.png|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://w3.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.
^  #  ^   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.

===== API =====

You can have a plugin implement the public method: ''convertToImageMapArea($imagemap, $data, $pos)''
to have your plugin handle and create its own area snippet. An example can be found at the
{{https://github.com/i-net-software/dokuwiki-plugin-popupviewer/blob/master/syntax/viewer.php|popupviewer plugin}}.


===== Installation =====

  * {{https://github.com/i-net-software/dokuwiki-plugin-imagemap/archive/master.zip|Image Map Plugin}}

Download using the plugin manager, or manually and unzip in your ''plugins'' 
folder. After installing, you must refresh the style cache. Go to the
configuration editor and press "save" so DokuWiki will rebuild the CSS.