J'ai un problème, j'essaie d'attribuer un div à une coordonnée de zone spécifique en cliquant dessus et de l'afficher. Mais ne fonctionne pas.

$(function() {
  $('.list-group a').on('click', function(e) {
    e.preventDefault();
    $('.hide').hide();
    $('.' + this.id).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;
}
<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>
0
user7158897 12 avril 2018 à 17:01

3 réponses

Meilleure réponse

Il y a eu quelques erreurs dans votre code.

La première est que la balise img n'utilisait pas la carte car il manquait # dans le use-map: #map.

Vous masquiez également inutilement le div au clic. Et vous faisiez référence à une balise a qui n'existait pas.

(function($) {
  $('.list-group area').on('click', function(e) {

    $('.' + this.id).toggleClass('show');
  });
})(jQuery);
.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;
}
<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>
1
disinfor 12 avril 2018 à 14:54

Vous pouvez modifier le code en fonction de votre solution.

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>
-1
Cocest 12 avril 2018 à 15:46
$(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>
0
Taha Paksu 12 avril 2018 à 14:53