¿Cómo cambiar una imagen al hacer clic en JavaScript?

  • Autor Autor Daniel Carvajal
  • Fecha de inicio Fecha de inicio
Daniel Carvajal

Daniel Carvajal

Dseda
Diseñador
Verificado
Verificación en dos pasos activada
Verificado por Binance
Buen dia betas tengo un problemilla he intentado resolverlo por mi cuenta pero no he podido, en san google consegui este codigo

Insertar CODE, HTML o PHP: 
<script language="javascript">
imagen1=new Image
imagen1.src="url dela imagen aqui"
imagen2=new Image
imagen2.src="url dela imagen aqui"
var i=1;
function cambiar() {
if (i == 1)
{
document.images['ejemplo'].src=imagen2.src
i=2;
}
else
{
document.images['ejemplo'].src=imagen1.src;
i=1;
}
}
</script><img src="url dela imagen aqui" name="ejemplo" onMousedown="cambiar()"">

Lo que hace es cambiar una imagen por otra al hacer click, en eso ya todos vemos que esta bien, lo que no pude fue adaptarlo para que cambie con 7 imagenes distintas, o sea 7 click = 7 imagenes y que al hacer el 7mo click se quede estática la ultima imagen, si alguien tiene la solución le estaría muy agradecido
 
Quedó un poco extenso pero es para no modificar la estructura que mostraste ni complicartela más. Se podría reemplazar y achicar en muchas menos lineas, pero prueba así y de paso no se te complica para añadir las imágenes ni nada:

Insertar CODE, HTML o PHP: 
<script language="javascript">
imagen1=new Image
imagen1.src="url dela imagen aqui"
imagen2=new Image
imagen2.src="url dela imagen aqui"
imagen3=new Image
imagen3.src="url dela imagen aqui"
imagen4=new Image
imagen4.src="url dela imagen aqui"
imagen5=new Image
imagen5.src="url dela imagen aqui"
imagen6=new Image
imagen6.src="url dela imagen aqui"
imagen7=new Image
imagen7.src="url dela imagen aqui"
var i=1;
function cambiar() {
if (i == 1)
{
document.images['ejemplo'].src=imagen1.src
i=2;
}
else if(i == 2)
{
document.images['ejemplo'].src=imagen2.src;
i=3;
}
else if(i == 3)
{
document.images['ejemplo'].src=imagen3.src;
i=4;
}
else if(i == 4)
{
document.images['ejemplo'].src=imagen4.src;
i=5;
}
else if(i == 5)
{
document.images['ejemplo'].src=imagen5.src;
i=6;
}
else if(i == 6)
{
document.images['ejemplo'].src=imagen6.src;
i=7;
}
else if(i == 7)
{
document.images['ejemplo'].src=imagen7.src;
i=7; /* Para sacar lo estático en la última imagen poner i=1 */
}
}
</script><img src="url dela imagen aqui" name="ejemplo" onMousedown="cambiar()"">
 
wolfnick dijo:
Quedó un poco extenso pero es para no modificar la estructura que mostraste ni complicartela más. Se podría reemplazar y achicar en muchas menos lineas, pero prueba así y de paso no se te complica para añadir las imágenes ni nada:

Insertar CODE, HTML o PHP: 
<script language="javascript">
imagen1=new Image
imagen1.src="url dela imagen aqui"
imagen2=new Image
imagen2.src="url dela imagen aqui"
imagen3=new Image
imagen3.src="url dela imagen aqui"
imagen4=new Image
imagen4.src="url dela imagen aqui"
imagen5=new Image
imagen5.src="url dela imagen aqui"
imagen6=new Image
imagen6.src="url dela imagen aqui"
imagen7=new Image
imagen7.src="url dela imagen aqui"
var i=1;
function cambiar() {
if (i == 1)
{
document.images['ejemplo'].src=imagen1.src
i=2;
}
else if(i == 2)
{
document.images['ejemplo'].src=imagen2.src;
i=3;
}
else if(i == 3)
{
document.images['ejemplo'].src=imagen3.src;
i=4;
}
else if(i == 4)
{
document.images['ejemplo'].src=imagen4.src;
i=5;
}
else if(i == 5)
{
document.images['ejemplo'].src=imagen5.src;
i=6;
}
else if(i == 6)
{
document.images['ejemplo'].src=imagen6.src;
i=7;
}
else if(i == 7)
{
document.images['ejemplo'].src=imagen7.src;
i=7; /* Para sacar lo estático en la última imagen poner i=1 */
}
}
</script><img src="url dela imagen aqui" name="ejemplo" onMousedown="cambiar()"">
Hacer clic para expandir...



OMG! no tienes ni idea de lo agradecido que estoy hermanazo, muchas pero muchas gracias me funciono totalmente :encouragement::encouragement::encouragement::encouragement::encouragement:
 
danielkarva dijo:
OMG! no tienes ni idea de lo agradecido que estoy hermanazo, muchas pero muchas gracias me funciono totalmente :encouragement::encouragement::encouragement::encouragement::encouragement:
Hacer clic para expandir...

De nada amigo, me alegro que te haya servido! Saludos
 
Para no abrir otro post de Ayuda, alguien sabe que debo agregar a este codigo

Insertar CODE, HTML o PHP: 
<script language="javascript">
imagen1=new Image
imagen1.src="url dela imagen aqui"
imagen2=new Image
imagen2.src="url dela imagen aqui"
imagen3=new Image
imagen3.src="url dela imagen aqui"
imagen4=new Image
imagen4.src="url dela imagen aqui"
imagen5=new Image
imagen5.src="url dela imagen aqui"
imagen6=new Image
imagen6.src="url dela imagen aqui"
imagen7=new Image
imagen7.src="url dela imagen aqui"
var i=1;
function cambiar() {
if (i == 1)
{
document.images['ejemplo'].src=imagen1.src
i=2;
}
else if(i == 2)
{
document.images['ejemplo'].src=imagen2.src;
i=3;
}
else if(i == 3)
{
document.images['ejemplo'].src=imagen3.src;
i=4;
}
else if(i == 4)
{
document.images['ejemplo'].src=imagen4.src;
i=5;
}
else if(i == 5)
{
document.images['ejemplo'].src=imagen5.src;
i=6;
}
else if(i == 6)
{
document.images['ejemplo'].src=imagen6.src;
i=7;
}
else if(i == 7)
{
document.images['ejemplo'].src=imagen7.src;
i=7; /* Para sacar lo estático en la última imagen poner i=1 */
}
}
</script><img src="url dela imagen aqui" name="ejemplo" onMousedown="cambiar()"">

para que al dar el ultimo click a la ultima imagen se desaparezca todo?
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

Hojure
¿Cómo agrandar una imagen al hacer clic en ella?
Respuestas
5
Visitas
224
BURGAKIKE
BURGAKIKE
B
¿Cómo cambiar la imagen principal de un sitio web?
Respuestas
5
Visitas
201
YeltsinReyes
YeltsinReyes
J
¿Cómo crear un cuadro de diálogo al hacer clic en una imagen?
Respuestas
2
Visitas
338
Xiroto
X
V
Cómo cambiar tu saldo Amazon por Bitcoins con Purse
2
Respuestas
22
Visitas
4K
SebastianRdz223
SebastianRdz223
Luis Martin
¿Cómo cambiar una imagen al hacer clic en ella?
Respuestas
7
Visitas
8K
Kumo
K
Atrás
Arriba