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