• Home
  • History
  • Annotate
Name Date Size #Lines LOC

..26-Jan-2022-

_test/H17-Jun-2020-593482

lang/H17-Jun-2020-148

.travis.ymlH A D15-Jun-2020328 1716

COPYINGH A D15-Jun-202017.6 KiB341281

LICENSEH A D15-Jun-202017.6 KiB339281

READMEH A D15-Jun-20202.6 KiB5944

action.phpH A D15-Jun-20201.3 KiB4623

all.cssH A D15-Jun-2020184 1411

jquery.imagemapster.jsH A D15-Jun-202039.8 KiB122

map.pngH A D15-Jun-20203.1 KiB

plugin.info.txtH A D15-Jun-2020283 87

script.jsH A D15-Jun-2020547 2518

style.cssH A D15-Jun-2020186 1311

syntax.phpH A D15-Jun-202015.6 KiB381332

README

1====== Image Map Plugin ======
2
3An image map is a graphical object where portions of the image act
4as links. With this plugin, you can not only create an image map,
5but also an alternate representation that can be used by non-visual
6browsers.
7
8===== Syntax =====
9
10  {{map>imagemap.png|Alternate Text}}
11  Type normal wiki markup here. Links will be automatically
12  detected and used in the image map.
13    * [[wikipage|Description @ 10,12,40,30]]
14    * [[wp>image_map|An interwiki link @ 110,50,40]]
15    * [[http://w3.org/|{{w3c-logo.png|Even image links work @10,115,80,95,150,115,80,135}}]]
16    * {{example.pdf|Direct link to a media file @ 200,100,80,60}}
17  {{<map}}
18
19This example will display the image ''media_link''. (if the browser is
20capable of it.) There will be four links in the image:
21  * A link to the wiki page ''wikipage'' in a rectangle.
22  * An interwiki link in a circle.
23  * An external link in a polygon. The link is defined with an image,
24    so the alternate text of the image is used for the map.
25  * A link to a media file
26
27For a link to be used in the map, it must define the shape as part of the
28link text. This is done with the ''@'' character followed by a list of
29coordinates. The number of coordinates determines the shape of the link.
30^  #  ^   shape   ^ coordinates               |
31|  3  | circle    | center-x,center-y,radius  |
32|  4  | rectangle | left,top,right,bottom     |
33|  6+ | polygon   | x1,y1,x2,y2,x3,y3...      |
34
35If the label does not contain a suitable shape description, then that link
36will be ignored for the map. The coordinates will be removed from the link
37tag, in both the image map and the alternate markup.
38
39The wiki markup inside the map block will be generated by not displayed in
40most browsers. If using an image map is not desirable, however, the browser
41can hide the image and display the alternate markup. The plugin is already
42configured for the ''braille'', ''aural'', and ''tty'' CSS media types.
43
44===== API =====
45
46You can have a plugin implement the public method: ''convertToImageMapArea($imagemap, $data, $pos)''
47to have your plugin handle and create its own area snippet. An example can be found at the
48{{https://github.com/i-net-software/dokuwiki-plugin-popupviewer/blob/master/syntax/viewer.php|popupviewer plugin}}.
49
50
51===== Installation =====
52
53  * {{https://github.com/i-net-software/dokuwiki-plugin-imagemap/archive/master.zip|Image Map Plugin}}
54
55Download using the plugin manager, or manually and unzip in your ''plugins''
56folder. After installing, you must refresh the style cache. Go to the
57configuration editor and press "save" so DokuWiki will rebuild the CSS.
58
59