JS innerhalb FF zeigt unterschiedliche Ausgabe

Ich habe eine Bildkarte über ein Raster. Wenn Sie den Mauszeiger über ein Quadrat halten, wird auf der Seite der Imagemap eine Info angezeigt. Funktioniert wie ein Charme in Chrom; Firefox zeigt die Quadrate viel mehr richtig an ... also Koordinaten sind hier nicht richtig. Muss ich eine spezielle Koordinatenprüfung für Firefox durchführen? oder IE?JS innerhalb FF zeigt unterschiedliche Ausgabe

<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>

Und einige 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/

Quelle

2017-03-17 Luc

Also habe ich es heraus, wie es in jedem Browser funktioniert. Zuerst lege ich den oben gezeigten HTML-Code in einen 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"> 
...

und zu js ein wenig geändert.

$(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 jetzt funktioniert alles wie ein Charme, in jedem Browser.

Quelle

2017-03-28 05:51:03 Luc

JS innerhalb FF zeigt unterschiedliche Ausgabe

Antwort

Verwandte Themen