4

I'm still relatively new to javascript and jQuery so keep in mind that it may be an obvious solution that I don't see.

I referenced jQuery and it works fine for other things. Maybe there's something wrong with the imagemapster reference? I downloaded it here and I referenced it like this. I put the "imagemapster.min.js" in as well, but it doesn't work when both are in nor does it work when either of these are used by themselves.

<script type="text/javascript" src="../SiteAssets/css/jquery.imagemapster.js"></script>
<script type="text/javascript" src="../SiteAssets/css/jquery.imagemapster.min.js"></script>

I read the documentation and followed it almost exactly (see below), but it does literally nothing to the highlighting. Instead, it messes up their positioning a little bit which ruins the page, which makes no sense because mapster should have nothing to do with positioning. The clickable areas have also been shifted up and out of position. It doesn't even give any errors; the code just passes through and nothing happens except for what I said. And yes, the image maps I'm trying to highlight are fully functional and #downstairs, #upstairs, and #offices are indeed IDs of image tags like they're supposed to be.

$(document).ready(function()
{
    $('#downstairs').mapster({
        fillOpacity: 0.5,
        mapKey: 'alt',
        isSelectable: false,
        render_highlight:
        {
            fillColor: '2aff00'
        }
    });

    $('#upstairs').mapster({
        fillOpacity: 0.5,
        mapKey: 'alt',
        isSelectable: false,
        render_highlight:
        {
            fillColor: '2aff00'
        }
    });

    $('#offices').mapster({
        fillOpacity: 0.5,
        mapKey: 'alt',
        isSelectable: false,
        render_highlight:
        {
        fillColor: '2aff00'
        }
    });
});

This is the html for the images and the maps. All three of them use this format.

<div style="position:static;left:0px;top:0px">
<img id="downstairs" alt="downstairs" class="map" usemap="#downmap" style="visibility:visible;z-index:3; left: 10px; top: 54px;"
    src="sourceHere" width="1000" />
<map name="downmap" id="downmap">
    <!-- There is a large list of areas here that follow this format-->
    <area title="Portable 1" onclick="somefunction" coords="198,81,223,117" />
</map>
</div>
Baga Jr.
  • 153
  • 3
  • 6
  • 12
  • You should use `jquery.imagemapster.js` or `jquery.imagemapster.min.js`, but not both. The second is a "minified" version of the same code which is meant for production, not for development and testing. That said, it's a bit illogical to put JS code in a CSS directory. – Blazemonger Nov 05 '12 at 17:12
  • I suspected that, but it doesn't work even when I only use one of them. I'm not sure why, but everybody in my school puts their javascript and css stuff in this one folder for some reason. – Baga Jr. Nov 05 '12 at 17:35
  • If there's no errors in your JavaScript console, then there's two possibilities I can see: the selectors don't work, or the plugin doesn't work. Since you are using `$(document).ready`, are you sure that elements with those IDs exist and are of the right kind (`img` and not `map`)? – Blazemonger Nov 05 '12 at 18:02
  • The plugin should work; the place I got it from had a lot of demonstrations. Is there something about plugins that I don't understand or do I just have to download it and then reference it? And yes, I'm sure that I'm referencing the id of the img and not that of the map. But there are no errors so I don't know what's wrong. – Baga Jr. Nov 07 '12 at 15:13
  • I just realized that it DOES do something. It changes their positioning style for some reason and messes up the page a little bit. But mapster isn't supposed to mess with positioning at all; it's supposed to highlight. So why is it doing absolutely nothing with the highlighting yet doing something completely unrelated? I'll add this to the main question above. – Baga Jr. Nov 07 '12 at 15:29

4 Answers4

5

Check if your map areas have href defined. Ex: href="#"

Kert Kaelep
  • 163
  • 2
  • 8
  • Thanks a lot for your answer. You saved me from loosing another day and going crazy. – Mike Jul 28 '15 at 14:11
1

I had a similar issue until I moved my script underneath the map. I can't find it in the docs, but I remember reading that for the plugin to work, the image has to be loaded first. You'll still want to call the plugin in the head, but you'll want to put your javascript after the image map.

droo46
  • 114
  • 10
0

When I first tried ImageMapster, I didn't set the path correctly. Your area path has to wrap around the object from top to bottom, then left to right, then bottom to top until it meets again at the start. Once I did that, ImageMapster "did something". Before I had the path right, it looked like nothing was going on.

