JMiur [E]

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:
<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"/>

15 comentarios:

Liliana Fasciani M.  

¡Fabuloso, JMiur! Gracias, siempre tienes innovaciones de lo más interesantes y útiles. Saludos.

Responder
Admin  

Hola don JM! Como anda tanto tiempo? Siempre dando estas clases magistrales!
Ya te dije que sos un genio no? Pues lo sos sabelo!
Un abrazo :D

Responder
Unknown  

Encanto de explicación, a seguir guardando para tener en cuenta :P

Responder
Anónimo  

Eres muy bueno, JMiur, si señor. Queria hacerte una peticion, a ver si me puedes explicar como poner los comentarios mas vistosos en mi blog. No me refiero solo al formulario, sino a los comentarios publicados, como los que tienes en tu blog o en el de Gem@. Gracias.

http://jhonytv.blogspot.com/

Responder
Manuel Alberto  

Como sucede con las películas o series de culto.... espero ansioso el próximo capítulo... :D

Responder
Gem@  

¡Grande!

Responder
JMiur  

Saludos, Liliana.

k_nelita: ¡Tanto tiempo sin saber de usted! :D

Graciela: Guarde que todo sirve ... o no sirve :D

Jhony TV: Eso no tiene una respuesta posible porque la palabra "vistoso" es subjetiva. Cómo modificar los comentarios, depende de lo que quieras hacer. Hay muchas entradas que hablan sobre el tema y que dan respuestas parciales: 1 | 2 | 3 | 4 | 5 | 6

Manfenix: ¿Será el JavaScript reloaded? :D

Gem@: Viejo sí, grande never :D

Responder
Ikanus  

hola jmiur, ¿como podria almacenar un valor para poder utilizarlo en otro lado para una comparacion?

Responder
JMiur  

¿Usando una comapración de Blogger o de Javascript? Con als de Blogger no es posible hacer eso. Con Javascript, simplemente definiendo una variable fuera de cualquier función.

Responder
Ros  

Queriendo utilizar el ultimo ejemplo tengo problemas. Ni siquiera puedo hacer que funcione el cambio de una imagen a otra, es como si no tomara el onclick.

Help!

Responder
Ros  

Todavia no descubri porque no funciona pero se me dio por probar con imagenes que esten online, utilize las imagenes de este post y VOILA!!! funciona.
El drama esta con las iamgenes albergadas en mi pc.

JMiur  

En una pagina web no pueden usarse imagenes locales; no las vería nadie.

Ros  

Eso lo tengo claro, pero quizas no me exprese bien, la prueba del script la estoy haciendo de forma local por lo que las imagenes son locales y es ahi donde no funciona... Capishe?

JMiur  

Funcionrá perfectamente offline como cualquier otro script siempre que los paths de las imágenes offline sean correctos y relativos al archivo HTML.

Responder
Ildefonso  

¡¡¡Muy elegante. Felicidades!!!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR