ImageMapper Not working due to JQUERY or HTML

Question

I was following this jsfiddle: http://jsfiddle.net/nYkAG/396/ it works perfectly well.

Code Below:

<img id="beatles" src="http://www.outsharked.com/imagemapster/examples/images/beatles_basic.jpg" 
style="width:400px;height:240px;" usemap="#beatles-map">
  <map name="beatles-map">
    <area shape="rect" data-name="paul,all" coords="36,46,121,131" href="#" />
    <area shape="rect" data-name="ringo,all" coords="113,76,198,161" href="#" />
    <area shape="rect" data-name="john,all" coords="192,50,277,135" href="#" />
    <area shape="rect" data-name="george,all" coords="262,60,347,145" href="#" />
  </map>

<div id="beatles-caption" style="clear:both;border: 1px solid black; width: 400px; padding: 6px; display:none;">
 <div id="beatles-caption-header" style="font-style: italic; font-weight: bold; margin-bottom: 12px;"></div>
 <div id="beatles-caption-text"></div>
</div>​

However, why is this not wokring for this index1.html (test)?

http://nina-naustdal.com/index1.html

Thanks for your assistance

Answer 1

Looking at your page, I do not see the JavaScript that accompanies the jsFiddle.

I see a plugin called 'imagemapster', but it does not seem to relate to the code in your fiddle example.

Further investigation confirms that you have not included the relevant JavaScript from the JS window in the fiddle.

You need to add this script:

// javascript
// Set up some options objects: 'single_opts' for when a single area is selected, which will show just a border
// 'all_opts' for when all are highlighted, to use a different effect - shaded white with a white border
// 'initial_opts' for general options that apply to the whole mapster. 'initial_opts' also includes callbacks
// onMouseover and onMouseout, which are fired when an area is entered or left. We will use these to show or
// remove the captions, and also set a flag to let the other code know if we're currently in an area.
var inArea, map = $('#beatles'),
    captions = {
        paul: ["Paul McCartney - Bass Guitar and Vocals",
                                                                                            "Paul McCartney's song, Yesterday, recently voted the most popular song "
                                                                                              + "of the century by a BBC poll, was initially composed without lyrics. "
                                                                                              + "Paul used the working title 'scrambled eggs' before coming up with the final words."],
        ringo: ["Ringo Starr - Drums",
                                                                                          "Dear Prudence was written by John and Paul about Mia Farrow's sister, Prudence, "
                                                                                            + "when she wouldn't come out and play with Mia and the Beatles at a religious retreat "
                                                                                            + "in India."],
        john: ["John Lennon - Guitar and Vocals",
                                                                                          "In 1962, The Beatles won the Mersyside Newspaper's biggest band in Liverpool "
                                                                                            + "contest principally because they called in posing as different people and voted "
                                                                                            + "for themselves numerous times."],
        george: ["George Harrison - Lead Guitar and Vocals",
                                                                                         "The Beatles' last public concert was held in San Francisco's Candlestick "
                                                                                            + "Park on August 29, 1966."]
    },
    single_opts = {
        fillColor: '000000',
        fillOpacity: 0,
        stroke: true,
        strokeColor: 'ff0000',
        strokeWidth: 2
    },
    all_opts = {
        fillColor: 'ffffff',
        fillOpacity: 0.6,
        stroke: true,
        strokeWidth: 2,
        strokeColor: 'ffffff'
    },
    initial_opts = {
        mapKey: 'data-name',
        isSelectable: false,
        onMouseover: function(data) {
            inArea = true;
            $('#beatles-caption-header').text(captions[data.key][0]);
            $('#beatles-caption-text').text(captions[data.key][1]);
            $('#beatles-caption').show();
        },
        onMouseout: function(data) {
            inArea = false;
            $('#beatles-caption').hide();
        }
    };
opts = $.extend({}, all_opts, initial_opts, single_opts);


// Bind to the image 'mouseover' and 'mouseout' events to activate or deactivate ALL the areas, like the
// original demo. Check whether an area has been activated with "inArea" - IE<9 fires "onmouseover"
// again for the image when entering an area, so all areas would stay highlighted when entering
// a specific area in those browsers otherwise. It makes no difference for other browsers.
map.mapster('unbind').mapster(opts).bind('mouseover', function() {
    if (!inArea) {
        map.mapster('set_options', all_opts).mapster('set', true, 'all').mapster('set_options', single_opts);
    }
}).bind('mouseout', function() {
    if (!inArea) {
        map.mapster('set', false, 'all');
    }
});