Tengo un script que recorre una serie de links y agrega, a continuación de cada uno, una imagen con posicionamiento absoluto. Cada link tiene una imagen y usando getDimensions y cumulativeOffset (prototype) muevo la imagen nueva para que quede justo en la esquina inferior derecha, superpuesta con la imagen original del link.
El problema es que no siempre queda bien ubicada, a veces de desfasa un poco. ¿Se les ocurre por qué puede ser? Copio el código a continuación.
Código:
Event.observe(document, 'load', function() {
var pics = $$('.links');
for(i = 0; i < pics.length; i++) {
var btn = document.createElement('img');
btn.src = 'ampliar.png';
//Attach to DOM
if(pics[i].next())
pics[i].parentNode.insertBefore(btn, pics[i].next())
else
pics[i].parentNode.appendChild(btn);
Element.extend(btn)
//Position icon
btn.style.position = 'absolute';
var pos = btn.previous().down().cumulativeOffset();
var size = btn.previous().down().getDimensions();
btn.style.left = (pos.left + size.width - btn.width/2) + 'px';
btn.style.top = (pos.top + size.height - btn.height/2) + 'px';
//Attach action to icon
btn.onclick = function() {
showPhoto(this.previous())
}
}
})
Usando Event.observe(document, 'load', function(){}) no funciona en Firefox, sí en Opera (no probé en el resto por ahora). Con window, 'load' sí funciona en firefox, pero el problema de la mala ubicación persiste.
Muchas gracias!