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

[Daniel Carvajal]

Buen dia betas tengo un problemilla he intentado resolverlo por mi cuenta pero no he podido, en san google consegui este codigo

<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

 

[wolfnick]

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:

<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()"">

 

[Daniel Carvajal]

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:

<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()"">

OMG! no tienes ni idea de lo agradecido que estoy hermanazo, muchas pero muchas gracias me funciono totalmente :encouragement::encouragement::encouragement::encouragement::encouragement:

 

[wolfnick]

OMG! no tienes ni idea de lo agradecido que estoy hermanazo, muchas pero muchas gracias me funciono totalmente :encouragement::encouragement::encouragement::encouragement::encouragement:

De nada amigo, me alegro que te haya servido! Saludos

 

[Daniel Carvajal]

Para no abrir otro post de Ayuda, alguien sabe que debo agregar a este codigo

<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?