Tema: problema con un intercambio de imagenes
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 04/11/2011, 11:48
Avatar de buzonetix
buzonetix
 
Fecha de Ingreso: diciembre-2010
Mensajes: 23
Antigüedad: 14 años, 1 mes
Puntos: 0
problema con un intercambio de imagenes
Hola muy buenas.

Estoy tratando de realizar un efecto sobre unos links para que sea como que la imagen se mueve un poco para un lado segun pones el enlace por encima.

Me salio muy bien sobre etiquetas <img> aqui os pongo el codigo javascript:
Código Javascript: 
Ver original
  1. var indx = -1;
  2. var tiempoEspera = 50; 
  3. var color = new Array(6);
  4. color[0]= new Image
  5. color[1]= new Image
  6. color[2]= new Image
  7. color[3]= new Image
  8. color[4]= new Image
  9. color[5]= new Image
  10. function camimagen(uno,dos,tres,cuatro,cinco,seis,colores){
  11.     var n;
  12.     color[6] = document.images[colores].getAttribute('name')
  13.     for (n=0;n<6;n++){  
  14.     color[n].src = arguments[n];
  15.     }
  16.     
  17.     
  18.     
  19.     
  20.     var size = color.length - 2 ;
  21.     if (indx < size){
  22.         indx++ ;
  23.         }
  24.         else{
  25.             indx = 0 ;
  26.             
  27.             return;
  28.              }
  29.     document.images[colores].src=color[indx].src;
  30. window.setTimeout("camimagen(color[0].src,color[1].src,color[2].src,color[3].src,color[4].src,color[5].src, color[6])", tiempoEspera);
  31.     }


su html seria:
Código HTML: 
Ver original
  1. <body>
  2.  
  3.  
  4. <div id="apDiv1" onmouseover="camimagen('imagenes/naranja1.gif','imagenes/naranja2.gif','imagenes/naranja3.gif','imagenes/naranja4.gif','imagenes/naranja5.gif','imagenes/naranja6.gif', 'naranja' )" onmouseout="document.naranja.src='imagenes/naranja1.gif';">
  5. <img name="naranja"src="imagenes/naranja1.gif" width="145" height="40" alt="probando" /></div>
  6.  
  7. <div id="apDiv2" onmouseover="camimagen('imagenes/amarillo1.gif','imagenes/amarillo2.gif','imagenes/amarillo3.gif','imagenes/amarillo4.gif','imagenes/amarillo5.gif','imagenes/amarillo6.gif', 'amarillo' )" onmouseout="document.amarillo.src='imagenes/amarillo1.gif';"><img name="amarillo" src="imagenes/amarillo1.gif" width="145" height="40" alt="fgdsfdsf" /></div>
  8. </body>

este funciona de lujo. el problema me surge cuando quiero hacer la animacion sobre un fondo de una etiqueta <li>
aqui el codigo:
Código Javascript: 
Ver original
  1. var indx = -1;
  2. var tiempoEspera = 50; 
  3. var color = new Array(7);
  4. function animaLink(uno,dos,tres,cuatro,cinco,seis,colores){
  5.  
  6.     var n;
  7.     color[6]=colores;
  8.     for (n=0;n<6;n++){  
  9.     color[n] = "url("+arguments[n]+")";
  10.     }
  11.     
  12.     
  13.     
  14.     
  15.     var size = color.length - 1 ;
  16.     if (indx < size){
  17.         indx++ ;
  18.         }
  19.         else{
  20.             indx = 0 ;
  21.             
  22.             return;
  23.              }
  24.     document.getElementById(color[6]).style.backgroundImage=color[indx];
  25. window.setTimeout("animaLink(color[0],color[1],color[2],color[3],color[4],color[5], color[6])", tiempoEspera);
  26.     }
  27.     function restaurarLink(){
  28.         return document.getElementById('amarillo').style.backgroundImage='url(imagenes/amarillo1.png)';
  29.         }

su html de los enlaces:
Código HTML: 
Ver original
  1. <ul>
  2.     <li onmouseover="animaLink('imagenes/amarillo1.png','imagenes/amarillo2.png','imagenes/amarillo3.png','imagenes/amarillo4.png','imagenes/amarillo5.png','imagenes/amarillo6.png','amarillo');" onmouseout="restaurarLink();"><a id="amarillo" class="amarillo" href="#">REPROGRAFIA</a></li>
  3.     <li><a id="naranja" class="naranja" href="#">SERVICIOS</a></li>
  4.     <li><a class="verde" href="#">PRESUPUESTO</a></li>
  5.     <li><a class="rosa" href="#">CONTACTO</a></li>
  6.     <li><a class="azul" href="#">ESTAMOS EN</a></li>
  7.     <li><a class="rojo" href="http://www.buzonetix.es">ENLACES DE INTERES</a></li>
  8.     <li><a class="negro" href="#">MAPA DEL SITIO</a></li>
  9.   </ul>

De momento como podeis ver solo estoy probando en el primer enlace. Algo sale pero es como que la animacion aveces funciona aveces va a trompicones. vamos como que funciona pero sin ir fino. bastante tosco.
Y la verdad ya no se que hacer.

Si alguien tiene una sugerencia lo agradeceria mucho