Image Map plugin [HârnWiki]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Image Map plugin ======

[[doku>plugin:imagemapping|Image Map plugin page]]

This is used to make the map of Hârn work to link pages dedicated to particular Atlas Hârnica maps, such as in [[works:atlas_harnica:atlas_harn_k05]]. Pages in the [[works:atlas_ivinia:|Atlas Ivinia]] and [[works:atlas_kelestia:|Atlas Keléstia]] sections use it on their own images as well. Not yet developed but planned are similar uses in the [[:harn:squares:]] and [[:ivinia:squares:]] sections.

This plugin is a bit wonky. Sometimes the desired areas don't align with the image as they should if the image has been resized to fit the page. Usually, refreshing the page in the browser a time or two (or three, or…) will set it right.

It has also been hacked to make the shaded portion under the cursor more visible. Be aware that this will have to be redone upon updating the plugin. See [[#plugin_modifications|below]] for details.

===== Basic use =====

First, a raster image is uploaded to the wiki via the [[doku>media_manager|Media Manager]]. An opening ''%%{{map>...}}%%'' tag links to it. A list follows mapping links to pixel-defined regions within the image. At the end, a closing ''%%{{<map}}%%'' tag follows the list.

<code>
{{map>works:atlas_harnica:harn_image_map_atlas_100.png}}
  * [[works:atlas_harnica:atlas_harn_open_sea   |Atlas Hârnica Map A1: Sea of Itikir                       @32,36,95,97]]

    ...

{{<map}}
</code>

===== Use with include plugin =====

In all of the cases in HârnWiki, the same image map has been employed at the bottoms of many similar pages. This heavily favors making one master page for each and using the [[include_plugin]] to put them everywhere they need to go. Perhaps they're stable now, but making the same change to the list of links on many pages got old fast.

A wiki can never have too many links, so here they are.

  * [[inclusions:atlas_harnica]]
  * [[inclusions:atlas_ivinia]]
  * [[inclusions:atlas_kelestia]]
  * [[inclusions:harn_squares]]
  * [[inclusions:ivinia_squares]]

===== Plugin modifications =====

The file, ''/lib/plugins/imagemapping/scripts.js'', controls much of the action. Unfortunately, the value given for the opacity of the selected region under the cursor is too low to be readily seen.

<code javascript [enable_line_numbers="true", highlight_lines_extra="8"]>
/* DOKUWIKI:include_once jquery.imagemapster.js */

(function($){

    $(function(){
        $('img[usemap]').mapster({
            fillColor: 'ffffff',
            fillOpacity: 0.1,
            wrapClass: true,
            wrapCss: true,
            clickNavigate: true
        });
    });

    $(window).resize(function(){
        $('img[usemap]').each(function() {
            $(this).mapster('resize', $(this.offsetParent).width());
        });
    });

})(jQuery);

function addBtnActionImagemap(btn, props, edid) {
  // Not implemented yet
}
</code>

To remedy this, the file was first renamed ''scripts.js.dist''. Trouble arose with it interfering with the replacement file if it was left in place. If the plugin is updated and the original file restored, this may be why the selected area is hard to see again.

The file contents were then copied to a new location at ''/conf/userscript.js''. This was done to protect the change from being overwritten by subsequent updates to the plugin. There is currently no other custom use of javascript in HârnWiki, so the file was created for this purpose and is otherwise clean.

Two modifications were made: the link to ''jquery.imagemapster.js''at the top was redirected relative to the new file location, and the opacity was boosted to the value desired.

<code javascript [enable_line_numbers="true", highlight_lines_extra="1,8"]>
/* DOKUWIKI:include_once ../lib/plugins/imagemapping/jquery.imagemapster.js */

(function($){

    $(function(){
        $('img[usemap]').mapster({
            fillColor: 'ffffff',
            fillOpacity: 0.4,
            wrapClass: true,
            wrapCss: true,
            clickNavigate: true
        });
    });

    $(window).resize(function(){
        $('img[usemap]').each(function() {
            $(this).mapster('resize', $(this.offsetParent).width());
        });
    });

})(jQuery);

function addBtnActionImagemap(btn, props, edid) {
  // Not implemented yet
}
</code>