jQuery - 如何將標記添加到圖像

我正在考慮如何爲圖像添加一些標記（我的意思是在Google地圖中標記某些地方的標記）。我有一個圖像，如果用戶點擊這個圖像，我想在那個地方，用戶點擊，添加一些其他圖像。例如，如果用戶將點擊圖像中的3個地方，我想在這個地方添加3個我的圖像...jQuery - 如何將標記添加到圖像

我知道，如何獲取方向，用戶點擊的位置，但我不'噸知道，如何在那個地方添加我的形象...

而且會需要AJAX嗎？

所以我想問你一些關於幫助的問題，我會適當的提示一下。謝謝。

來源

2011-08-05 user1946705

有這樣做的幾種方法，比如，你可以簡單的設置你的一些格（還可以使用position: relative;上格）的背景圖像，然後的onclick你可以創建/移動/顯示其他的圖像，設置position: absolute;到它並使用top和left進行定位。

範例CSS：

#container { 
    background: green; 
    width: 1000px; 
    height: 500px; 
    position: relative; 
} 
#container img { 
    position: absolute; 
}

示例HTML：

<div id="container"></div>

例JS（使用jQuery）：

$(document).ready(function() { 
    $("#container").click(function(e) { 
     e.preventDefault(); 
     var x = e.pageX - this.offsetLeft; 
     var y = e.pageY - this.offsetTop; 
     var img = $('<img>'); 
     img.css('top', y); 
     img.css('left', x); 
     img.attr('src', 'http://img34.imageshack.us/img34/3337/imglp.png'); 
     img.appendTo('#container'); 
    }) 
});

工作實例http://jsfiddle.net/uKkRh/1/

來源

2011-08-05 21:50:49 Nazin

但是，如果我沒有錯，這種方式是僅用於將一個點標記爲圖像，還是不是？因爲我想標記例如5部分的圖像，這種方法能做到嗎？ – user1946705

檢查工作示例http://jsfiddle.net/uKkRh/1/ – Nazin

jQuery - 如何將標記添加到圖像

回答

相關問題