Деление на изображения с использованием JavaScript

Question

Скажем, у меня есть изображение с несколькими точками на веб-странице. Когда кто-то нажимает на точки, я хочу, чтобы выполнялась функция JavaScript, а затем делитель помещался над нажатой точкой на изображении. Что-то похожее на маркеры на картах. Как мне это сделать?

Answer 1

Вот начало

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

Я собираюсь предложить jQuery в своем ответе.

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

});

Разместите ваши точки с помощью CSS. Вы, вероятно, захотите дать #map position: relative и затем абсолютно позиционировать элементы списка.

Затем создайте CSS для .overlay, чтобы он правильно накладывался.