Reputation: 2839
I have the following problem and I'm pretty bad at CSS, but good at Javascript and Jquery I have a map (JPG size 579x527) 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..
Upvotes: 2
Views: 8498
Reputation: 6184
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;
Upvotes: 3
Reputation: 30185
Use relative positioning inside the map. Here is sample:
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; }
script
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);
}
});
Working sample: http://jsfiddle.net/8yqpy/11/
Upvotes: 1