如何在imageMap的精確座標處插入一個div

我有一個放置在div內的imageMap。當點擊特定區域時，我需要顯示一個疊加層，我已經使用絕對座標創建了div。我僅使用圖像創建了絕對座標，沒有使用其他標籤。如何在imageMap的精確座標處插入一個div

當網頁只有圖像標籤時，它可以很好地工作。當我將它與我所需要的相集成時，疊加層顯示在不同的位置。這裏是我的代碼：

我在做什麼錯？

要查看流程，請在加載此頁面後，單擊名爲「選擇受影響的區域」的元素，然後單擊圖像上的圓形區域中的任意一個。紅色疊加顯示在圖像的底部。

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> 
     <link rel="stylesheet" href="papaya.css"> 
     <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
     <script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script> 
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
     <script src="papaya.js"></script> 

     <style> 
      .jumbotron { 
       padding: 0.5em 0.6em; 
       h1 { 
        font-size: 2em; 
       } 
       p { 
        font-size: 1.2em; 
        .btn { 
         padding: 0.5em; 
        } 
       } 
      } 

      .menuItem { 
       background-color: #e0e0ff; 
       width:299px; 
       height:137px; 
       border:2px solid #000; 
      } 

      .fontSize { 
       padding-top:50px; 
       color: #00000; 
       font-family: Georgia, Times, serif; 
       font-size: 200%; 
       text-align: center; 
      } 
      .menuItem:hover { -moz-box-shadow: 0 0 50px #ccc; 
           -webkit-box-shadow: 0 0 50px #ccc; box-shadow: 0 0 50px #ccc; 
      } 

      .smallViewer { 
       margin-left:75px;width:700px;height:420px; 
      } 

      .left { 
       float: left; 
      } 

      #lymphNode img { 
       display: block; 
       margin-left: auto; 
       margin-right: auto; 
      } 


     </style> 
     <script> 
      $(document).ready(function() 
      { 
       $(".links").click(function() 
       { 
        $visible = $("divs:visible"); 
        $(".divs:visible").hide(); 
        $("#" + $(this).attr("data-showdiv")).show(); 
       }); 

       $("map#imageMap").click(function (event) { 
        var target = $(event.target); 
        var targetId = target.attr('id'); 
        var matches = targetId.match(/\d+/)[0]; 
        if($("#div"+matches).is(":visible")) 
         $("#div" + matches).hide(); 
        else 
        $("#div" + matches).show(); 
       }); 

       $('img').click(function (e) { 
        var offset = $(this).offset(); 
        var relativeX = (e.pageX - offset.left); 
        var relativeY = (e.pageY - offset.top); 
        alert(relativeX + ':' + relativeY); 

       }); 

      }); 
     </script> 
    </head> 

    <body> 
     <div class="container"> 
      <div class="jumbotron"> 
       <h2 style="text-align:center;">Head And Neck Therapy </h2> 
      </div> 

      <div style="width:1140px; height:550px;border:2px solid #000;"> 
       <div style="float: left"> 
        <div style="width:300px; height: 550px;display: inline-block;"> 
         <a href="#" class="links" data-showdiv="viewer"> <div class="menuItem fontSize"> Scan Images </div> </a> 
         <a href="#" class="links" data-showdiv="lymphNode"> <div class="menuItem fontSize"> Select Affected Region </div> </a> 
         <a href="#" class="links" data-showdiv="userForm"> <div class="menuItem fontSize"> Patient Details </div> </a> 
         <a href="#" class="links" data-showdiv="confirmation"> <div class="menuItem fontSize"> Confirmation </div> </a> 
        </div> 
       </div> 

       <div id="parentDiv" style="width:832px; height: 548px;display: inline-block;"> 
        <div class="divs smallViewer" style="display:none;" id="viewer"> 
         <div class="papaya"> </div> 
        </div> 

        <div id="lymphNode" class="divs" style="display:none;"> 
         <img src="image.jpg" width="500" height="500" alt="Planets" usemap="#imageMap"/> 
         <div id="div1" title="node1" style="width:13px;height:13px;position:absolute;top:185;left:325;background-color:#ff4c4c;opacity:0.5;display:none;"></div> 
         <div id="div2" title="node2" style="width:13px;height:15px;position:absolute;top:185;left:348;background-color:#ff4c4c;opacity:0.5;display:none;"></div> 
         <div id="div3" title="node3" style="width:15px;height:17px;position:absolute;top:219;left:241;background-color:#ff4c4c;opacity:0.5;display:none;"></div> 
         <div id="div4" title="node4" style="width:15px;height:17px;position:absolute;top:214;left:257;background-color:#ff4c4c;opacity:0.5;display:none;"></div> 
         <div id="div5" title="node5" style="width:15px;height:17px;position:absolute;top:249;left:252;background-color:#ff4c4c;opacity:0.5;display:none;"></div> 
         <div id="div6" title="node6" style="width:13px;height:15px;position:absolute;top:267;left:172;background-color:#ff4c4c;opacity:0.5;display:none;"></div> 
         <div id="div7" title="node7" style="width:13px;height:12px;position:absolute;top:253;left:180;background-color:#ff4c4c;opacity:0.5;display:none;"></div> 
         <div id="div8" title="node8" style="width:13px;height:12px;position:absolute;top:100;left:209;background-color:#ff4c4c;opacity:0.5;display:none;"></div> 
         <map id="imageMap" name="imageMap"> 
          <area shape="circle" coords="325,185,5" href="#" alt="Buccal Node" title="Buccal Node" id="node1"/> 
          <area shape="circle" coords="345,183,5" href="#" alt="Node 2" title="Parietal Node" id="node2"/> 
          <area shape="circle" coords="240,217,8" href="#" alt="Node 3" title="Node 3" id="node3"/> 
          <area shape="circle" coords="257,215,8" href="#" alt="Node 4" title="Node 4" id="node4"/> 
          <area shape="circle" coords="252,249,8" href="#" alt="Node 5" title="Node 5" id="node5"/> 
          <area shape="circle" coords="171,265,8" href="#" alt="Node 6" title="Node 6" id="node6"/> 
          <area shape="circle" coords="171,251,8" href="#" alt="Node 7" title="Node 7" id="node7"/> 
          <area shape="circle" coords="209,457,8" href="#" alt="Node 8" title="Node 8" id="node8"/> 
         </map> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

