Seguimos cambiando propiedades con JavaScript

Si se ha entendido el concepto de que las etiquetas pueden tener un atributo llamado ID que las identifica, y que ese nombre que les damos, debe ser unico, ya tenemos una de las herramientas básicas para trabajar con JavaScript porque son muchas las cosas que podemos hacer a partir de eso.

Por ejemplo, supongamos que hemos agregado una imagen de este modo:

<img id="miimagen1" src="URL_imagen_1"/>

con JavaScript, podemos "leer" sus propiedades; una de ellas, la más obvia es el atributo src que contiene la dirección URL de esa imagen que podríamos leer así:

var miurl = document.getElementById("miimagen1").src;

y como podemos leerla, también podemos escribirla:

document.getElementById("miimagen1").src = "URL_otra_imagen";

entonces, no resultaría complicado crear una función a la que ejecutamos con un enlace para que, al hacer click allí, la imagen cambie:

click para cambiar la imagen
[ reset ]

<script>
  function cambiarla() {
    document.getElementById("miimagen1").src = URL_otra_imagen;
  }
</script>

<img id="miimagen1" src="URL_imagen_1"/>
<a href="javascript: cambiarla();">click para cambiar la imagen</a>

No tiene mucho sentido ¿no? Mejor, usar una función más general y para eso, deberíamos usar más variables es decir, enviar a la función, datos que varien, en este caso, podríamos usar dos, uno con el ID para que la función cambie el contenido de cualquier imagen que se nos ocurra y otro con la URL de la imagen que quisiéramos cambiar:

cambio una | cambio otra
[ reset ]

<script>
  function cambiarimagen(id,url) {
    document.getElementById(id).src = url;
  }
</script>

<img id="miimagen2" src="URL_imagen_2"/>
<img id="miimagen3" src="URL_imagen_3"/>
<a href="javascript: cambiarimagen('miimagen2','URL_una_imagen);">cambio una</a>
<a href="javascript: cambiarimagen('miimagen3','URL_otra_imagen');">cambio otra</a>

Siempre necesito "algo" que ejecute la función, un "evento", por ejemplo, un click en alguna parte pero, no hace falta que sea un enlace, también puede ser la misma imagen y para eso está el onclick:

[ reset ]

<img onclick="cambiarimagen('miimagen4','URL_otra_imagen');" id="miimagen4" src="URL_mi_imagen"/>

¿Es necesario usar siempre un ID? Pues si y no, depende de lo que quisiéramos hacer. En este caso, podríamos hacer una función que no requiera ese dato porque en JavaScript hay varias formas de identificar las etiquetas y si nos basamos en el último ejemplo, donde el evento está en la etiqueta misma, en realidad, podemos decirle a nuestra función que "ESA" es la etiqueta a la que nos referimos y para decirle eso, usamos this:

<script>
  function otraimagen(cual,url) {
    cual.src = url;
  }
</script>

<img onclick="otraimagen(this,'URL_otra_imagen');" src="URL_mi_imagen"/>

Bueno, está bien pero ¿y si quiero restaurar la imagen original? Como la magia no existe e insisto, las computadoras no piensan, lo que debemos hacer es decírselo, métodos hay miles, cada uno para un caso específico, para una necesidad particular.

Una forma simple sería usar otros eventos, en lugar de usar onclick podríamos usar onmouseover y onmouseout que se ejecutan cuando ponemos el puntero del ratón encima de una etiqueta o cuando lo quitamos. Uso la misma función anterior de este modo:

<img onmouseover="otraimagen(this,'URL_imagen_2');" onmouseout="otraimagen(this,'URL_imagen_1');" src="URL_imagen_1" />

¿Y si quiero usar el onclick si o si? hay que decírselo expresamente de algún modo así que podría hacerse algo similar a lo que se mostraba en la entrada anterior. La función leerá cuál es la dirección URL de la imagen que está visible y luego, usando condiciones, la cambiará; si es la primera pondrá la segunda y si es la segunda pondrá la primera:

<script>
function permutarimagen(cual,url) {
  var imagen1 = "URL_imagen_original";
  var imagen2 = "URL_otra_imagen";
  var imagenactual = cual.src;
  if(imagenactual==imagen1) {
    cual. src = imagen2;
  } else  {
    cual. src = imagen1;
  }
}
</script>

<img onclick="permutarimagen(this);" src="URL_imagen_original"/>