J'ai une carte personnalisée (une image) et j'ai besoin d'afficher les noms de pays lorsque le curseur de la souris se trouve sur les zones de pays.
J'utilise une carte HTML. Mon image qui utilise la carte HTML est dans un modal que vous pouvez ouvrir avec un clic de bouton. j'ai essayé tooltipster ( http://iamceege.github.io/tooltipster/ ) et Responsive HTML Plug-in jquery Image Maps ( https://github.com/davidjbradshaw/image-map-resizer a>), mais je ne peux pas lui faire afficher les info-bulles exactement où je veux et cela peut être dû à des problèmes de réactivité car l'image prend la hauteur du modal alors que la taille de l'image est plus grande que cela, et j'ai créé la carte en fonction sur la taille réelle de l'image.
Voici mon code de carte:
<img src="<?php the_field('home__map_lightbox_image'); ?>" class="locations-map-full" alt="<?php the_field('home__map_lightbox_title'); ?>" usemap="#map">
<map name="map" id="locations-map">
<area shape="circle" coords="596, 408, 10" title="Libye" class="tooltip"/>
<area shape="circle" coords="508, 361, 16" title="Tunisie" class="tooltip" />
<area shape="circle" coords="457, 374, 7" title="Algerie" class="tooltip" />
<area shape="circle" coords="406, 360, 16" alt="Maroc" class="tooltip" />
</map>
Donc, ma question est: est-ce la bonne façon de faire? suis-je sur la bonne voie ou dois-je utiliser autre chose que des cartes HTML?
3 Réponses :
Vous pouvez essayer d'utiliser un plugin javascript comme celui-ci: jquery.responsive-image-maps qui recalcule dynamiquement les coordonnées de l'image map sur window.load et window.resize . Alors tout devrait bien fonctionner.
Si vous le souhaitez, vous pouvez également essayer des cartes d'images svg réactives (elles sont plus faciles à rendre réactives, mais je ne suis pas sûr des info-bulles ajoutées).
Par exemple, consultez cette create-responsive-svg-image -maps
Voici exemple d'ajout d'infobulles d'info-bulles à une carte svg < / p>
Vous pouvez ajouter un hotspot personnalisé à votre carte à l'aide du script Taggd qui est réactif et facile à utiliser. https://timseverien.github.io/taggd/v3/
Extrait de travail - vanilla JS
Bien que ce ne soit pas parfait, cette approche fonctionne:
Remarque: J'ai changé la première carte d'image à apparaître au centre
<img src="https://images.icanvas.com/list-square/abstract-photography-1.jpg" class="locations-map-full" width="600" height="600" alt="" usemap="#map">
<map name="map" id="locations-map">
<area shape="circle" coords="596, 408, 10" title="Libye" class="tooltip"/>
<area shape="circle" coords="300, 300, 100" title="Tunisie" class="tooltip" onmouseover="myFunc(this)" onmouseout="myFuncHide(this)"/>
<area shape="circle" coords="457, 374, 7" title="Algerie" onmouseover="myFunc(this)" class="tooltip" />
<area shape="circle" onmouseover="myFunc(this)" coords="406, 360, 16" alt="Maroc" class="tooltip" />
</map>
<div id="myTooltip" />
#myTooltip {
display: inline-block;
padding: 15px;
background: rgba(0,0,0,.5);
color: white;
position: absolute;
display: none;
}
function myFunc (el) {
var tooltip = document.getElementById('myTooltip');
tooltip.style.display = 'block';
tooltip.innerHTML = el.title;
}
function myFuncHide(el) {
var tooltip = document.getElementById('myTooltip');
tooltip.style.display = 'none';
tooltip.innerHTML = '';
}
document.addEventListener('mousemove', function(e){
/*console.log(e.pageX);
console.log(e.pageY);*/
document.getElementById('myTooltip').style.left = (e.pageX+5)+"px";
document.getElementById('myTooltip').style.top = (e.pageY+5)+"px";
});
Le problème est que le titre par défaut apparaît également à côté de l'info-bulle, il ressemble à un doublon et il ne répond pas. Cela ne résout pas le problème.
Vous pouvez laisser le titre vide et utiliser un autre attribut personnalisé pour l'info-bulle
Il est réactif car l'info-bulle est basée sur la position de la souris et non sur la position
veuillez ajouter un lien en ligne à votre image map ou bien le code pour le reproduire
@NikosM. done..je ne peux pas partager le lien depuis que je travaille sur localhost.
oui, je pense que vous auriez besoin d'utiliser autre chose qu'une image-map puisque la nature sensible peut modifier les coordonnées données. Essayez quelque chose comme ce plugin jquery mattstow.com/experiment/responsive- images-maps /…
Le plugin que vous avez fourni est également basé sur des images maps, mais ma question est de savoir s'il faut utiliser quelque chose de différent comme certaines cartes svg, etc. Je vais essayer, cela semble meilleur que le plugin que j'utilise.
bien si cela résout votre problème, pensez à accepter la réponse. De plus, vous pouvez essayer des cartes svg, mais je ne sais pas à quel point il serait facile d'y ajouter des info-bulles qui seraient meilleures qu'une image-map