Foros del Web » Programando para Internet » Javascript »

problema con un intercambio de imagenes

 Estas en el tema de problema con un intercambio de imagenes en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/11/2011, 11:48
Avatar de buzonetix  
Fecha de Ingreso: diciembre-2010
Mensajes: 23
Antigüedad: 14 años
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
  #2 (permalink)  
Antiguo 05/11/2011, 10:40
Avatar de buzonetix  
Fecha de Ingreso: diciembre-2010
Mensajes: 23
Antigüedad: 14 años
Puntos: 0
Respuesta: problema con un intercambio de imagenes
Bueno he subido el ejemplo a mi dominio para que podais compararlo:

http://www.buzonetix.es/audos/pruebaenlace.html

Las dos de arriba son dos imagenes con etiquetas <img> donde me funciona muy bien el script.

los de abajo son enlaces con las imagenes en la propiedad background de las etiquetas li donde como podeis ver no va fino.
  #3 (permalink)  
Antiguo 06/11/2011, 04:26
Avatar de buzonetix  
Fecha de Ingreso: diciembre-2010
Mensajes: 23
Antigüedad: 14 años
Puntos: 0
Respuesta: problema con un intercambio de imagenes
Por si a alguien le vale logre arreglarlo yo mismo pero solo en local.

el problema estaba en en setTimeout. al parecer no admite argumento la función que pasamos dentro del code

en cualquier caso sigue sin funcionarme bien en el servidor. parpadea la imagen este es el codigo que tengo ahora

Código Javascript: 
Ver original
  1. var colorActual ;
  2. arrayColores = new Array;
  3. arrayColores[0] = "amarillo";
  4. arrayColores[1] = "naranja";
  5. arrayColores[2] = "verde";
  6. arrayColores[3] = "rosa";
  7. arrayColores[4] = "azul";
  8. arrayColores[5] = "rojo";
  9. arrayColores[6] = "negro" ;
  10. var arrayImagenes = new Array ;
  11. arrayImagenes[0] = new Array ;
  12. arrayImagenes[0] = ['imagenes/amarillo1.png','imagenes/amarillo2.png','imagenes/amarillo3.png','imagenes/amarillo4.png','imagenes/amarillo5.png','imagenes/amarillo6.png'];
  13. arrayImagenes[1] = new Array ;
  14. arrayImagenes[1] = ['imagenes/naranja1.png','imagenes/naranja2.png','imagenes/naranja3.png','imagenes/naranja4.png','imagenes/naranja5.png','imagenes/naranja6.png'];
  15. arrayImagenes[2] = new Array ;
  16. arrayImagenes[2] = ['imagenes/verde1.png','imagenes/verde2.png','imagenes/verde3.png','imagenes/verde4.png','imagenes/verde5.png','imagenes/verde6.png'];
  17. arrayImagenes[3] = new Array ;
  18. arrayImagenes[3] = ['imagenes/rosa1.png','imagenes/rosa2.png','imagenes/rosa3.png','imagenes/rosa4.png','imagenes/rosa5.png','imagenes/rosa6.png'];
  19. arrayImagenes[4] = new Array ;
  20. arrayImagenes[4] = ['imagenes/azul1.png','imagenes/azul2.png','imagenes/azul3.png','imagenes/azul4.png','imagenes/azul5.png','imagenes/azul6.png'];
  21. arrayImagenes[5] = new Array ;
  22. arrayImagenes[5] = ['imagenes/rojo1.png','imagenes/rojo2.png','imagenes/rojo3.png','imagenes/rojo4.png','imagenes/rojo5.png','imagenes/rojo6.png'];
  23. arrayImagenes[6] = new Array ;
  24. arrayImagenes[6] = ['imagenes/negro1.png','imagenes/negro2.png','imagenes/negro3.png','imagenes/negro4.png','imagenes/negro5.png','imagenes/negro6.png'];
  25.  
  26.  
  27. var imagenesAmarillo = new Array(6) ;
  28. var h;
  29. for (h=0; h<imagenesAmarillo.length ; h++){
  30.     imagenesAmarillo[h] = new Image ;
  31.     imagenesAmarillo[h].src = arrayImagenes[0][h] ; 
  32.     }
  33.     
  34.     var imagenesNaranja = new Array(6) ;
  35. for (h=0; h<imagenesNaranja.length ; h++){
  36.     imagenesNaranja[h] = new Image ;
  37.     imagenesNaranja[h].src = arrayImagenes[1][h] ; 
  38.     }
  39.     
  40.     var imagenesVerde = new Array(6) ;
  41. for (h=0; h<imagenesVerde.length ; h++){
  42.     imagenesVerde[h] = new Image ;
  43.     imagenesVerde[h].src = arrayImagenes[2][h] ; 
  44.     }
  45.     
  46.     var imagenesRosa = new Array(6) ;
  47. for (h=0; h<imagenesRosa.length ; h++){
  48.     imagenesRosa[h] = new Image ;
  49.     imagenesRosa[h].src = arrayImagenes[3][h] ; 
  50.     }
  51.     
  52.     var imagenesAzul = new Array(6) ;
  53. for (h=0; h<imagenesAzul.length ; h++){
  54.     imagenesAzul[h] = new Image ;
  55.     imagenesAzul[h].src = arrayImagenes[4][h] ; 
  56.     }
  57.     
  58.     var imagenesRojo = new Array(6) ;
  59. for (h=0; h<imagenesRojo.length ; h++){
  60.     imagenesRojo[h] = new Image ;
  61.     imagenesRojo[h].src = arrayImagenes[5][h] ; 
  62.     }
  63.     
  64.     var imagenesNegro = new Array(6) ;
  65. for (h=0; h<imagenesNegro.length ; h++){
  66.     imagenesNegro[h] = new Image ;
  67.     imagenesNegro[h].src = arrayImagenes[6][h] ; 
  68.     }
  69. var tamano = 6;
  70. var p = 0
  71.     function animarLinks(){
  72.         var retardo = 50 ;
  73.         var n ;
  74.         switch(colorActual){
  75.             case(colorActual="amarillo"): 
  76.             n = 0;
  77.             break;
  78.             case(colorActual="naranja"): 
  79.             n = 1;
  80.             break;
  81.             case(colorActual="verde"): 
  82.             n = 2;
  83.             break;
  84.             case(colorActual="rosa"): 
  85.             n = 3;
  86.             break;
  87.             case(colorActual="azul"): 
  88.             n = 4;
  89.             break;
  90.             case(colorActual="rojo"): 
  91.             n = 5;
  92.             break;
  93.             case(colorActual="negro"): 
  94.             n = 6;
  95.             break;
  96.             }
  97.             if (p < tamano){
  98.                 document.getElementById(arrayColores[n]).style.backgroundImage="url("+arrayImagenes[n][p]+")";  
  99.                 p++;                        
  100.             } else {
  101.                 p = 0
  102.                 return;
  103.                 }
  104.                 window.setTimeout("animarLinks()", retardo);
  105.         }
  #4 (permalink)  
Antiguo 06/11/2011, 15:28
Avatar de buzonetix  
Fecha de Ingreso: diciembre-2010
Mensajes: 23
Antigüedad: 14 años
Puntos: 0
Respuesta: problema con un intercambio de imagenes
Bueno yo solo consegui arreglar el problema.

funciona perfectamente en todos los navegadores menos en crhome en el servidor.

En crhome en local se ve bien. alguna sugerencia?

Etiquetas: funcion, html, imagenes, intercambio
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 19:54.