CODEWITHSUNDEEP
javascriptjquerycoordinates
Suresh Pattu
Suresh Pattu

Reputation: 6219

Displaying IMAGE Over IMAGE Based On Coordinates

enter image description here

i am adding dots on the map one by one based on the css positions which i already added in the arrays.

var postop =[{'top':'23'},{'top':'84'},{'top':'54'},{'top':'76'},{'top':'103'}];
var posleft =[{'left':'23'},{'left':'34'},{'left':'34'},{'left':'56'},{'left':'103'}];

but i want to add dots on the map one by one based on the coordinates.

var coordsx =[{'x':'155'},{'x':'338'},{'x':'236'},{'x':'196'},{'x':'171'}];    
var coordsy =[{'y':'238'},{'y':'328'},{'y':'488'},{'y':'164'},{'y':'439'}];

I tried here

my script is here:

var position = 0;
var postop =[{'top':'23'},{'top':'84'},{'top':'54'},{'top':'76'},{'top':'103'}];
var posleft =[{'left':'23'},{'left':'34'},{'left':'34'},{'left':'56'},{'left':'103'}];

$(postop).each(function(i){
var dots=$('<img src="http://i.imgur.com/iAfzQ.jpg" />');
        dots.css('position','absolute');
        dots.offset({ top: postop[position].top, left: posleft[position].left });           
        $("#overlay-dots").append(dots);
        position++;
        i++;
});​

Upvotes: 3

Views: 1434

Answers (1)

Aidas Bendoraitis
Aidas Bendoraitis

Reputation: 4003

I would put the coordinates into an array of arrays. Also you don't need to increment variables because jquery each does that for you. The simplified code would be this:

var coords = [[23, 23], [34, 84], [34, 54], [56, 76], [103, 103]];

$(coords).each(function(i){
    var pos = this;
    var dot = $('<img src="http://i.imgur.com/iAfzQ.jpg" />');
    dot.css({
        position: 'absolute',
        left: pos[0] + "px",
        top: pos[1] + "px"
    });
    $("#overlay-dots").append(dot);
});​

Upvotes: 4

Related Questions