Foros del Web » Programando para Internet » Javascript »

Cambiar varias imágenes al hacer click

Estas en el tema de Cambiar varias imágenes al hacer click en el foro de Javascript en Foros del Web. Hola!! Tengo un código sencillito en el que quisiera cambiar una imagen por otra al hacer click en la imagen, y al volver a hacer ...
  #1 (permalink)  
Antiguo 12/06/2015, 05:14
 
Fecha de Ingreso: mayo-2015
Mensajes: 12
Antigüedad: 8 años, 11 meses
Puntos: 0
Cambiar varias imágenes al hacer click

Hola!!

Tengo un código sencillito en el que quisiera cambiar una imagen por otra al hacer click en la imagen, y al volver a hacer click, que vuelva a la inicial.

Lo que tengo es lo siguiente:

<head>
<SCRIPT LANGUAGE="JavaScript">
mi_imagen1=new Image
mi_imagen1.src="http://files.123inventatuweb.com/acens8631/image/fax.png"
mi_imagen2=new Image
mi_imagen2.src="http://files.123inventatuweb.com/acens8631/image/modeloficha.jpg"
mi_imagen3=new Image
mi_imagen3.src="http://files.123inventatuweb.com/acens8631/image/hojapedidoicon.jpg"
mi_imagen4=new Image
mi_imagen4.src="http://files.123inventatuweb.com/acens8631/image/68796dc99c3746c392b757947552c512.jpg"
var i=1;
function cambia_imagen() {
if (i == 3)
{
document.images['prueba1'].src=mi_imagen4.src
i=4;
}
else
{
document.images['prueba1'].src=mi_imagen3.src;
i=3;
}
}
function cambia_imagen() {
if (i == 1)
{
document.images['prueba'].src=mi_imagen2.src
i=2;
}
else
{
document.images['prueba'].src=mi_imagen1.src;
i=1;
}
}
</script>
</head>
<body>
<img src="http://files.123inventatuweb.com/acens8631/image/fax.png" name="prueba" onMousedown="cambia_imagen()">
<img src="
http://files.123inventatuweb.com/acens8631/image/hojapedidoicon.jpg
" name="prueba1" onMousedown="cambia_imagen()"
</body>

Pero sólo he conseguido que me cambie la primera imagen con el primer click. Cuando le doy a la segunda imagen, me vuelve a cambiar sólo la primera.

Qué estoy haciendo mal?? Esto lo necesito con varias imágenes, no sólo con dos, pero sabiendo dónde está el problema con dos imágenes, supongo que sabré hacerlo con más...

Y de paso... si me ayudáis con algún efecto un poco suave para que se abra la imagen... porque tiene una apertura un poco bestia!

Para que el puntero cambie cuando pasa por encima de la imagen, qué tengo que hacer??

Muchas gracias!!!!!!!!!
  #2 (permalink)  
Antiguo 12/06/2015, 10:25
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 3 meses
Puntos: 206
Respuesta: Cambiar varias imágenes al hacer click

http://jsfiddle.net/marlanga/4kse24co/2/
Css puro.

No tengo mucho que hacer, y he querido practicar lo de voltear la imagen como si fuera una carta, descubriendo que chrome la caga un poco (creo que es culpa de chrome) si en vez de un div, usas directamente un img con un display block.
http://jsfiddle.net/marlanga/4kse24co/3/

Última edición por marlanga; 12/06/2015 a las 11:30
  #3 (permalink)  
Antiguo 15/06/2015, 01:53
 
Fecha de Ingreso: mayo-2015
Mensajes: 12
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Cambiar varias imágenes al hacer click

Muchas gracias marlanga!!

Lo he copiado tal cual lo has puesto y... no funciona... No tengo ni idea de por qué, pero no se cambia la imagen ni al hacer click, ni con un mouseover, ni nada de nada... Tal vez sea porque donde yo lo estoy introduciendo es un BK 7 y no admita este tipo de CSS...

Te voy a explicar la idea que tengo, para ver si tu ves mejor la luz que yo:

En realidad necesito un menú que, cuando pulse en cada uno de los botones, me abra una imagen. Preferiría que no fuera un popup porque para eso redirijo cada uno de los botones del menú a una página de la web con esa imagen y listo... Preferiría que la imagen se ubicara en un lugar concreto de la página.

Como pensé que lo del menú tal vez era más complicado, pensé en usar imágenes pequeñas que, al pulsarlas, cambiaran a otra imagen distinta (gran tamaño). Pero claro, tiene un añadido, tiene que ser compatible con BK7...

Alguna idea?????

Muchísimas gracias!!!!!!!!!!!!!!!!!!!!

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:00.