css: ;给定坐标 x,y 位于另一个图像顶部的位置（使用 jquery）

发布于 2024-12-11 20:04:59 字数 849 浏览 0 评论 0原文

我有以下问题，而且我对 CSS 很不好，但擅长 Javascript 和 Jquery 我有一张地图（JPG 大小 579x527）和一些代表地图上某些点的坐标点可以用一个简单的圆形图标表示

我必须将带有一些链接的这些点作为图层放在图像地图的顶部我认为通过执行 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>');

}

});

该代码不起作用...它显示了奇怪的点..

原文

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..

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

终陌 2024-12-18 20:04:59

使用位置：绝对；左：250px； top:250px; 而不是 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>');

，父元素需要有 position:relative;

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;

回复收藏 0 原文

流星番茄 2024-12-18 20:04:59

在地图内使用相对定位。这是示例：

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/

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/

回复收藏 0 原文

~没有更多了~