使用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，以便正確覆蓋。