Canvio de imagen usando funcion onclick

[SeaPirates]

Verán estoy creando un menu y quiero que cuando pulsen un botón la imagen del canvie por otra de color mas claro, eso seria la funcion onclick, pero luego cuando pulsa otro boton queria que volviese a la imagen inicial, y no se cual es esa funcion, cual seria?

[kseso?]

Hola SeaPirates
Para ese efecto no es necesario encargárselo a eventos de js, puedes realizarlo de forma sencilla con css:
Un ejemplo de Mikmoro
El mismo efecto pero algo más "aparatoso".
El cambio se efectúa con "a:hover". Si la imagen la cambias al hacer click, no habrá tiempo de verla, pues al ser enlace comenzará la carga de la nueva página. Claro que si estás haciendo una navegación por pestañas (recarga en el mismo documento) lo anterior no es aplicable.

En ambos casos el css está en el head de cada html.

Cualquier duda, comentas.

Un saludo

[vzet82]

Lo puedes hacer también con onclick solo que detectarás cual es la imagen que se está mostrando. Si se está mostrando un (por ejemplo la más clara) pasará a mostrarse la otra al hacer click, y al revés en caso contrario.

Pasas de una a otra con el mismo evento onclick detectando la imagen mostrada actualmente.

Creo que te referias a eso, asi que espero que te sirva.

Un saludo!

[vzet82]

Kseso? , pero para hacerlo con css sería lo equivalente a un evento onmouseover que es lo que se ve en las webs que pones de ejemplo no?? pero para lo que dice seapirates se podría hacer con css?? (por ahora no se me ocurre...) . Me refiero a cambiar la imagen al pulsar sobre ella (que creo que es lo que he entendido que pregunta).

PD: Has escrito el post mientras escribía el anterior, por eso no había leído tu post antes de escribir el mio anterior ...

[kseso?]

Hola Vzet82
Es lo que por aquí llamamos choque. Es muy frecuente. Verás que hay respuestas, incluso en el mismo minuto, y que alguna de ellas termina con algo así:

EDITO:

Pero en esta ocasión te gané por la mano

Bueno, a tu pregunta:
como decía, si el cambio de imagen del fondo se produce al pinchar en el enlace y el destino es otra página, el efecto apenas será visible (sobre todo si todavía no se ha cargado la segunda imagen y es algo pesada).

Mi sugerencia fue hacerlo con css y con el efecto :hover sobre el enlace:

a {backgground: url(imag1.jpg)}
a:hover {background: irl(imag2.jpg}

Y en el ejemplo 2º que enlazaba, verás que pese a que la segunda imagen es mucho mayor, no hay demora y el cambio se produce "ipsofacto". Es porque hay por medio un sprite (todas las imágenes usadas, las 6 están en el mismo archivo .jpg).

No quiero decir que un método sea mejor que otro, sólo que existen formas distintas de lograrlo.

Un saludo

[vzet82]

Si si, has sido más rápido por esta vez ....

De todas formas, aunque está claro que es algo que tendrá que confirmar SeaPirates, creo que el objetivo de lo que pretende él y lo que cuentas tu puede que sea distinto.

Con tu ejemplo, lo que haces es mostrar un menú sobre el cuál pulsarán. Al pulsar irás a otra página. En ese caso no tiene sentido el cambiar la imagen del botón, porque como comentas, este cambio no se apreciará. Pero imagínate el caso en el que, por ejemplo tengas un iframe o siemplemente una web en la que quieres que se quede marcado el botón con el título de la página que estás mostrando. Si solo tienes el evento hover, cambiará la imagen al pasar sobre ella, pero no permanecerá con una imagen distinta ese botón que está indicando la página que se está mostrando. Si luego pulsas otro botón, cambiará de página, cambiará la imagen a la antigua en el botón pulsado anteriormente y cambiará la imagen del nuevo boton pulsado para que se sepa en que página estamos. Es decir, que quieres en todo momento que se quede el boton con la nueva imagen marcado, hasta que pulses otro botón. Creo que va por ahí lo que quiere...

Todo esto (el hacerlo de una forma o de otra) tendrá que ver con la intención que tenga SeaPirates con ese menu.

Saludos!

[kseso?]

Iniciado por SeaPirates

Verán estoy creando un menu y quiero que cuando pulsen un botón la imagen del canvie por otra de color mas claro, eso seria la funcion onclick, pero luego cuando pulsa otro boton queria que volviese a la imagen inicial, y no se cual es esa funcion, cual seria?

Leyendo más detenidamente la pregunta:
Creo que hay recarga de contenidos y vuelta al estado inicial del enlace.

Entonces sólo sería cuestión de definir las distintas pseudo-clases:

a:link
a:visited
a:hover
a:active

en ese orden en el css.

[SeaPirates]

muchas gracias!! ya lo tengo, muchisimas gracias a todos! +1