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.
agbnielsenAsked:
Who is Participating?
 
Eddie ShipmanConnect With a Mentor All-around developerCommented:
It really looks like it had to do with your naming conventions. Give this a shot:

<html>
<head>
	<title>Aussie Map</title>
  <script type="text/javascript" src="/staging/assets/js/jquery-1.6.min.js"></script>
  <script type="text/javascript" src="jquery.imagemapster.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
      var $aussiemap,
      mapsterConfigured = function () {
          // set html settings values
          var opts = $aussiemap.mapster('get_options', null, true);
          $('#stroke_highlight').prop("checked", opts.render_highlight.stroke);
          $('#strokewidth_highlight').val(opts.render_highlight.strokeWidth);
          $('#fill_highlight').val(opts.render_highlight.fillOpacity);
          $('#strokeopacity_highlight').val(opts.render_highlight.strokeOpacity);
          $('#stroke_select').prop("checked", opts.render_select.stroke);
          $('#strokewidth_select').val(opts.render_select.strokeWidth);
          $('#fill_select').val(opts.render_select.fillOpacity);
          $('#strokeopacity_select').val(opts.render_select.strokeOpacity);
          $('#img_width').val($aussiemap.width());
      },
      default_options = {
        render_highlight: {
            fillOpacity: 0.2,
            fillColor: '222222',
            stroke: false
        },
        render_select: {
            fillOpacity: 0.8,
            fillColor: '000000',
            stroke: false
        },
        stroke: true,
        strokeOpacity: 1,
        strokeWidth: 2,
        fade: true,
        fadeInterval: 50,
        isSelectable: true,
        singleSelect: false,
        mapKey: 'state',
        onConfigured: mapsterConfigured,
        toolTipClose: ["area-mouseout"],
      };
      $aussiemap = $('#aussie_image');
      $.mapster.impl.init();
      $aussiemap.mapster(default_options);
      
  });
</script>
</head>

<body>
<div style="float:left;width:100%;">
  <img style="float:left;width:350px;border:0;" id="aussie_image" src="australia.png" usemap="#aussie-map" >
  <map id="aussie_image_map" name="aussie-map">
        <area href="#" state="Queensland"         full="Queensland"         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">
        <area href="#" state="New South Wales"    full="New South Wales"    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">
        <area href="#" state="Victoria"           full="Victoria"           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">
        <area href="#" state="South Australia"    full="South Australia"    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">
        <area href="#" state="Northern Territory" full="Northern Territory" 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">
        <area href="#" state="Western Australia"  full="Western Australia"  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">
        <area href="#" state="Tasmania"           full="Tasmania"           shape="poly" coords="263,288,275,293,286,289,286,303,282,312,273,315,265,307">
  </map>
</div>

</body>
</html>

Open in new window

0
 
Eddie ShipmanAll-around developerCommented:
Do you have a link to your site so we can see it live?
0
 
Eddie ShipmanAll-around developerCommented:
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.
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
agbnielsenAuthor Commented:
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.
0
 
Eddie ShipmanAll-around developerCommented:
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.
0
 
agbnielsenAuthor Commented:
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!
 Image Map
0
 
Eddie ShipmanAll-around developerCommented:
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.
0
 
agbnielsenAuthor Commented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.