Search code examples
javascriptimagemap

JS within FF shows different output

I have a image map over a raster. If hover over an square it shows on the side of the image map an info. Works like a charm in chromium; Firefox shows the squares much more right ... so coordinates aren't right here. Do i have to do a special coordinate check for Firefox? or IE?

<body>
    <div id="map">
        <img src="" id="transparent_map" alt="" usemap="#denkmal_map" />
        <img src="http://img.freepik.com/freie-ikonen/quadratischen-raster-symbol_318-70847.jpg" alt="" />
        <map name="denkmal_map" id="denkmal_map">
            <area alt="" title="" href="#one" shape="rect" coords="7,4,44,43" />
            <area alt="" title="" href="#two" shape="rect" coords="45,3,85,42" />
            <area alt="" title="" href="#three" shape="rect" coords="87,3,125,41" />
            <area alt="" title="" href="#four" shape="rect" coords="6,46,45,83" />
            <area alt="" title="" href="#five" shape="rect" coords="43,45,85,83" />
            <area alt="" title="" href="#six" shape="rect" coords="87,44,124,84" />
            <area alt="" title="" href="#seven" shape="rect" coords="3,82,44,125" />
            <area alt="" title="" href="#eight" shape="rect" coords="46,86,84,125" />
            <area alt="" title="" href="#nine" shape="rect" coords="85,86,128,125" />
            <span id="backer"></span>
        </map>
        <ul>
            <li id="square"><a href="#">Selection</a>
            </li>
        </ul>
    </div>
</body>

And some JS code

$(this).mouseover(function(e) {
    var position = $(this).attr('coords').split(',');
    var x = +position[0] + $('map#denkmal_map').position().left;
    var y = +position[1] + 9; // $(this).parent().position().top;
    console.log('> ' + $(this).attr('coords') + ' > ' + x + '|' + y);
    console.log('> ' + $('map#denkmal_map').offset().left + '|' + ($('map#denkmal_map').height()));
    $('#backer').css({
        top: y - $('map#denkmal_map').position().top + 9,
        left: $('map#denkmal_map').position().left + 150
    });
    $('#square').css({
        top: y,
        left: x
    });
    $('#square').show();
});

https://jsfiddle.net/kwzoc73h/

Solution

  • So i figured it out how to make it work in every browser. First i put the html shown above with in a bootstrap grid container.

    <div class="container">
    <div class="row">
        <div class="col-xs-2"></div>
        <div class="col-xs-8" id='col-main'>
            <div id="map">
...

    and changed to js a little bit.

    $(this).mouseover(function (e) {
    var position = $(this).attr('coords').split(',');
    var y = +position[1] + 9;
    var mapX = $('map').offset().left - $('map').position().left;
    mapX = +position[0];

    var width = position[2] - position[0];
    var height = position[3] - position[1];

    $('#backer').css({top: y - 7, left: 220});
    $('#backer').show();

    $('#square').css({top: y - 9, left: mapX, width: width, height: height});
    $('#square').show();
});

    So now everything works like a charm, in every browser.