Overview

Overview of Image Mapster and basic usage

Introduction

Image Mapster: A Jquery Plugin to make image maps useful.

Project home page. http://www.outsharked.com/imagemapster

See an online demo.http://www.outsharked.com/imagemapster/demo1.aspx

Details

Compatible with IE 6-9, FF 2-4, Safari 3+, Chrome 10, Opera 9-10

Comments or questions? Please leave them on my blog post about [http://www.outsharked.com/imagemapster ImageMapster]

Though this is a major rewrite, this was based on code originally written by David Lynch for his plugin http://davidlynch.org/js/maphilight/docs/. His code provided the inspiration for this plug-in as well as the core rendering algorithms.

This example shows a usage incorporating most of the options.

var img = $('#usa_image');

img.mapster({
isSelectable: true,         // areas can be selected/deselected
mapKey: 'title',            // the attribute on each area tag that identifies
                                // it uniquely (or as part of a group with the same value)
mapValue: 'full',           // a user-defined attribute on the area tag that will be passed
                                // in onGetList - can be used for quick and dirty listmaking
listKey: 'name',            // the attribute on the list elements that matches it with 
                                // mapKey
listSelectedAttribute:      // an attribute that will be created or removed from the list element
'checked',                  // matching an area when it is selected or deselected
onGetList: buildStateList,  // a function to build a list from the areas
onClick: 
styleElementWrapper         // event when item is clicked
showToolTip: true,          // enable tooltips for the map, individual data is provided
                                // in jQuery data("mapster") associated with area tags
toolTipContainer: 
getToolTipContainer();      // HTML or jQuery object that will be rendered for tooltips
sortList: "asc"             // the list of values will be sorted when passed to onGetList function
});

// define toolTip text for certain areas.

$('area[title=OK]').data("mapster", { toolTip: "Oklahoma is OK!" });
$('area[title=TX]').data("mapster", { toolTip: "Don't mess with Texas." });
$('area[title=AK]').data("mapster", { toolTip: "It is cold in Alaska...." });

// Set these states to be initially selected

img.mapster('set',true,'AR,AZ,OK,ME');

// function to do some other stuff when the item is selected, if the action on the
// list element itself is not enough

function styleElementWrapper(area,object_data) {
    if (object_data.selected) {
      listTarget.parent().addClass('selected');
    } else {
      listTarget.parent().removeClass('selected');
    }
}

// basic html to use for the tooltips

function getToolTipContainer() {
  return $('<div style="border: 2px solid black; background: #EEEEEE; 
      position:absolute; width:160px; padding:4px; margin: 4px;"></div>');
}

// using the callback to create the associated list

function buildStateList(data) {
    for (var i = 0; i < data.length; i++) {
	var item = $('<div><input type="checkbox" name="' + data[i].key + '">' 
	  + data[i].value + '</div>');
	stateslist.append(item);
    }
    /// return the actual elements that you want to be part of the list -- not a container.
    return stateslist.find("input:checkbox");
};