2012-09-11 4 views
3

enter image description hereAffichage image sur image en fonction Coordonnées

je suis d'ajouter des points sur la carte, un par un sur la base des positions css qui je l'ai déjà ajoutés dans les tableaux. Mais je veux ajouter des points sur la carte un par un basé sur les coordonnées.

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

mon script est ici:

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++; 
});​ 

Répondre

3

je mettrais les coordonnées dans un tableau de tableaux. De plus, vous n'avez pas besoin d'incrémenter les variables car jquery each le fait pour vous. Le code simplifié serait le suivant:

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); 
});​