Cambiar imagen con onClick

pzin · #1 (**permalink**) 03/02/2006, 22:15

Buenas.

He probado cambiando mil cosas, tampoco sé mucho de javascript, pero tengo algo así, y no funciona ni a tiros. :(

Código:

  <script language="JavaScript">
function cambia() {
    if(document.getElementById('cambia').src == "/imagenes/botones/mostrar-menu-principal.gif") {
      document.getElementById('cambia').src = "/imagenes/botones/ocultar-menu-principal.gif";
	} else {
	document.getElementById('cambia').src = "/imagenes/botones/mostrar-menu-principal.gif";
	}
}
  </script>
<a href="?m=g" onClick="cambia();"><img name="cambia" src="/imagenes/botones/mostrar-menu-principal.gif" class="muestraMenu"></a>

Luego, también quiero que funcione un "return false;", pero que lo he probado a meter en el onclick, pero sigue al vínculo de todas formas.
¿Alguien sabe cómo hace que esto funcione?

Un saludo.

JavierB · #2 (**permalink**) 04/02/2006, 03:56

Hola BoNeZ

En la imágen tienes puesto un name, pero en la función estás usando el id. Pon el enlace así y debería funcionarte:

Código:

<a href="?m=g" onClick="cambia(); return false"><img id="cambia" src=...

Saludos,

KarlanKas · #3 (**permalink**) 04/02/2006, 04:15

También puedes ponerlo así:

function cambia(pepe) {
ruta="/imagenes/botones/";
pepesrc=(pepe.src == ruta+"mostrar-menu-principal.gif")?ruta + "ocultar-menu-principal.gif":ruta + mostrar-menu-principal.gif";
}

y llamarlo con:
<img onClick="cambia()" id="cambia" src=...
Dejando el anchor igual.

caricatos · #4 (**permalink**) 04/02/2006, 04:25

Hola:

La costumbre de usar enlaces para los eventos no la creo recomendable... puedes usar la función en la misma imagen:

Código:

<img name="cambia" id="cambia" src="/imagenes/botones/mostrar-menu-principal.gif" class="muestraMenu" onclick="cambia()">

Ahora un par de apuntes:

Si lees el src de la imagen, los navegadores devuelven su ruta completa y no la relativa, así que no te funcionará el código tal como lo tienes.

if (laImagen.src == "http://www.tudominio.com/imagenes.botones/mostrar-menu-principal.gif")

Otra forma de que te funcionase, sería usando alguna otra variable global con la información de estado:

var estadoImagen = "original";

y la condición hacerla de otra manera...

if (estadoImagen == "original")...

y a la vez actualizar la variable global.

Saludos

pzin · #5 (**permalink**) 04/02/2006, 07:35

...........

pzin · #6 (**permalink**) 04/02/2006, 07:36

Cita:

Iniciado por BoNeZ

Aham, no sabía lo de las rutas.

Al final lo dejé así

Código HTML:

    if(document.cambia.src == 'http://www.dominio.com/imagenes/botones/mostrar-menu-principal.gif') {
      document.cambia.src = 'http://www.dominio.com/imagenes/botones/ocultar-menu-principal.gif';
	} else {
	document.cambia.src = 'http://www.dominio.com/imagenes/botones/mostrar-menu-principal.gif';
	}

Y funciona bien.
La función aparte de cambiar la imagen, cambia una capa, el menú, y lo de usar el enlace para el evento, lo haga para por si no se tiene activado javascript, que siga el enlace, y así cargue el otro menú, es decir, que haga el mismo efecto javascript, pero sin javascript.

Lo dicho, que funciona perfectamente, muchas gracias.