Páginas

lunes, 31 de marzo de 2014

Apuntes de JavaScript: Como cambiar una foto haciendo click sobre ella


Ayer subí un post donde al hacer click sobre la imagen de Serena Williams, la foto cambiaba. La forma de hacerlo es dandole primero una identidad a la imagen y agregar el metodo onclick haciendo referencia a una funcion. Todo dentro de la etiqueta <img>

La funcion es super sencilla, al asignar una identidad al objeto imagen por medio de id=  puedo modificar dentro de la funcion la propiedad de la fuente de la imagen src.

Para referirme al objeto, es super similar a como se hace en VBA =  document.getElementById("serenaGallery") y si quiero modificar la imagen fuente, continuo con .src    

document.getElementById("serenaGallery").src = "direccion de la nueva imagen"

Este es el codigo HTML de ejemplo:

<html>
<head>
</head>

<body>

<img src="http://1.bp.blogspot.com/-hGUyOlpoeB0/UROyeHgMXcI/AAAAAAAAAZ4/L32zLAQvQj0/s1600/Hot-Serena-Williams+_sexy+16.jpg" height="640" id="serenaGallery" onclick="changeImage()" width="362" />  

</body> 

<script type="text/javascript">  

function changeImage() {    

var currentImage = document.getElementById("serenaGallery");  

var image1 = "http://1.bp.blogspot.com/-hGUyOlpoeB0/UROyeHgMXcI/AAAAAAAAAZ4/L32zLAQvQj0/s1600/Hot-Serena-Williams+_sexy+16.jpg";  

var image2 = "http://usatthebiglead.files.wordpress.com/2011/04/serena-williams-is-big-boned.jpg";  

var image3 = "http://www.strangecosmos.com/images/content/109963.jpg";  

var image4 = "http://1.bp.blogspot.com/-HiJxcIjMmFg/UWo9JtbfCEI/AAAAAAAAF1g/aUU42F3V9Ic/s1600/Serena+Williams+Hot+2013+04.jpg";  var image5 = "http://mystarclub.com/wp-content/uploads/2012/11/Serena-Williams-is-a-Bikini-Babe.jpg";  var image6 = "http://i1-news.softpedia-static.com/images/news2/Serena-Williams-Does-ESPN-The-Body-Issue-2.jpg";  

var image7 = "http://live.drjays.com/wp-content/uploads/2012/05/Serena.jpg";  

var image8 = "http://1.bp.blogspot.com/-vCsx4sswzeM/UA5GtbEwJ1I/AAAAAAAAACE/tMiP_p-0rB0/s1600/serena+williams+tennis+ball+in+butt.jpg";      

if (currentImage.src==image1){ currentImage.src=image2;}   
else if (currentImage.src==image2){ currentImage.src=image3;}   
else if (currentImage.src==image3){ currentImage.src=image4;}   
else if (currentImage.src==image4){ currentImage.src=image5;}   
else if (currentImage.src==image5){ currentImage.src=image6;}   
else if (currentImage.src==image6){ currentImage.src=image7;}   
else if (currentImage.src==image7){ currentImage.src=image8;}  else{currentImage.src=image1;}       

}  
</script></html>


Si lo pegan en el bloc de notas y lo guardan como html lo podran ver asi:




No hay comentarios:

Publicar un comentario