這是沒有任何div元素的代碼。僅限於純影像地圖。以獲得該區域的COORDS

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<style> 
.circleBase { 
    border-radius: 50%; 
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */ 
} 

.type1 { 
    width: 100px; 
    height: 100px; 
    background: yellow; 
    border: 3px solid red; 
} 
.type2 { 
    width: 50px; 
    height: 50px; 
    background: #ccc; 
    border: 3px solid #000; 
} 
.type3 { 
    width: 500px; 
    height: 500px; 
    background: aqua; 
    border: 30px solid blue; 
} 
</style> 
</head> 
<body> 

<div style="height:550px; width: 832px;"> 
<img src="image.jpg" width="500" height="500" alt="Planets" usemap="#imageMap"/> 
<div id="div1" title="node1" style="width:13px;height:13px;position:absolute;top:185;left:325;background-color:#ff4c4c;opacity:0.5"></div> 
<div id="div2" title="node2" style="width:13px;height:15px;position:absolute;top:185;left:348;background-color:#ff4c4c;opacity:0.5"></div> 
<div id="div3" title="node3" style="width:15px;height:17px;position:absolute;top:219;left:241;background-color:#ff4c4c;opacity:0.5"></div> 
<div id="div4" title="node4" style="width:15px;height:17px;position:absolute;top:214;left:257;background-color:#ff4c4c;opacity:0.5"></div> 
<div id="div5" title="node5" style="width:15px;height:17px;position:absolute;top:249;left:252;background-color:#ff4c4c;opacity:0.5"></div> 
<div id="div6" title="node6" style="width:13px;height:15px;position:absolute;top:267;left:172;background-color:#ff4c4c;opacity:0.5"></div> 
<div id="div7" title="node7" style="width:13px;height:12px;position:absolute;top:253;left:180;background-color:#ff4c4c;opacity:0.5"></div> 

<map id="imageMap" name="imageMap"> 
    <area shape="circle" coords="325,185,5" href="#" alt="Buccal Node" title="Buccal Node" id="node1"/> 
    <area shape="circle" coords="345,183,5" href="#" alt="Node 2" title="Parietal Node" id="node2"/> 
    <area shape="circle" coords="240,217,8" href="#" alt="Node 3" title="Node 3" id="node3"/> 
    <area shape="circle" coords="257,215,8" href="#" alt="Node 4" title="Node 4" id="node4"/> 
    <area shape="circle" coords="252,249,8" href="#" alt="Node 5" title="Node 5" id="node5"/> 
    <area shape="circle" coords="171,265,8" href="#" alt="Node 6" title="Node 6" id="node6"/> 
    <area shape="circle" coords="171,251,8" href="#" alt="Node 7" title="Node 7" id="node7"/> 
    </map> 
    </div> 
</body> 
<script> 
$(document).ready(function() { 
    $("#div1").hide(); 
    $("#div2").hide(); 
    $("#div3").hide(); 
    $("#div4").hide(); 
    $("#div5").hide(); 
    $("#div6").hide(); 
    $("#div7").hide(); 

    $("map#imageMap").click(function(event){ 
     var target = $(event.target); 
     var targetId = target.attr('id'); 
     var matches = targetId.match(/\d+/)[0]; 
     $("#div"+matches).show(); 
    }); 

    $('img').click(function(e){ 
     var offset = $(this).offset(); 
     var relativeX = (e.pageX - offset.left); 
     var relativeY = (e.pageY - offset.top); 
     alert(relativeX+':'+relativeY); 

    }); 
}); 
</script> 
</html>

來源

2015-11-01 chrisrhyno2003

我的imageMap正確地定位座標。這是離開位置的divs。如何更改上述功能幫助？ – chrisrhyno2003

一種方式點擊可讓每個區域的COORDS的陣列，然後檢查哪個區域指針的座標爲，點擊圖像時相匹配。看下面的代碼：

var areas = (function(){ 
    var areaCoords = []; 
    $('#imageMap area').each(function(){ 
     var coords = $(this).attr('coords').split(','); 
     areaCoords.push({ 
      x:coords[0], 
      y:coords[1] 
     }); 
    }); 

    return areaCoords; 
}()); 

$('img').click(function (e) { 
    var coords; 
    for (var i=areas.length-1;i>0;i-=1) { 
     if (e.offsetX >= areas[i].x && e.offsetY >= areas[i].y) { 
      coords = areas[i]; 
      break; 
     } 
    } 

    console.log(coords.x, coords.y); 
});

來源

2015-11-02 02:10:48 Sandeep

我不明白嗎？我爲什麼要比較座標？ – chrisrhyno2003

如何在imageMap的精確座標處插入一個div

回答

相關問題