HTML - intercambio de imagenes al mouseover y al clic

hola,

a ver si me sé explicar bien, porque me estoy volviendo un poco loco con este tema. ...

vamos a imaginar un menú, hecho con imagenes que ponga lo siguiente:

INICIO GALERIAS CONTACTO

repito, son imágines.

hacer que cuando pases el cursor por encima, por ejemplo INICIO se ponga en rojo, es tan fácil como hacer una imagen que ponga INICIO rojo, y hacer que cambie y con el mouseover y esto que cuando quites el cursor de encima se vuelva negro, pues hasta ahí, muy fácil.

por otro lado, hacer que cuando hagas clic en cualquiera, se quede en rojo, y las demás en negro, pues lo mismo, en el mouseclic haces que esa imagen pase a la roja, y separando con ; las otras a negro.

el problema digamos, es que quiero las dos cosas. es decir, que cuando pases el cursor por encima, se ponga rojo (el cambio de imagen) al quitar el cursor vuelva a negro (el restore), pero además, que cuando hagas clic, ese se quede en rojo fijo.

hasta ahí lo he hecho, pero el problema es que al quitar el cursor de encima, se vuelve a negro.

no sé si me he explicado, pero la pregunta concreta es:

¿se puede hacer que cambie la imagen y restore al pasar el cursor, pero que además se quede la segunda imagen por decirlo de alguna manera, fija al hacer el clic?

muchas gracias, y perdón por el tostón.

El tema del mouseover lo puedes resolver con CSS, para el caso debes tener de preferencia un "sprite" es decir, una imagen compuesta por el estado normal del boton y el comportamiento al pasar el cursor sobre el mismo. Por ejemplo, si la imagen para inicio es de 100 x 30 px deberás ensamblar una imagen que contenga la segunda imagen, lo cual debe generar una imagen de 100 x 60 px para poder realizar lo siguiente:



Como podrás notar en el ejemplo, la clase ".test" controla las dimensiones del vínculo inferior al determinar el ancho, alto y la imagen de fondo. Con ".test:hover" controlas el cambio de imagen al pasar el mouse sobre el vínculo con base en el ejemplo del sprite.

Para el tema de mantener el estado activo del vínculo, debes emplear algún Javascript que te ayude a controlarlo. Tal vez te sea de utilidad este link.

Saludos.

timbre fiscal | cfdi | geotrust | thawte

DerangedMX, muchas gracias por tu respuestas, pero he de serte sincero. No entiendo muy bien lo que quieres decir.

en realidad, no necesito que cambie de tamaño (no sé si te he entendido bien), sino que simplemente, cuando pases el mouse sobre una imagen cambie a una segunda imagen, si quitas el cursor vuelva a la primera, o si haces clic, se quede fija la segunda.

igual no me explico bien.

he estado viendo el link que me pones, pero no encuentro nada que pueda ayudarme en lo que concretamente necesito.

te agradecería si pudieras darme algún consejo más.

muchas gracias.
saludos.