Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Agregar imagen dinámicamente

Estas en el tema de Agregar imagen dinámicamente en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 30/03/2009, 06:13
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 19 años, 2 meses
Puntos: 0
Agregar imagen dinámicamente

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!
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #2 (permalink)  
Antiguo 30/03/2009, 14:01
Avatar de foreverOdd  
Fecha de Ingreso: noviembre-2007
Ubicación: Caracas
Mensajes: 489
Antigüedad: 16 años, 5 meses
Puntos: 14
Respuesta: Agregar imagen dinámicamente

intentalo asi a ver:

Código javascript:
Ver original
  1. document.observe('dom:loaded', function() {
  2.    
  3.     $$('.links').each(function(val,index){
  4.  
  5.         var btn = document.createElement('img');
  6.         btn.src = 'ampliar.png';
  7.  
  8.         //Attach to DOM
  9.         if(this.next()!=undefined)
  10.             this.insert({top:btn})
  11.         else
  12.             this.insert({bottom:btn})
  13.  
  14.         Element.extend(btn)    
  15.  
  16.         //Position icon
  17.         btn.setStyle({'position':'absolute'});             
  18.  
  19.         var pos = btn.previous().down().cumulativeOffset();
  20.         var size = btn.previous().down().getDimensions();  
  21.  
  22.         btn.setStyle({'rigth':'0','bottom':'0'});
  23.        
  24.  
  25.         //Attach action to icon
  26.         btn.observe('click', function() {
  27.             showPhoto(this.previous()
  28.         }) 
  29.     }      
  30. )
  31. });
__________________
My path is lit by my own fire, I only go where I desire
  #3 (permalink)  
Antiguo 30/03/2009, 15:03
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 19 años, 2 meses
Puntos: 0
Respuesta: Agregar imagen dinámicamente

Gracias, mañana cuando pueda lo pruebo!
Una cosa, esta línea tendría que arreglarla, no?
Código:
btn.setStyle({'rigth':'0','bottom':'0'});
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:03.