You also have to tell the image to use the map.

<div id="mapblock">
    <img id="map_image" src="/images/map.png" usemap="#map_map"/>
    <map name="map_map">
        <area data-key="AZ" full="item" href="#" coords="... " shape="poly" />
    </map>
</div>

Also, the ID# that you use in the code ought to be the ID of an image, not the ID of a map.

Also, make sure your map areas are WITHIN the image (you might have to set the width of the image, you know) else the hover effects won't show. When I first tried it, I didn't see anything until I made sure my areas were in the right places.

I wrote a mini-tutorial here for generating the image-map with Photoshop and Illustrator. This worked very well for me, and the image-map was in the exact perfect place.

[after OP posted imagemap html]

<area title="Portable 1" onclick="somefunction" coords="198,81,223,117" />

Ah, your coords much match, I think. Think of the coords as a line. You have described the start of the line plus one other point - you have to tell it to make a full loop. Try this instead and see what happens:

'coords="198,81, 223,117, 198,81"

Community
  • 1
  • 1
bgmCoder
  • 6,205
  • 8
  • 58
  • 105
  • Yes, I am telling the image to use the map, the image map works perfectly without imagemapster. Can you clarify what you meant by that area path stuff because I don't understand it at all? – Baga Jr. Dec 14 '12 at 16:42
  • What I mean is this: the first x & y coordinates must be the same as the last ones. I'll add some more details to my answer, too. – bgmCoder Dec 14 '12 at 20:56
  • Ah, and you seem to have added jquery twice. You only need to add one - it works fine for me with just the .min version. I think that adding it twice may mess things up. – bgmCoder Dec 14 '12 at 20:59
  • The problem isn't with the image map itself. The areas are all within the image and I set the width of the image and it all works correctly on its own. So I'm assuming I'm doing that area path stuff correctly, whatever it is. And I'm only importing one kind of jquery at a time. So far, I've just been taking the pixel locations and just stuffing those into the coords property. Do you think I should redo all of that by going into photoshop and cutting up the image and following your tutorial or do you have a solution for the way I'm doing it? Keep in mind, there's almost 100 different areas. – Baga Jr. Jan 09 '13 at 16:03
  • Maybe you can post the imagemap code? I can't really tell you much more without seeing it. I DO know that when I tried it, it would not work until I had the x-y coords correct. When I exported like in my mini-tutorial, the coords lined up correctly with my image - that was one problem solved, the other was the way the first coord and the last coord, well, coordinated... – bgmCoder Jan 09 '13 at 17:16
  • I added the html for the images and the maps. Sorry that I didn't respond for such a long time, we had a break for three weeks. – Baga Jr. Jan 11 '13 at 16:38
  • I tried your suggestion but it didn't change anything; the area wasn't even clickable. But I understood what you meant so I changed it to "198,81, 223,81, 223,117, 198,117" and the image map worked again, but imagemapster still isn't doing the highlighting. Are you sure there's nothing wrong with my javascript? – Baga Jr. Jan 14 '13 at 17:41
  • I'm not sure this matters, but just in case, I'll add that the version I'm using is 1.2.6 – Baga Jr. Jan 14 '13 at 17:51
  • When I first did this, I found that the image map I made was actually off by 200 pixels or so on the y coordination - which meant it was working, but not in the visible area. When I went through the photoshop steps like in my tutorial, the coords matched perfectly with my image. Since nothing else has worked so far, maybe you should try that. – bgmCoder Jan 14 '13 at 20:10
  • I never figured out imagemapster, but I used maphilight instead and it worked out. I'm not sure what to do with this question now though. – Baga Jr. May 24 '13 at 17:49
  • Ah, too bad you couldn't get it working. I don't know what to do with this question either. I gave you a +1, however. – bgmCoder May 27 '13 at 16:08
0

for imagemapster use jquery 2.1.3

<!-- not this
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> -->

<!-- use this one -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

for imagemapster

<script src="http://www.outsharked.com/scripts/jquery.imagemapster.js"></script>

same happens for me imagemap hover not showing or working at last after changing the version it works fine.

for reference try below code:

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> -->

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script src="http://www.outsharked.com/scripts/jquery.imagemapster.js"></script>

