Question

我有一个问题，我试图在点击时将div分配给特定的区域坐标并显示它。但是没有用。

＆＃13;

$(function() {
  $('.list-group a').on('click', function(e) {
    e.preventDefault();
    $('.hide').hide();
    $('.' + this.id).show();
  });
});

＆＃13;

.dropdowntest-content {
  position: absolute;
  display: none;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<map class="list-group" name="map"> 
    <area id="section-1" class="list-group-item" shape="rect" 
    coords="198,368,142,337" href="#section-1" />
</map>

<img alt="Picture1" src="http://via.placeholder.com/680x466/444444/DDDDDD?text=Placeholder"
    width="680" height="466" usemap="map" data-cms="{'contentId':95875}" />`

<div class="dropdowntest-content hide section-1">
  <p>Hello
  </p>
</div>

＆＃13;

Answer 1

您的代码中有一些错误。

第一个是img标记没有使用地图，因为它在#中缺少use-map: #map。

您还在不必要地隐藏了div点击。并且您引用了一个不存在的a标记。

＆＃13;

(function($) {
  $('.list-group area').on('click', function(e) {

    $('.' + this.id).toggleClass('show');
  });
})(jQuery);

＆＃13;

.dropdowntest-content {
  position: absolute;
  display: none;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 10;
  top: 0;
  left: 0;
}

.show {
  display: block;
}

area {
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<map class="list-group" name="map"> 
    <area id="section-1" class="list-group-item" shape="rect" 
    coords="0,0,200,200" />
</map>

<img alt="Picture1" src="https://placehold.it/680x466" height="466" width="680" usemap="#map" data-cms="{'contentId':95875}" />

<div class="dropdowntest-content section-1">
  <p>Hello
  </p>
</div>

＆＃13;

Answer 2

$(function() {
  $('.list-group area').on('click', function(e) {    
    e.preventDefault();
    var position = $(this).offset();
    $('.hide').css({
      left: position.left,
      top: position.top
     }).show();
  });
});

.dropdowntest-content {
  position: absolute;
  display: none;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

area,
area:link,
area:hover,
area:active,
area:focus {
  outline: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<img alt="Picture1" src="https://picsum.photos/466/680" height="466" width="680" usemap="#map" data-cms="{'contentId':95875}" />

<map class="list-group" name="map"> 
    <area id="section-1" class="list-group-item" shape="poly" coords="30,100, 140,50, 290,220, 180,280" href="#section-1" />
</map>


<div class="dropdowntest-content hide section-1">
  <p>Hello
  </p>
</div>

Answer 3

您可以编辑代码以适合您的解决方案。

CSS

#container {
    width: 500px;
    height: 500px;
    border: 1px solid gray;
  }

  .hide {
    display: none;
  }

  .dropdowntest-content {
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    border: 1px solid lightgray;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
  }

JAVASCRIPT

//get element that contain the map
    var target = document.getElementById("container");
    var dropdown = document.getElementById("dropdownmenu");

    //listen to user mouse click
    target.addEventListener("contextmenu", function(e){

      e.preventDefault();

      //click mouse position relative to container
      var clk_x_pos = e.pageX - e.currentTarget.offsetLeft;
      var clk_y_pos = e.pageY - e.currentTarget.offsetTop;

      //position the drop down menu
      dropdown.setAttribute(
        "style", "top: " + clk_y_pos + "px; left: " + clk_x_pos + "px;"
      );

      //display the menu
      dropdown.setAttribute("class", "dropdowntest-content section-1");

      //prevent the default from showing
      return false;

    }, false);

    //hide the drop down menu
    target.addEventListener("mousedown", function(e){
      //hide drop down menu
      dropdown.setAttribute("class", "dropdowntest-content hide section-1");

    }, false);

HTML

<div id="container">
  <!--Place your map here or remove the div element with id "container" and add that id to your map-->
  <div id="dropdownmenu" class="dropdowntest-content hide section-1">
    <p>Hello</p>
  </div>
</div>

如何根据面积坐标显示div

3 个答案: