I'm trying to use the jQuery Mapster plugin to create an interactive image map on my HTML page. However, I'm encountering an error that says "'image.mapster is not a function'" in my browser's console. I've checked the script order, ensured jQuery is loaded, and followed the initialization steps provided in the documentation, but I'm still facing this issue.
Here's my code:
<!-- Image Map Generated by http://www.image-map.net/ -->
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.min.js"
></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script language="text/javascript" src="jquery.imagemapster.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<img id="vegetables" src="test.jpg" usemap="#image-map">
<map name="image-map">
<area target="" alt="312" name="carrots" title="312" href="" coords="830,841,924,780,992,921,910,962" shape="poly">
<area target="" alt="305" name="asparagus" title="305" href="" coords="1570,686,1664,686,1660,838,1568,842" shape="poly">
<area target="" alt="302" name="302" title="302" href="" coords="1855,684,1935,684,1937,838,1855,836" shape="poly">
<area target="" alt="309" name="309" title="309" href="" coords="1156,699,1275,686,1281,840,1187,857" shape="poly">
<area target="" alt="211" name="211" title="211" href="" coords="1031,996,1111,961,1144,1063,1074,1086" shape="poly">
<area target="" alt="209" name="209" title="209" href="" coords="1201,936,1293,922,1291,1045,1221,1049" shape="poly">
<area target="" alt="205" name="205" title="205" href="" coords="1570,1045,1664,1047,1664,920,1570,922" shape="poly">
<area target="" alt="2" name="2" title="2" href="" coords="1773,1262,1916,1260,1914,1070,1773,1072" shape="poly">
<area target="" alt="6" name="6" title="6" href="" coords="1379,1223,1472,1223,1472,1072,1379,1070" shape="poly">
<area target="" alt="10" name="10" title="10" href="" coords="1160,1285,1084,1117,998,1162,1107,1303" shape="poly">
<area target="" alt="12" name="12" title="12" href="" coords="912,1318,963,1252,926,1219,869,1289" shape="poly">
<area target="" alt="14" name="14" title="14" href="" coords="799,1473,824,1387,1004,1443,988,1500" shape="poly">
<area target="" alt="16" name="16" title="16" href="" coords="797,1586,984,1563,998,1621,818,1684" shape="poly">
<area target="" alt="18" name="18" title="18" href="" coords="859,1779,1023,1680,1062,1727,916,1852" shape="poly">
<area target="" alt="20" name="20" title="20" href="" coords="994,1924,1107,1764,1154,1791,1076,1971" shape="poly">
<area target="" alt="23" name="23" title="23" href="" coords="1275,2016,1377,2018,1373,1852,1279,1850" shape="poly">
<area target="" alt="28" name="28" title="28" href="" coords="1769,1854,1914,1852,1918,2018,1771,2016" shape="poly">
</map>
<div style="clear: both; width: 500px; height: 50px; border: 1px solid black;" id="selections"></div>
<script>
// a cross reference of area names to text to be shown for each area
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.';
$(document).ready(function() {
var image = $('#vegetables');
image.mapster(
{
fillOpacity: 0.4,
fillColor: "d42e16",
stroke: true,
strokeColor: "3320FF",
strokeOpacity: 0.8,
strokeWidth: 4,
singleSelect: true,
mapKey: 'name',
listKey: 'name',
onClick: function (e) {
var newToolTip = defaultDipTooltip;
// update text depending on area selected
$('#selections').html(xref[e.key]);
// if Asparagus selected, change the tooltip
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>
I've ensured that jQuery is loaded before the Mapster script, and I've followed the proper initialization steps. What could be causing this error, and how can I resolve it?
I'm trying to use the jQuery Mapster plugin to create an interactive image map on my HTML page. However, I'm encountering an error that says "'image.mapster is not a function'" in my browser's console. I've checked the script order, ensured jQuery is loaded, and followed the initialization steps provided in the documentation, but I'm still facing this issue.
