css: <img>позиция с заданными координатами x, y поверх другого изображения (с использованием jquery) - PullRequest
Новая
       13

css: <img>позиция с заданными координатами x, y поверх другого изображения (с использованием jquery)

2 голосов
/ 26 октября 2011

У меня следующая проблема, и я довольно плохо разбираюсь в CSS, но хорош в Javascript и Jquery У меня есть карта (размер JPG 579x527) и несколько координатных точек, которые представляют некоторые точки на карте может быть представлен простой круговой иконкой

Я должен поместить эти точки с некоторыми ссылками в виде слоев поверх карты изображения. Я думал, что, выполняя margin -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>');

}

});

Код не работает ... он показывает странные точки ..

Ответы [ 2 ]

3 голосов
/ 26 октября 2011

Используйте 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;

1 голос
/ 26 октября 2011

Использовать относительное расположение внутри карты. Вот образец:

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/

...