Imagemapster jQuery Plugin in Joomla-Collection of common programming errors

I’ve been trying to use the Imagemapster jQuery plugin into my Joomla page but is not possible.

Into the head of the index.php of the template I’ve put

This code works without problem.

Into an article I’ve put

$(document).ready(function () {
       var image = $('img');
       var xref = {
            carrots: "Carrots are delicious and may turn your skin orange!",
            asparagus: "Asparagus is one of the first vegetables of the spring. Being a dark green, it's great for you, and has interesting side effects.",
            squash: "Squash is a winter vegetable, and not eaten raw too much. Is that really squash?",
            redpepper: "Red peppers are actually the same as green peppers, they've just been left on the vine longer. Delicious when fire-roasted.",
            yellowpepper: "Similar to red peppers, yellow peppers are sometimes sweeter.",
            celery: "Celery is a fascinating vegetable. Being mostly water, it actually takes your body more calories to process it than it provides.",
            cucumbers: "Cucumbers are cool.",
            broccoli: "Broccoli is like a forest of goodness in your mouth. And very good for you. Eat lots of broccoli!",
            dip: "Everything here is good for you but this one. Don't be a dip!"
       };
       var defaultDipTooltip = 'I know you want the dip. But it\'s loaded with saturated fat, just skip it and enjoy as many delicious, crisp vegetables as you can eat.';

       image.mapster(
       {
            fillOpacity: 0.4,
            fillColor: "d42e16",
            strokeColor: "3320FF",
            strokeOpacity: 0.8,
            strokeWidth: 4,
            stroke: true,
            isSelectable: true,
            singleSelect: true,
            mapKey: 'name',
            listKey: 'name',
            onClick: function (e) {
                var newToolTip = defaultDipTooltip;
                $('#selections').html(xref[e.key]);
                if (e.key==='asparagus') {
                    newToolTip = "OK. I know I have come down on the dip before, but let's be real. Raw asparagus without any of that " +
                            "delicious ranch and onion dressing slathered all over it is not so good.";
                }
                image.mapster('set_options',{areas: [{
                    key: "dip",
                    toolTip: newToolTip
                    }]
                });
            },
            showToolTip: true,
            toolTipClose: ["tooltip-click", "area-click"],
            areas: [
                {
                    key: "redpepper",
                    fillColor: "ffffff"
                },
                {
                    key: "yellowpepper",
                    fillColor: "000000"
                },
                {
                    key: "carrots",
                    fillColor: "000000"
                },
                {
                   key: "dip",
                  toolTip: defaultDipTooltip
                },
                {
                   key: "asparagus",
                   strokeColor: "FFFFFF"
                }
                ]
        });
      });
      








     

As it shows on the demos page of the imagemapster plugin.

I’ve obtained the error: Uncaught TypeError: Object # has no method ‘ready’ ; and then I’ve solved changing $ by jQuery into the code.

However, the image doesn’t show changes and in the javascript console there is not errors.

What can I do? Where is the error?

Thanks in advance.

Fran

Originally posted 2013-11-15 09:08:22.