DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:imagemapping

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
plugin:imagemapping [2017-03-22 06:53] – version upped gammaplugin:imagemapping [2024-03-12 14:51] (current) andi
Line 3: Line 3:
 ---- plugin ---- ---- plugin ----
 description: Create client-side image maps description: Create client-side image maps
-author     : Gerry Weißbach / Michael Große+author     : Gerry Weißbach
 email      : tools@inetsoftware.de email      : tools@inetsoftware.de
 type       : syntax type       : syntax
-lastupdate : 2017-01-31 +lastupdate : 2023-03-14  
-compatible : Binky++compatible : Kaos, Binky, Elenor Of Tsort
 depends    :  depends    : 
 conflicts  : imagemap conflicts  : imagemap
Line 14: Line 14:
  
 downloadurl: https://github.com/i-net-software/dokuwiki-plugin-imagemap/archive/master.zip downloadurl: https://github.com/i-net-software/dokuwiki-plugin-imagemap/archive/master.zip
-bugtracker : +bugtracker : https://github.com/i-net-software/dokuwiki-plugin-imagemap/issues
 sourcerepo : https://github.com/i-net-software/dokuwiki-plugin-imagemap sourcerepo : https://github.com/i-net-software/dokuwiki-plugin-imagemap
 donationurl:  donationurl: 
  
 +screenshot_img: https://user-images.githubusercontent.com/86426/225101455-5cdd96d7-9904-4b2e-b1ef-9d8a6b66e53b.png
 ---- ----
  
Line 24: Line 25:
 ===== Installation ===== ===== Installation =====
  
-Download using the plugin manager the given URL above, or manually and unzip in your ''plugins'' folderAfter installing, you must refresh the style cache. Go to the configuration editor and press "save" so DokuWiki will rebuild the CSS. +Search and install the plugin using the [[plugin:extension|Extension Manager]]Refer to [[:Plugins]] on how to install plugins manually.
  
 ==== Changes ==== ==== Changes ====
Line 40: Line 40:
 Type normal wiki markup here. Links will be automatically detected and used in the image map. Type normal wiki markup here. Links will be automatically detected and used in the image map.
  
-  * [[wikipage|Description @ 10,12,40,30]] +[[wikipage|Description @ 10,12,40,30]] 
-  [[wp>image_map|An interwiki link @ 110,50,40]] +[[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}}]]+[[http://w3c.org/|{{w3c_logo.png|Even image links work @10,115,80,95,150,115,80,135}}]]
 {{<map}} {{<map}}
 </code> </code>
 +
  
 This example will display the image ''media_link''. (if the browser is capable of it.) There will be three links in the image: This example will display the image ''media_link''. (if the browser is capable of it.) There will be three links in the image:
Line 64: Line 65:
  
 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. 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.
 +
 +===== Shape Editor =====
 +
 +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.
 +
  
  
Line 70: Line 82:
  
 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"). 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 ===== ===== Bugs =====
Line 80: Line 90:
 > 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? > 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! --- //[[user>Courtland]] 2017/10/5 04:44//
 +
 +> See ''imagemap/script.js'' lines # 29 and 30.\\ \\ <code js>    + 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 />")</code>
 +
 +
 +===== Third Party Plugin =====
 +==== Combo ====
 +To be able to work with [[plugin:combo|the combo plugin]], the links should be on a new line (not in a list). More [[https://combostrap.com/support/plugin#imagemapping|combo imagemapping support]]
plugin/imagemapping.1490162022.txt.gz · Last modified: 2017-03-22 06:53 by gamma

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki