Cambiar de imagen al hacer click sobre tal

[thirteen]

Hola, necesito el código para poder cambiar de imagen al hacer click sobre ella, no me importa si lleva o no lleva boton ni nada, sólo quiero que se cambien una tras otra al hacer click. Gracias

[Triby]

Esto no se hace con PHP, sino con HTML+CSS o Javascript... me inclino por este último y muevo tu tema para allá.

[Alexis88]

No debería, pues al menos debiste indagar y, por ende, haber elaborado algunas líneas de código para así intentar resolver tu problema, pero como estoy de buenas, te ayudaré. Pero no te acostumbres.

Código Javascript:

var img = document.getElementsByTagName("img")[0],
    imagenes = ["imagen1.jpg", "imagen2.jpg", "imagen3.jpg"],
    total = imagenes.length,
    cont = 0;
 
img.src = imagenes[cont];
 
img.addEventListener("click", function(){
    cont = cont == total - 1 ? 0 : ++cont;
    img.src = imagenes[cont];
}, false);
 

Primero, creo un elemento <img> en el cual mostraré a cada imagen y luego lo tomo, ya sea por el nombre de su etiqueta (como en este caso), por su id o por su nombre de clase, tú decides. Luego, creo un array con los nombres de las imágenes los cuales deben contar con la ruta en la que se encuentren, es decir, si tengo a "imagen1.jpg" en una carpeta "img" que se encuentre en un nivel superior, debo de escribir "img/imagen1.jpg" para así poder tomarla y mostrarla, de otro modo, esto no sucederá. Finalmente, calculo el total de imágenes que contiene el array e inicializo en cero a una variable que me servirá de contador.

Al cargar la página, asigno a la primera imagen del array al elemento de imagen en el documento, luego, cada vez que de un clic en dicho elemento, aumentaré el valor del contador hasta que llegue a la última posición del array, la cual es igual al total de imágenes menos uno (recordando que las posiciones en el array empiezan desde cero). Cuando el valor del contador sea igual a la última posición del array, le asigno el valor cero, creando así un bucle sin fin.

Finalmente, asigno al elemento de imagen la imagen del array que corresponda al valor actualizado del contador.



Saludos