KompoZer: botones rollover sin texto con CSS

Voy a aprovechar este post para dar la bienvenida a KompoZer 0.8b1 que ya está disponible en español e incluye unos cuantos cambios respecto a la 0.8a4. Dentro de unos días contaré en qué medida (poca) he colaborado en la nueva imagen del logo de la futura versión 0.8.
Crear un efecto rollover en KompoZer usando su editor de CSS es relativamente sencillo si se conserva el texto con el link y ya lo traté en su momento con este otro tutorial.
El asunto se complica un poco si lo que queremos es que el botón actúe de la misma manera pero sin que aparezca el texto del enlace. Un efecto típico es poner un menú de imágenes en blanco y negro o desenfocadas y conseguir que se pongan en color o que se enfoquen al pasar con el ratón por encima.

Es posible que haya otros métodos igual de efectivos que el que yo voy a describir aquí pero este funciona sin problema.

Lo primero, como es lógico, es contar con una única imagen que incluya las dos posiciones del rollover para la que usaremos esta imagen

http://img371.imageshack.us/img371/1931/alexredbullyd4.jpg

Y este es el rollover creado con la ayuda de Gimp (300x263px)

Ya en KompoZer creamos el contenedor DIV en el que se incluirá este rollover. Este contenedor puede que esté dentro de otro u otras mil posibilidades que nosotros aquí no vamos a detallar. A ese contenedor genérico le asignamos una id=»menu» (aunque aquí no editaremos ninguna de sus características). En ese contenedor creamos una lista de viñetas para los enlaces del menú a la que le damos una id=»rollovers» y al primero de los enlaces le asignamos una id=»rollover_01″

Por último creamos un enlace, de momento un enlace nulo con destino # para enlace_01:

Ya en el editor de CSS creamos las reglas de estilo #menu, #rollovers y #rollover_01:

A las que le añadimos un par de ellas más:

#rollovers a:link para editar el comportamiento de los enlaces de texto de todos y cada uno de los rollovers que pongamos en esta lista.
#rollover_01 a:hover para editar el comportamiento del enlace de texto cuando el ratón pasa por encima.

Comenzamos por eliminarle las viñetas a la lista editando la regla #rollovers en la pestaña Listas escogiendo la opción Tipo para el estilo de la lista: Ninguno.

Editamos ahora la regla de estilo #rollovers a:link que es donde se va a cocer el verdadero truco para ocultar el texto. Nos centramos en los campos de la pestaña Caja:

Anchura: la de las imágenes 263px. Nada que no obedezca a la más pura lógica
Altura: 0px (cero píxeles!!). Es el principio del truco. No dejamos sitio para que se muestre el texto del enlace. Pero ¿qué pasa con la imagen de fondo?
Margen interno (padding) superior: 150px. Es el valor de la altura de la imagen. Con esto estamos dejando hueco para que aparezca la imagen por encima de la altura de 0px de antes. Esto genera un problema. El texto del enlace queda desplazado fuera de la caja y es visible.
Desbordamiento: oculto. ¿Qué tiene que hacer el navegador con ese excedente en la caja?. En nuestro caso queremos que no sea visible.
Mostrar como: bloque. Para que todo el espacio de la caja sea sensible al efecto del enlace.

Hemos conseguido que la imagen se comporte como un enlace que nos dirigirá a la dirección que le especifiquemos pero todavía falta el efecto rollover al pasar el ratón por encima. Es tan sencillo como editar la imagen de fondo que deseamos para #rollover_01 a:hover. En realidad se trata de la misma con la particularidad de que tiene que mostrar la parte inferior

Un vistazo a las posibilidades de esta herramienta nos puede llevar rápido a la conclusión de que podemos hacer composiciones más complejas para cargar una sola imagen y poder mostrar la parte que nos interese en cada momento. Por ejemplo podemos ampliar el efecto rollover con un cambio de imagen en el momento en que el usuario hace clic creando la regla de estilo #rollover_01 a:active.