Comunidad de diseño web y desarrollo en internet online

Cambiar imagen de fondo con javascript (toggle)

Citar            
MensajeEscrito el 09 Sep 2009 05:45 pm
Hola,
Quiero cambiar la imagen de fondo de una div con un click, y luego con otro click volverlo al color original. He probado dos opciones y ambas funcionan bien en IE y Firefox, pero no en Opera, Safari ni Chrome. No sé si será un problema de esos navegadores con javascript.

Código :

function masclick(d) {
      if (document.getElementById(d).style.backgroundImage=="url(/img/fondo2.png)") {
            document.getElementById(d).style.backgroundImage="url(/img/fondo1.png)";
      } else {
            document.getElementById(d).style.backgroundImage="url(/img/fondo2.png)"
      }
}


Este código en los 3 navegadores que menciono, cambia a fondo2, pero luego no vuelve a cambiar a fondo1. Como digo, en IE y Firefox lo hace correctamente.

Este otro:

Código :

function masclick(d) {
     document.getElementById(d).style.backgroundImage = document.getElementById(d).style.backgroundImage? "url(/img/fondo1.png)":"url(/img/fondo2.png)"
}


Funciona igual en todos. Cambia de fondo1 a fondo2 y nuevamente a fondo1 al volver a hacer click, pero luego deja de funcionar (osea hace el ciclo una sola vez).

Pienso que la primera función tiene más potencial, pero al parecer el if no es correctamente leido por algunos navegadores. ¿Qué opinan?

Saludos!

Por -Javier-

21 de clabLevel



Genero:Masculino  

Diseñador programático o Programador gráfico

firefox
Citar            
MensajeEscrito el 10 Sep 2009 12:45 am
Bueno, como sucede a veces, de tanto darle vueltas al asunto dí con la solución.

La dejo por si alguien más tiene la duda:

Al parecer la equivalencia en el if que estaba usando causaba problemas, asi que me incliné por usar una variable más genérica. El problema que tenía en mi caso, es que la función debe servir para varios botones, por lo tanto, la variable debe ser única para cada uso. Por lo tanto, lo más lógico era asociarla al id del div que cambiará de imagen, asi que para hacer más fácil llamarla, en vez de una variable, usaré un arreglo:

Código Javascript :

var mas=new Array();


Ok, ahora la función:

Código Javascript :

function masclick(d) {
      if(masdet[d]) {
           document.getElementById(d).style.backgroundImage="url(/img/bt_mas.png)";
           delete(masdet[d]);
      } else {
           document.getElementById(d).style.backgroundImage="url(/img/bt_menos.png)";
           masdet[d]=true;
      }
};


Con esta función puedo cambiar el fondo de todos los botones que quiera (siempre usando un mismo fondo).
Saludos!

Por -Javier-

21 de clabLevel



Genero:Masculino  

Diseñador programático o Programador gráfico

firefox
Citar            
MensajeEscrito el 10 Sep 2009 12:47 am
Ah, una pequeña corrección, la variable no es "mas" es "masdet". Me equivoqué al transcribirla.
Saludos,

Por -Javier-

21 de clabLevel



Genero:Masculino  

Diseñador programático o Programador gráfico

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.