使用jquerycss頂部和左側動態分配影像映射？

我有一個影像映射，它有一個函式從 alt 屬性回傳文本。目前，pop 是一個名為 overlay 的 css 層，它被分配了頂部和左側坐標，這樣無論影像地圖上的哪個位置的彈出視窗都將始終處于相同的位置，但是我想知道是否有辦法分配頂部和左側，以便它最接近懸停在其上的影像地圖？

看起來像這樣，注意彈出視窗總是在左上角。

這是我從另一個 jfiddle 中配接器的代碼。

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
    <style id="compiled-css" type="text/css">
    #map {
        position: relative;
    }
    #overlay {
        position: absolute;
        background: #000;
        color: #fff;
        top: 50px;
        left: 50px;
    
        width: 100px;
    
    }
      </style>
    <div id="map">
        <div id="overlay"></div>
    <img src="https://i.imgur.com/f9HmUmf.jpg" alt="test" usemap="#g1">
    </div>
    
    <map name="g1">
      <area shape="rect" coords="0,0,100,100" alt="one" href="http://www.one.com">
      <area shape="rect" coords="100,0,200,100" alt="two" href="http://www.two.com">
      <area shape="rect" coords="200,0,300,100" alt="three" href="http://www.three.com">
      <area shape="rect" coords="300,0,400,100" alt="4" href="http://www.four.com">
      <area shape="rect" coords="400,0,500,100" alt="5" href="http://www.five.com">
      
      <area shape="rect" coords="0,100,100,200" alt="1b" href="http://www.onebottom.com">
      <area shape="rect" coords="100,100,200,200" alt="2b" href="http://www.twobottom.com">
      <area shape="rect" coords="200,100,300,200" alt="3b" href="http://www.threebottom.com">
      <area shape="rect" coords="300,100,400,200" alt="4b" href="http://www.fourbottom.com">
      <area shape="rect" coords="400,100,500,200" alt="5b" href="http://www.fivebottom.com">
    </map>    
    
    <script type="text/javascript">//<![CDATA[
    $('area').each(function(){
        var area = $(this),
            alt = area.attr('alt');
        area.mouseenter(function(){
            $('#overlay').html(alt);
        }).mouseleave(function(){
            $('#overlay').html('');
        });
    });
      //]]></script>

uj5u.com熱心網友回復：

您可以根據地圖坐標的和更改top和。以下將使覆寫貼在每個影像的頂部，但您可以根據需要添加偏移量。lefttopleft

$('area').each(function(){
    var area = $(this),
        alt = area.attr('alt');
    area.mouseenter(function() {
        // Grab the coords, then the top and left
        const coords = area.attr('coords').split(',')
        const top = parseInt(coords[1], 10)
        const left = parseInt(coords[0], 10)
        
        // Use `css()` to modify the top and left of the overlay
        $('#overlay').html(alt).css({
          top: `${top   40}px`,
          left: `${left}px`,
        })
    }).mouseleave(function(){
        $('#overlay').html('');
    });
});

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
    <style id="compiled-css" type="text/css">
    #map {
        position: relative;
    }
    #overlay {
        position: absolute;
        background: #000;
        color: #fff;
        top: 50px;
        left: 50px;
    
        width: 100px;
    
    }
      </style>
    <div id="map">
        <div id="overlay"></div>
    <img src="https://i.imgur.com/f9HmUmf.jpg" alt="test" usemap="#g1">
    </div>
    
    <map name="g1">
      <area shape="rect" coords="0,0,100,100" alt="one" href="http://www.one.com">
      <area shape="rect" coords="100,0,200,100" alt="two" href="http://www.two.com">
      <area shape="rect" coords="200,0,300,100" alt="three" href="http://www.three.com">
      <area shape="rect" coords="300,0,400,100" alt="4" href="http://www.four.com">
      <area shape="rect" coords="400,0,500,100" alt="5" href="http://www.five.com">
      
      <area shape="rect" coords="0,100,100,200" alt="1b" href="http://www.onebottom.com">
      <area shape="rect" coords="100,100,200,200" alt="2b" href="http://www.twobottom.com">
      <area shape="rect" coords="200,100,300,200" alt="3b" href="http://www.threebottom.com">
      <area shape="rect" coords="300,100,400,200" alt="4b" href="http://www.fourbottom.com">
      <area shape="rect" coords="400,100,500,200" alt="5b" href="http://www.fivebottom.com">
    </map>

如果您希望疊加層在懸停時“移動”，您可以更改css為animate并為其設定影片時間：

$('#overlay').html(alt).animate({
  top: `${top}px`,
  left: `${left}px`,
}, 100)

請注意，您需要更改 CSS 中的開始位置，以防止它在第一次懸停時從中心開始影片。

標籤：javascript html 查询

上一篇：Iformfile非法呼叫和空值

下一篇：如何在動態創建的選擇上輸入時將焦點移動到下一個元素