Divs over images using JavaScript

Question

Say I have an image with a couple of dots in a web page. When someone clicks on the dots I want a JavaScript function to be executed and then a div placed over the clicked dot in the image. Something akin to markers in maps. How do I go about doing this?

Answer 1

Here is a start

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

I'm going to suggest jQuery in my answer.

$('#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>');
   });

});

Position your dots with CSS. You'll probably want to give #map position: relative and then absolutely position your list items.

Then make some CSS for .overlay, so that it overlays correctly.