我有以下问题,而且我对 CSS 很不好, 但擅长 Javascript 和 Jquery 我有一张 map (JPG 大小 579x527)和一些代表 map 上某些点的坐标点 可以用一个简单的圆形图标来表示
我必须将那些带有一些链接的点作为图层放在图像 map 的顶部 我认为通过执行 margin -X 然后放置 left: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>');
}
});
代码不起作用...它显示了奇怪的点..
最佳答案
使用position:absolute;左: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;
关于javascript - css: <img> 给定坐标 x,y 位于另一个图像顶部的位置(使用 jquery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7900166/