CSS： <img> 給定坐標x，y在另一個圖像上的位置（使用jquery）

Question

我有以下問題，但是我對CSS很不好，但是對Javascript和Jquery很好，我有一個地圖（JPG大小579x527），並且一些表示地圖上某些點的坐標點可以用一個簡單的圓圈圖標表示

我必須將帶有一些鏈接的這些點作為圖像圖的頂部放置在圖層上，我認為通過做margin -X然后放左：X可以解決問題，但是到目前為止，這還不是這樣（我正在生成隨機搭配20分）

function randomFromTo(from, to){
       return Math.floor(Math.random() * (to - from + 1) + from);
    }

jQuery(document).ready(function () { 
var tmp;
var x;
var y;
var x_margin;
var y_margin;

for(var i=0;i<=20;i++) {
tmp=jQuery('#img_map').html(); //the map itself



x=randomFromTo(10,500);
y=randomFromTo(10,500);

jQuery('#img_map').html(tmp+'<a href="#" style="display:block;position:relative;margin-left:-'+x+'px; margin-top:-'+y+'px;left:'+x+'px; top:'+y+'px; "><img src="icon_point.png" border="0" width="20" height="20"></a>');

}

});

該代碼無法正常工作。

Answer 1

使用position:absolute; left:250px; top:250px; position:absolute; left:250px; top:250px; 代替保證金

jQuery('#img_map').html(tmp+'<a href="#" style="display:block;position:absolute;left:-'+x+'px; top:-'+y+'px;"><img src="icon_point.png" border="0" width="20" height="20"></a>');

並且父元素需要具有position:relative;

Answer 2

在地圖內使用相對位置。 這是示例：

HTML

<div id="img_map"></div>

CSS

#img_map { background:red; position:relative; width:500px; height:500px; }
.point { display:block; background:green; width:20px; height:20px; position:absolute; }

腳本

function randomFromTo(from, to){
   return Math.floor(Math.random() * (to - from + 1) + from);
}

jQuery(document).ready(function () { 
    var $map = jQuery('#img_map');
    for(var i=0;i<=20;i++) {

        var x = randomFromTo(10,500);
        var y = randomFromTo(10,500);

        var $point = jQuery('<a href="#" class="point"><img src="icon_point.png" /></a>').css({top:y + 'px', left:x + 'px'});
        $map.append($point); 

    }
});

工作樣本 ： http : //jsfiddle.net/8yqpy/11/