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

Imágen de perfil
Val: 2.577
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

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


JavaScript

Publicado el 29 de Julio del 2015 por Xve (285 códigos)
30.152 visualizaciones desde el 29 de Julio del 2015
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(6)

Publicado el 29 de Julio del 2015gráfica de visualizaciones de la versión: Versión 1.0
30.153 visualizaciones desde el 29 de Julio del 2015
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 (6)

Imágen de perfil
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
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í:

1
2
3
4
5
6
7
8
9
10
11
<script>
var imagenes=Array();
<?php
while($row=mysqli_query($consulta))
{
	?>
	imagenes.push(<?php echo $row["imagen"]?>);
	<?php
}
?>
</script>

te sirve?
Responder
Imágen de perfil
13 de Octubre del 2015
estrellaestrellaestrellaestrellaestrella
Hola! Era un poco más complejo, me
Han solucionado en el curro pero mil gracias!!
Responder
Mario
3 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
Juan
29 de Marzo del 2018
estrellaestrellaestrellaestrellaestrella
Hola, tengo tres imágenes y la tercera queda horizontal al igual que las dos primeras. O sea las tres con estas medidas
1
<img src="1.jpg" onclick="cambiar(this);" width="636" height="427">
Como podría solucionar esto ? Saludo :)
Responder
Edgar
16 de Abril del 2018
estrellaestrellaestrellaestrellaestrella
Y si en lugar de haciendo click en la imagen, quisiera cambiarla haciendo click en un botón? Como podría hacerlo?

Un saludo!
Responder

Comentar la versión: Versión 1.0

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

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3231