<div style="clear: both; width: 500px; height: 50px; border: 1px solid black;" id="selections"></div>
<img id="vegetables" src="http://www.outsharked.com/imagemapster/examples/images/vegetables.jpg" usemap="#veg">
<map id="veg_map" name="veg">
    <area shape="poly" name="redpepper" coords="412,156, 427,161, 429,163, 444,153, 453,155, 457,159, 452,168, 459,174, 455,178, 460,179, 463,193, 460,203, 441,214, 436,217, 458,238, 469,257, 479,267, 478,269, 479,285, 458,309, 436,310, 414,305, 410,323, 397,334, 379,313, 389,316, 401,320, 399,305, 382,300, 371,290,
    367,296, 366,298,
    338,274, 332,272, 300,239, 316,238, 316,234, 313,230, 328,225, 333,213, 338,196, 333,181, 337,166, 345,145" href="#">
    <area shape="poly" name="celery" coords="147,131, 156,143, 163,146, 177,129, 175,138, 177,138, 182,144, 180,164, 148,169, 139,171, 144,180, 141,198, 139,208, 140,222, 127,237, 148,216, 163,212, 166,216, 160,223, 163,233, 153,281, 135,318, 129,313, 122,322, 117,320, 99,301, 98,293, 85,300, 80,303, 74,300,
    64,285, 76,272, 98,249,
    94,246, 72,261, 57,258, 62,251, 60,248, 47,228, 51,207, 71,195, 72,192, 38,202, 33,195, 30,173, 147,127" href="#">
    <area shape="poly" name="carrots" coords="175,74, 170,80, 154,85, 189,103, 190,111, 182,111, 179,98, 157,95, 142,111, 140,128, 38,169, 39,163, 74,143, 74,141, 56,135, 52,115, 79,111, 78,106, 63,98, 71,91, 81,88, 82,83, 91,75, 136,74, 174,70" href="#">
    <area shape="poly" name="asparagus" coords="224,25, 239,33, 244,36, 247,32, 327,23, 344,31, 343,36, 319,41, 315,42, 302,52, 272,61, 265,64, 270,73, 256,67, 248,60, 187,55, 192,58, 192,60, 184,64, 185,67, 176,67, 173,69, 142,67, 146,63, 135,59, 123,57, 142,44, 145,42, 143,39, 145,32, 207,38, 185,18, 212,19,
    220,22" href="#">
    <area shape="poly" name="squash" coords="388,26, 391,38, 394,43, 395,46, 425,58, 427,68, 428,92, 386,125, 371,132, 374,124, 377,118, 374,105, 371,105, 370,107, 364,102, 368,97, 356,87, 353,89, 348,86, 322,87, 314,100, 314,102, 282,85, 278,84, 273,74, 272,68, 319,46, 346,31" href="#">
    <area shape="poly" name="yellowpepper" coords="237,222, 246,254, 255,291, 262,323, 271,322, 285,350, 306,352, 307,365, 298,374, 285,366, 270,375, 249,378, 244,384, 231,389, 215,373, 210,363, 203,357, 199,368, 184,361, 175,349, 162,356, 140,340, 143,305, 161,252, 168,224, 188,240, 194,223, 198,232, 213,226, 224,224,
    229,218" href="#">
    <area shape="poly" name="broccoli" coords="341,89, 342,91, 360,95, 353,100, 360,104, 364,109, 368,115, 369,112, 367,110, 376,111, 373,123, 367,128, 362,128, 359,131, 348,134, 345,137, 340,138, 341,148, 334,167, 323,172, 315,165, 315,162, 312,165, 311,172, 293,167, 292,141, 298,136, 307,134, 322,129, 328,128,
    329,116, 319,109, 314,104,
    317,93, 332,84" href="#">
    <area shape="poly" name="broccoli" coords="328,178, 338,197, 337,202, 330,215, 328,217, 325,228, 307,234, 305,239, 287,225, 287,216, 286,212, 282,216, 277,212, 277,185, 284,179, 310,175" href="#">
    <area shape="poly" name="dip" coords="253,102, 277,100, 280,105, 290,107, 295,111, 304,130, 290,140, 287,147, 240,157, 238,159, 227,153, 203,146, 198,125, 200,116, 214,102, 231,102" href="#">

</map>

<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.';

    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>
vishal
  • 462
  • 1
  • 5
  • 12