Divs sur les images en utilisant JavaScript

Question

Dites que j'ai une image avec quelques points dans une page Web. Quand quelqu'un clique sur les points, je veux qu'une fonction JavaScript soit exécutée, puis un div placé sur le point cliqué dans l'image. Quelque chose s'apparente à des marqueurs dans les cartes. Comment vais-je faire cela?

Answer 1

est ici un début

<div id="map"> 
<ul> 
<li>marker</li> 
</ul> 
</div> 

Je vais suggérer jQuery dans ma réponse.

$('#map li').each(function() { 

    $(this).css({ cursor: 'pointer' }).click(function() { 
     if (($this).find('.overlay').length > 0)) return; 

     // figure out here where the contents for the div will come from. AJAX perhaps 
     var contents = '<strong>hello</strong>'; 
     $(this).append('<div class="overlay">' + contents + '</div>'); 
    }); 

}); 

Positionnez vos points avec CSS. Vous voudrez probablement donner #map position: relative et ensuite positionner absolument vos éléments de liste.

Ensuite, faites CSS pour .overlay, de sorte qu'il se superpose correctement.