Question

我有以下问题，我在CSS方面很糟糕，但擅长Javascript和Jquery 我有一张地图（JPG大小为579x527）和一些代表地图上某些点的坐标点可以用简单的圆圈图标表示

我必须将那些带有一些链接的点作为图层放在图像映射的顶部我认为通过做边缘-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;代替保证金

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/

css：<img/>位置，给定的坐标x，y位于另一个图像的顶部（使用jquery）

2 个答案: