Question

I have the following problem and I’m pretty bad at CSS,
but good at Javascript and Jquery
I have a map (JPG size 579×527) and some coordinates points that represent some points on the map
can be represented with a simple circle icon

I must put those points with some links as layers on top of the image map
I thought that by doing margin -X and then puting left:X will solve the problem but it’s not like that
Here’s my code so far (I’m generating the coords randomly with 20 points)

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>');

}

});

The code doesn’t work …it shows wierd the points..

Answer 1

Use position:absolute; left:250px; top:250px; instead of margin

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>');

and the parent element needs to have position:relative;