Question

我在栅格上有一个图像映射。如果将鼠标悬停在正方形上，它会在图像地图的一侧显示一个信息。就像铬的魅力一样; Firefox更正确地显示了正方形...所以坐标不在这里。我是否必须对Firefox进行特殊的坐标检查？还是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>

和一些JS代码

$(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/

Answer 1

所以我想出了如何让它在每个浏览器中都能运行。首先，我将上面显示的html放在一个bootstrap网格容器中。

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

并改为js。

$(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();
});

所以现在每件浏览器中的一切都像魅力一样。

FF中的JS显示不同的输出

1 个答案: