使用JavaScript遍歷圖像

Question

假設我的網頁上有幾個點的圖像。 當有人單擊這些點時，我希望執行JavaScript函數，然后在圖像中單擊的點上方放置一個div。 類似於地圖中的標記。 我該怎么做呢？

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 ，然后絕對定位列表項。

然后為.overlay創建一些CSS，以便正確覆蓋。