Tema: FAQ's de CSS
Ver Mensaje Individual
  #44 (permalink)  
Antiguo 26/12/2004, 22:54
Avatar de KnowDemon
KnowDemon
 
Fecha de Ingreso: julio-2004
Ubicación: Ciudad de México
Mensajes: 544
Antigüedad: 19 años, 8 meses
Puntos: 2
FAQ 43. Rollover con precarga SIN javascript

Pregunta: ¿Es posible construir un rollover con CSS?

¡Es posible!...

Como será construido:

Utilizaremos un div, un elemento a, y un span para crear nuestro rollover.

Supongamos que nuestro rollover mide 100x50 pixeles.

El HTML quedará más o menos así:

<div id="resaltado">
<a id="sinresaltar" href="pagina.html"><span>Texto</span></a>
</div>


Y el código CSS así:

div#resaltado, a#sinresaltar{
height: 50px;
width: 100px;
}
div#resaltado{
background: url(resaltado.png);
}
a#sinresaltar{
display: block;
background: url(sinresaltar.png);
}
a#sinresaltar:hover{
background: transparent;
}
a#sinresaltar span{
display: none;
}

El div nos servira para precargar la imagen de resalte del rollover pues lo usamos como su fondo... que solo se descubrira cuando pase el ratón sobre a, de los contrario se verá el fondo de a, que es el rollover sin resaltar.

El span lo usamos para aquellos gestores de contenido no gráficos, para que el usuario tenga información sobre el enlace... En navegadores gráficos no se verá...

Voalá!!!!
__________________
Mi pequeño espacio en la web: VisiónE
"El cosmos es todo lo que es, todo lo que fue, y todo lo que será alguna vez."