使用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，以便它正确覆盖。