Cambiar de color una imagen o reempleazar una imagen en HTML
Soy muy principiante en el tema y quisiera que me ayudaran con un problema que tengo que es el siguiente:
Tengo una imagen que necesito que cambie de color o poder reemplazar dicha imagen, necesito que este proceso se realice al dar clic sobre ella, el problema es que son 4 imágenes diferentes o 4 colores. Hasta el momento tengo el siguiente código
<head>
<title>Imágenes</title>
</head>
<body>
<img src="img/1.png" onclick="this.src='img/2.png';" />
</body>
Sin embargo no se como insertar la imagen 3 y la imagen 4.
2 respuestas
Realiza lo comentado por Josué porque funciona correctamente.
Si lo que quieres es realizar una galería de imágenes, te recomendamos este tutorial:
http://aprende-web.net/jspracticas/imagenes/imagenes3.php
Esperamos haberte ayudado y no olvides valorar las respuestas ;)
Tu mejor opción es usar Javascript. A ver si esto te sirve:
CÓDIGO QUE VA EN EL HEAD DE TU CÓDIGO HTML
<script type="text/javascript">
//Ésta clase te mueve en un ciclo de imágenes
function ImageCollection(images) {
this.images = images;
this.i = 0;
this.next = function(img) {
this.i++;
if (this.i == images.length)
this.i = 0;
img.src = images[this.i];
}
}
/*
Crea un objeto ImageCollection para cada imagen que quieras que cambie.
Debes pasarle a cada uno un array de imágenes para ser mostradas
*/
var img1 = new ImageCollection(['img1.jpg','img2.jpg', 'img3.jpg']);
var img2 = new ImageCollection(['img1.jpg','img2.jpg', 'img3.jpg']);
</script>CODIGO HTML A SER INTRODUCIDO EN EL LUGAR DONDE QUIERAS QUE SE MUESTRE EL CAMBIO (es un objeto imagen normal y corriente)
<img src='img1.jpg' onclick="img1.next(this)">
<img src='img1.jpg' onclick="img2.next(this)">
Si sólo quieres una imagen, basta con que sólo pongas una variable y un objeto imagen. Recuerda que en la ImageCollection debes introducir las rutas a tu imagen.