Código de JavaScript - Cambiar la imagen al hacer clic con el ratón

Imágen de perfil

Cambiar la imagen al hacer clic con el ratóngráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Publicado el 29 de Julio del 2015 por xve
5.589 visualizaciones desde el 29 de Julio del 2015. Una media de 84 por semana
Este código muestra como ir cambiando una imagen cada vez que se hace clic con el ratón encima de la misma.
Se especifica un array de imágenes para ir intercambiándolas entre ellas a cada clic.

Versión 1.0
estrellaestrellaestrellaestrellaestrella(4)

Publicado el 29 de Julio del 2015gráfica de visualizaciones de la versión: Versión 1.0
5.590 visualizaciones desde el 29 de Julio del 2015. Una media de 84 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
 
	<script>
	// Array con todas las imágenes que deseamos que se vayan cambiando a
	// cada clic
	var imagenes=Array("img_1.jpg","img_2.jpg","img_3.jpg");
	var imagenVisible=0;
 
	// Función que cambia la imagen actual por la siguiente
	function cambiar(img)
	{
		imagenVisible++;
		if(imagenVisible>=imagenes.length)
		{
			imagenVisible=0;
		}
		img.src=imagenes[imagenVisible];
		cargarSiguienteImagen();
	}
 
	/**
	 * Esta función carga la siguiente imagen para no tener que esperar su carga
	 * en el momento de mostrarla.
	 */
	function cargarSiguienteImagen()
	{
		if((imagenVisible+1)<imagenes.length)
		{
			console.log(imagenVisible+1);
			var imgTmp=new Image();
			imgTmp.src=imagenes[imagenVisible+1];
		}
	}
 
	window.onload=function() {
		cargarSiguienteImagen();
	}
	</script>
 
	<style>
	img {cursor:pointer;}
	</style>
</head>
 
<body>
 
<img src="img_1.jpg" onclick="cambiar(this);">
 
</body>
</html>



Comentarios sobre la versión: Versión 1.0 (4)

javi
12 de Octubre del 2015
estrellaestrellaestrellaestrellaestrella
hola, por favor pon un ejemplo si el array en js fuera para variables de una base de datos con php,tengo una web de anuncios, cada anuncios es diferente y no logro que cambien en cada anuncios, cambian, pero siempre se ponen las del primer anuncio!

AYUDA URGE
Responder
Imágen de perfil
xve
13 de Octubre del 2015
estrellaestrellaestrellaestrellaestrella
Hola Javi, no se muy bien como lo tienes montado, pero si la información te viene de una base de datos, una solución sencilla, seria rellenar el array "imagenes" con la información de la base de datos... algo así:

<script>
var imagenes=Array();
<?php
while($row=mysqli_query($consulta))
{
?>
imagenes.push(<?php echo $row["imagen"]?>);
<?php
}
?>
</script>

te sirve?
Responder
Javi
13 de Octubre del 2015
estrellaestrellaestrellaestrellaestrella
Hola! Era un poco más complejo, me
Han solucionado en el curro pero mil gracias!!
Responder
Mario
03 de Octubre del 2016
estrellaestrellaestrellaestrellaestrella
Hola! Quería preguntarte una cosa acerca de esto.
Necesito hacer una función parecida pero no exactamente igual, y creo que podrías ayudarme. Lo que debo hacer es como si fuera una red social, que al clicar en una imagen, le de un like, por lo que el símbolo de like (un corazón) pase de negro a rojo.
No se muy bien como avanzar. No sé si hay alguna posibilidad de cambiar el color sobre el mismo icono, o directamente es válido cambiar de imagen, considerando la imagen inicial un corazon gris y la imagen a cambiar otra de un carazon rojo.
No se si me he explicado bien, en cualquier caso sería de gran ayuda una respuesta. Muchas gracias!
Responder

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s3231