Divs sur images en utilisant JavaScript

Question

Disons que j'ai une image avec quelques points dans une page Web. Lorsque quelqu'un clique sur les points, je veux qu'une fonction JavaScript soit exécutée et qu'un div soit placé sur le point cliqué dans l'image. Un peu comme les marqueurs sur les cartes. Comment dois-je m'y prendre ?

Answer 1

Voici 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 les éléments de votre liste.

Ensuite, créez des feuilles de style CSS pour .overlay, afin qu'il se superpose correctement.