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

2 respuestas

Respuesta
3

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 ;)

Respuesta
1

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.

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas