Antes de indicar la manera en la que puedes seleccionar a cualquiera de dichos elementos, debes saber que jamás debes de repetir el mismo
id dentro del mismo documento HTML. Puedes repetir clases o nombres, pero nunca un
id. Recuerda siempre que se trata de un dato único.
Ahora bien. El problema surge precisamente por intentar tomar a un elemento cuyo dato identificador se repite en otros elementos existentes en el mismo documento. Cuando intentas hacer algo semejante, solo logras obtener al primero de todos los elementos, y como estableces los valores de la posición del fondo con los valores de los contadores de los bucles y ambos empiezan con el valor cero, por ende, el primer elemento tiene "-0px" de top y left, respectivamente.
Si quisieras obtener las coordenadas de cualquiera de los elementos generados, deberías utilizar la propiedad [URL="https://developer.mozilla.org/en-US/docs/Web/API/Event/target"][inline]target[/inline][/URL] del [URL="https://developer.mozilla.org/es/docs/Web/API/Event"]objeto del evento[/URL]:
Código Javascript
:
Ver originalfunction getImagePosition(event){
if (event.target.className == "imagen"){
var demo = event.target.style.backgroundPosition;
alert(demo.toString());
}
}
De esta manera, si el elemento directamente afectado por el clic posee como clase a la cadena "imagen", tomas la posición de su fondo.
NOTA: Cuando asocias una función manejadora a un evento que se registra en un elemento del DOM, el objeto del evento es el primer argumento por defecto, a menos de que se especifique otro; por eso es que, en el ejemplo, lo defino de esa manera, sin tener que pasarlo como argumento.
Un saludo