Ver Mensaje Individual
  #1 (permalink)  
Antiguo 04/08/2004, 12:24
Avatar de KnowDemon
KnowDemon
 
Fecha de Ingreso: julio-2004
Ubicación: Ciudad de México
Mensajes: 544
Antigüedad: 20 años, 5 meses
Puntos: 2
¿Desean un rollover con precarga SIN javascript?

¡Es posible! Solo utilizando CSS y la inteligencia...

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="roll1a">
<a id="roll1b" href="pagina.html"><span>Texto</span></a>
</div>


Y el código CSS así:

div#roll1a, a#roll1b{
height: 50px;
width: 100px;
}
div#roll1a{
background: url(resaltado.png);
}
a#roll1b{
display: block;
background: url(sinresaltar.png);
}
a#roll1b:hover{
background: transparent;
}
a#roll1b 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."

Última edición por KnowDemon; 04/08/2004 a las 12:32