我一直在尝试在我的 Joomla 页面中使用 Imagemapster jQuery 插件，但这是不可能的。
进入我放置的模板的 index.php 的头部
<script type="text/javascript" src="/media/system/js/jquery.imagemapster.js"></script>
此代码可以正常工作。
在我放的一篇文章中
<script type="text/javascript">
$(document).ready(function () {
var image = $('img');
var xref = {
carrots: "<b>Carrots</b> are delicious and may turn your skin orange!",
asparagus: "<b>Asparagus</b> is one of the first vegetables of the spring. Being a dark green, it's great for you, and has interesting side effects.",
squash: "<b>Squash</b> is a winter vegetable, and not eaten raw too much. Is that really squash?",
redpepper: "<b>Red peppers</b> 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, <b>yellow peppers</b> are sometimes sweeter.",
celery: "<b>Celery</b> is a fascinating vegetable. Being mostly water, it actually takes your body more calories to process it than it provides.",
cucumbers: "<b>Cucumbers</b> are cool.",
broccoli: "<b>Broccoli</b> 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. <b>Don't be a dip!</b>"
};
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"
}
]
});
});
</script>
<p><img id="puzzle" src="images/primaria/puzzle_primaria_01.png" alt="" width="500" height="500" usemap="#puzzle" />
</p>
<p>
<map id="puzzle_map" name="puzzle"><area shape="poly" coords="123,117,130,115,141,111,155,105,166,96,171,89,170,78,163,73,159,67,157,54,161,46,167,44,173,44,178,44,183,45,186,53,189,56,192,65,199,66,212,62,220,57,228,49,233,49,236,54,242,57,248,63,254,71,259,79,260,85,260,90,258,96,248,102,242,107,236,113,236,121,239,128,244,132,252,136,261,136,272,125,277,118,282,118,288,120,292,126,297,132,299,138,301,145,303,153,304,158,301,163,291,173,284,179,278,183,270,188,261,192,253,192,245,189,242,185,240,178,242,175,239,167,229,168,220,171,214,175,210,181,209,187,210,196,215,200,218,205,221,211,220,219,214,226,209,229,204,233,196,236,192,226,190,216,185,205,179,200,173,197,160,196,153,199,147,204,144,210,141,214,132,212,125,209,119,202,119,194,123,188,129,181,134,182,141,179,148,175,150,166,145,155,142,146,136,141,130,132,123,121,123,116" href="#" /><area shape="poly" coords="116,121,123,130,131,144,137,151,143,164,144,173,139,177,132,179,124,183,116,189,115,197,118,207,125,213,129,215,138,216,145,212,150,205,154,199,161,198,169,199,176,205,182,214,186,222,189,231,191,238,184,242,173,247,162,251,152,255,140,260,130,268,129,275,134,280,142,285,147,288,150,294,152,301,150,307,147,313,140,316,131,317,125,314,123,307,121,296,121,287,115,284,107,288,98,293,95,298,89,304,83,310,78,310,70,303,61,294,49,277,48,269,51,268,58,267,63,264,66,258,66,251,64,245,61,238,54,233,46,232,40,235,35,240,34,246,31,251,24,254,19,250,14,243,9,233,6,226,5,211,6,202,9,193,17,186,25,175,32,167,43,166,48,165,51,170,51,179,51,186,55,192,60,194,65,194,75,194,77,190,78,188,81,182,82,176,82,166,77,160,72,156,69,152,65,146,66,137" href="#" /><area shape="poly" coords="200,239,208,235,218,228,225,218,226,212,225,206,222,202,219,200,216,195,213,190,213,189,213,183,214,181,217,180,220,175,224,174,228,174,233,173,237,172,239,173,239,176,239,180,239,184,242,188,246,193,252,194,258,195,262,193,268,192,273,189,282,183,293,176,305,164,308,165,310,168,313,173,322,179,331,189,337,197,341,203,343,209,343,213,334,219,324,226,321,233,322,238,324,244,327,248,330,253,334,254,338,254,345,251,349,246,354,243,358,238,361,238,367,237,369,240,372,246,375,252,375,257,377,264,377,269,378,272,375,276,370,279,362,282,356,287,347,291,339,296,334,303,334,308,338,311,344,316,348,320,352,325,355,331,355,337,353,342,351,345,346,349,341,350,335,350,330,348,325,342,322,334,321,327,317,323,311,319,307,319,302,320,298,323,292,328,287,333,283,336,278,342,272,346,266,345,260,340,252,336,245,331,238,325,233,317,234,312,238,308,244,305,249,302,253,299,257,294,258,288,258,285,258,281,255,279,252,274,250,272,244,271,236,271,230,271,228,275,224,278,224,281,218,286,215,286,210,282,208,273,205,265,202,256,199,245" href="#" /><area shape="poly" coords="84,318,92,327,97,333,100,338,104,343,108,350,110,358,109,362,104,364,103,365,101,365,94,365,89,368,84,372,81,379,82,388,84,392,88,399,96,399,101,398,105,396,111,390,115,385,119,382,126,382,128,383,131,387,132,391,135,400,138,407,140,412,144,419,148,427,152,427,157,427,164,425,169,424,177,421,189,420,197,417,203,413,206,412,209,407,213,402,213,394,210,385,205,379,202,376,197,369,194,365,196,356,200,354,205,354,205,351,207,351,212,350,218,350,222,353,225,356,228,360,231,366,233,370,235,374,237,378,239,379,241,381,244,381,247,382,251,376,254,370,257,367,261,359,268,353,268,349,262,346,257,345,253,341,244,336,237,327,230,322,228,313,229,307,233,307,238,302,239,301,240,301,242,301,249,297,255,290,253,279,248,275,244,274,238,275,232,277,227,283,225,286,221,290,214,290,209,287,206,282,205,276,201,267,199,256,196,245,191,243,182,249,174,251,164,255,152,261,140,265,132,268,132,271,135,278,143,282,148,283,153,290,153,296,155,300,156,305,156,309,152,315,146,320,141,320,131,320,126,316,121,312,120,309,118,304,119,296,118,290,115,289,110,289,103,294,99,296,97,304,89,310,86,313" href="#" /><area shape="poly" coords="314,152,320,149,323,149,328,149,337,149,342,150,351,148,359,139,364,133,365,128,365,121,360,116,356,112,350,107,348,103,347,98,351,93,357,89,363,86,367,86,370,86,374,89,376,92,378,96,380,102,380,105,385,112,388,116,392,116,396,114,399,111,403,106,406,101,410,95,415,88,420,83,424,79,427,79,427,82,429,84,430,92,430,93,433,99,436,105,439,110,442,114,448,120,452,120,460,117,464,107,471,106,476,106,484,106,490,113,490,117,489,124,483,130,477,133,469,137,467,141,464,147,465,151,466,152,467,159,470,162,478,169,481,173,485,177,489,181,493,187,492,191,489,195,486,200,483,205,479,212,475,215,468,218,463,219,457,219,454,216,454,213,452,208,453,200,451,195,446,192,439,192,430,192,425,196,422,203,422,206,424,212,428,216,432,221,435,225,438,231,439,236,438,240,434,245,425,249,420,252,410,256,400,261,394,265,388,271,381,271,380,266,379,258,378,250,375,243,371,235,366,234,361,235,356,238,349,242,346,246,341,250,335,251,328,247,326,239,324,231,329,225,336,221,345,217,348,210,348,205,343,198,336,190,331,184,323,179,319,172,312,164,311,153" href="#" /> </map>
</p>
正如它在 imagemapster 插件的演示页面上显示的那样。
我得到了错误： Uncaught TypeError: Object # has no method 'ready' ; 然后我解决了通过 jQuery 将 $ 更改为代码的问题。
但是，图像没有显示更改，并且在 javascript 控制台中没有错误。
我能做些什么？错误在哪里？
提前致谢。
弗兰