1

I'm using ImageMapster to simply modify an image map on hover. However, I'm encountering some issues both with my image map and with the imagemapster plug in. My problems are:

1) Even though I've defined a height and width for my image, its size seems to change across browsers. In Chrome, the defined polygons are the perfect size, but in Firefox they are way too small.

2) For some reason, the ImageMapster plugin is not working in Chrome.

Below is my code: 

<script type="text/javascript">
    $(document).ready(function() {                                               
        $('#waterfall').mapster({
            singleSelect: true,
            clickNavigate: true,
            fill: true,
            fillColor: '000000',
            fillOpacity: 0.5,
        });
    });
</script>

<div class="chartmap">
    <img id="waterfall" src="waterfall_diagram/waterfall.png" width="650" height="72" usemap="#water" alt="Waterfall Methodology Map">                                             
    <map name="water">
        <area shape="poly" coords="6,3,72,3,96,37,72,69,4,69,30,37,6,3" href="waterfall_project_initiation.html" alt="Project Initiation">
        <area shape="poly" coords="75,3,165,3,188.5,37,164,69,74,69,100,37,75,3" href="waterfall_demand_management.html" alt="Demand Management">
        <area shape="poly" coords="167,3,236.5,3,261,37,236.5,69,167,69,192,37,167,3" href="waterfall_definition.html" alt="Definition">
        <area shape="poly" coords="240,3,326,3,350,37,326,69,240,69,264,37,240,3" href="#" alt="Requirements Analysis">
        <area shape="poly" coords="329,3,380,3,405,37,380,69,329,69,353,37,329,3" href="#" alt="Design">
        <area shape="poly" coords="384,3,430,3,455,37,430,69,384,69,408,37,384,3" href="#" alt="Build">
        <area shape="poly" coords="434,3,483,3,509,37,484,69,433,69,458,37,434,3" href="#" alt="Test">
        <area shape="poly" coords="487,3,557,3,583,37,558,69,488,69,511,37,487,3" href="#" alt="Deployment">
        <area shape="poly" coords="561,3,621,3,646,37,621,69,561,69,586,37,561,3" href="#" alt="Closure">
    </map>
</div>

Here's a demo: http://jsfiddle.net/t6K8X/5/

If you run it in Chrome, a click will cause outlines to come up around the image and you will see that the polygons are the correct size. However, nothing will occur on hovering like it should. In Firefox, hovering will cause the darker polygons to appear, but they will be way too small.

Any suggestions are much appreciated. Thank you!!!

stamblerre
  • 263
  • 1
  • 4
  • 11
  • you have no css for on hover? – Rachel Gallen Jun 19 '14 at 15:15
  • do i need to have it? i'm using imagemapster which does it automatically and i don't think that hovering is supported for image maps – stamblerre Jun 19 '14 at 15:20
  • i've never used that tool b4 i always make image maps in dreamweaver but i would expect on hover css. – Rachel Gallen Jun 19 '14 at 15:23
  • imagemapster is a plugin that does the hovering for you since hovering over an area in an image map isn't supported. if you open the demo in firefox, you'll see that it works correctly - just over the wrong area size – stamblerre Jun 19 '14 at 15:25
  • i see the problem. is it like that live? maybe it's just like that in the fiddle. i had a fella yesterday who couldn't get his video to work on localhost but live it was fine. – Rachel Gallen Jun 19 '14 at 15:27
  • see this discussion it may be of help https://github.com/jamietre/ImageMapster/issues/47 also this fiddle http://jsfiddle.net/9G2AR/1/ the fiddle uses an alternate image – Rachel Gallen Jun 19 '14 at 15:33

1 Answers1

1

  1. In chrome ImageMapster is not loading. See the script errors:

    Refused to execute script from        
'https://raw.githubusercontent.com/jamietre/ImageMapster/
   e08cd7ec24ffa9e6cbe628a98e8f14cac226a258/dist/jquery.imagemapster.min.js' 
because its MIME type ('text/plain') is not executable, 
and strict MIME type checking is enabled.

  2. In Firefox, which apparently cares less about this stuff, it is loading, but the image map does not match the size at which you are displaying the image.

The image itself is 1024x72 pixels. You are displaying it at 650x72 pixels. ImageMapster, by default, assumes that the imagemap matches the native size of the image, and as a result, is scaling the map you provided down by about 40%.

There are several ways to fix this.

  1. You can provide an imagemap that matches the native image, and let ImageMapster do its thing.
  2. You can resize the image to match your existing imagemap & the display size.
  3. You can disable the map scaling functionality with the scaleMap option:

http://jsfiddle.net/LgFn7/

scaleMap: false
Jamie Treworgy
  • 23,934
  • 8
  • 76
  • 119
  • thank you so much for your help! everything is working great now :) I realized that i was using a bad link and found a better one that works now. you've really saved me a lot of time, thank you! – stamblerre Jun 19 '14 at 17:16