asked on

How do I get ImageMapster to initialise properly?

Hi experts,

I am using the plugin (v. 1.2.4) from:

ImageMapster

I have declared it, along with jQuery in the head:

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.imagemapster.min.js"></script>

Open in new window

And it does fire this event on document load:

$(document).ready(function() {
    $('#ue-mapfield img').mapster({
        stroke: true,
        fillColor: '222222',
        render_highlight: {
            fillOpacity: 0.2
        },
        render_select: {
            fillOpacity: 0.8
        },
        fill: true,
        fillColor: '000000',
        fillOpacity: 0.2,
        strokeOpacity: 1,
        strokeWidth: 1,
        fade: true,
        fadeDuration: 150
    });
});

Open in new window

And finally, this is my area map:

<div id="ue-mapfield">
    <img id="Image-Maps_3201110252311064" src="images/australia.png" usemap="#_Image-Maps_3201110252311064" border="0" width="350" height="317" alt="" />
    <map id="_Image-Maps_3201110252311064" name="Image-Maps_3201110252311064">
        <area shape="poly" coords="215,145,239,145,239,172,305,177,309,173,318,174,326,181,331,177,342,175,344,148,329,129,326,117,322,113,299,85,291,60,286,54,286,44,279,33,271,36,266,12,260,1,251,17,246,52,238,63,220,53,217,46" href="#" alt="Queensland" title="Queensland"   />
        <area shape="poly" coords="240,173,237,219,246,222,264,241,277,241,289,243,290,252,301,257,307,243,321,225,322,217,332,210,337,198,344,176,336,174,327,181,319,177,312,174,302,178" href="#" alt="New South Wales" title="New South Wales"   />
        <area shape="poly" coords="237,220,236,259,245,261,255,267,267,258,273,268,288,262,303,260,292,250,290,242,281,241,272,240,265,240,256,232,247,225" href="#" alt="Victoria" title="Victoria"   />
        <area shape="poly" coords="234,259,240,145,139,144,142,200,154,194,162,199,173,203,182,210,192,223,202,221,209,209,205,230,207,239,218,236,228,243" href="#" alt="South Australia" title="South Australia"   />
        <area shape="poly" coords="216,51,215,145,138,144,133,39,139,37,134,34,140,24,144,17,159,12,161,3,173,6,182,8,193,11,207,10,203,22,193,37" href="#" alt="Northern Territory" title="Northern Territory"   />
        <area shape="poly" coords="141,201,134,40,126,40,116,29,103,31,95,46,86,55,80,63,74,58,68,81,48,92,32,100,15,109,4,121,1,143,8,156,4,162,18,183,25,200,31,217,28,230,37,237,57,237,63,228,72,224,100,223,102,214,119,204,129,202" href="#" alt="Western Australia" title="Western Australia"   />
        <area shape="poly" coords="263,288,275,293,286,289,286,303,282,312,273,315,265,307" href="#" alt="Tasmania" title="Tasmania"   />
    <!-- <area shape="rect" coords="348,315,350,317" href="http://www.image-maps.com/index.php?aff=mapped_users_3201110252311064" alt="Image Map" title="Image Map" /> -->
    </map>
</div>

Open in new window

My expectation is that it should highlight in the fill/stroke colours on mouseover over each area, but it doesn't. Can anyone see why? I'm not getting any errors.

Thanks.

Eddie Shipman

Do you have a link to your site so we can see it live?

Eddie Shipman

Also, have you tried contacting James at this email: James Treworgy <jamietre@gmail.com>

He has been very helpful to me in getting my stuff working.

agbnielsen

ASKER

I'm building this site on an internal intranet server at the moment, so no, but what I've provided here is everything I have produced for this whole section - so I would expect it to be more than enough to test with on your own local server.

I would also feel funny about emailing someone randomly via their private email unannounced and asking about a coding problem.

Eddie Shipman

No, because you didn't include the image. In order to see how it works, we need the map image as well.
James is the author of the plugin.

agbnielsen

ASKER

Ah, well, now that is a good point :)

The map image is attached - and I guess I could send James an email to bring this thread to his attention to see if he has any tips.

Thanks!

Eddie Shipman

He may not be a member, so he wouldn't be able to get to the content. I will take a look at it today.

ASKER CERTIFIED SOLUTION

Eddie Shipman

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

agbnielsen

ASKER

Hi all,

I'm sorry I abandoned and took so long to get back to this thread. James actually got back to me at my personal email, and it was very similar to what Eddie is saying here:

The basic problem is that "usemap" on your image does not map the name of the imagemap.

<img id="Image-Maps_3201110252311064" src="images/australia.png" usemap="#_Image-Maps_3201110252311064" border="0" width="350" height="317" alt="" />
<map id="_Image-Maps_3201110252311064" name="Image-Maps_3201110252311064">

The value of usemap must match the *name* attribute of the map, not the ID. So that should be 'usemap="#Image-Maps_3201110252311064"

If you need help in the future, I would be glad to help, and the easiest way to show me what you're working on is to set up an example using jsfiddle. Here's yours (I just linked to a random Australia image, so the map isn't exactly right).

http://jsfiddle.net/pvvxt/7/

There are a couple other things to note. You are setting "height" and "width" attributes on the image. If those attributes are the same as the native image size, just omit them. If not, use css instead: 'style="height: 317px; width: 350px;'

By default, if you are displaying an image at a size that is *not* it's native size, ImageMapster will resize the image map, assuming it was designed for the native image size. If this isn't what you want, you should use the "scaleMap: false" option, as I have in the example linked above. This will leave the image map alone.

Thanks for the help!!

Jesse.

Robert Saylor

This no longer works with jQuery 3.x but a modified repo does:
https://github.com/jamietre/ImageMapster/blob/master/dist/jquery.imagemapster.js