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