Image Map plugin

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 Atlas Hârnica Map K5: Kaldor (East). Pages in the Atlas Ivinia and Atlas Keléstia sections use it on their own images as well. Not yet developed but planned are similar uses in the Hârn by map square and Ivinia by map square 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 below for details.

First, a raster image is uploaded to the wiki via the 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.

{{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}}

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.

• Atlas-Hârnica image map
• Atlas Ivinia image map
• Atlas Keléstia image map
• Hârn squares image map
• Ivinia squares image map

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.

/* 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
}

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.jsat the top was redirected relative to the new file location, and the opacity was boosted to the value desired.

/* 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
}