Consulta sobre rollover en botón

[marx-pola]

Hola gente! Me surgió una duda sobre hacer un rollover sobre un botón.

Quisiera saber si se puede... al pasar el mouse sobre un botón, que la imagen cambie, pero al presionar sobre ese botón, que quede esa segunda imagen, como si la 2da imagen mostrara que ese link está presionado, se entiende? Y si se puede eliminar la "manito" sobre la imagen que ya está presionada.

Espero haberme expresado correctamente.

Muchas gracias. Marx.

[braulito]

Se puede hacer más simple con CSS, utilizando las pseudo-clases, un pequeño ejemplo de esto sería...

Código:

a {
    display: block;
    width: 220px;
    height: 91px;
    background: url('imagencompleta.jpg') no-repeat 0 0;
    border: 0 !important;
}
a:hover {
    background: url('imagencompleta.jpg') no-repeat 0 -91px;
       /*-91px mueve la imagen un poco más abajo al pasarle el mouse*/
}

a span {
 display: none;
}
<a href="http://link" ><span>Enlace</span></a>

Donde imagencompleta.jpg es una imagen de este tipo donde tiene ambos efectos.

Espero te ayude...

[marx-pola]

mmmm... no me aparece la 2da imagen. Cuando hago el rollover desaparece la misma. Además, por más que presione sobre el enlace, no queda marcada la 2da imagen, mostrando que ese link está presionado.
Gracias igualmente.

Me olvidaba... esto es para un juego de solapas q ya tengo armado, por eso necesitaría que al presionar sobre esa imagen (q trae otra información) quede marcada como presionada.

Gracias a todos.

[marx-pola]

Yo tengo este código que me lo generó el Dreamweaver. Así me funciona perfectamente. Lo único que tendría que agregarle es al presionar sobre el boton, que quede la imagen botonserviciosb.jpg

Código:

<a href="javascript:microinf.solapas('Servicios');" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','micrositio/botonserviciosb.jpg',1)">
<img src="micrositio/botonservicios.jpg" name="Image6" width="147" height="67" border="0">

¿Se puede hacer eso? Gracias.