[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How do I get ImageMapster to initialise properly?

Posted on 2011-10-26
8
Medium Priority
?
3,066 Views
Last Modified: 2013-11-18
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.
0
Comment
Question by:agbnielsen
  • 5
  • 3
8 Comments
 
LVL 26

Expert Comment

by:EddieShipman
ID: 37040539
Do you have a link to your site so we can see it live?
0
 
LVL 26

Expert Comment

by:EddieShipman
ID: 37040566
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
 

Author Comment

by:agbnielsen
ID: 37042617
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 26

Expert Comment

by:EddieShipman
ID: 37045747
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
 

Author Comment

by:agbnielsen
ID: 37054274
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
 
LVL 26

Expert Comment

by:EddieShipman
ID: 37056862
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
 
LVL 26

Accepted Solution

by:
EddieShipman earned 2000 total points
ID: 37057100
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
 

Author Closing Comment

by:agbnielsen
ID: 37134813
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month18 days, 17 hours left to enroll

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question