Foros del Web » Creando para Internet » HTML »

¿Desean un rollover con precarga SIN javascript?

Estas en el tema de ¿Desean un rollover con precarga SIN javascript? en el foro de HTML en Foros del Web. ¡Es posible! Solo utilizando CSS y la inteligencia... Como será construido: Utilizaremos un div , un elemento a , y un span para crear nuestro ...
  #1 (permalink)  
Antiguo 04/08/2004, 13:24
Avatar de KnowDemon  
Fecha de Ingreso: julio-2004
Ubicación: Ciudad de México
Mensajes: 544
Antigüedad: 13 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 13:32
  #2 (permalink)  
Antiguo 04/08/2004, 15:11
Avatar de monoswim
$moderador{'Esteban'}
 
Fecha de Ingreso: febrero-2002
Ubicación: Buenos Aires - Argentina
Mensajes: 8.762
Antigüedad: 15 años, 10 meses
Puntos: 90
No puedes poner un ejemplo online?

Gracis y Saludos
__________________
Esteban Quintana
  #3 (permalink)  
Antiguo 04/08/2004, 17:51
 
Fecha de Ingreso: agosto-2003
Mensajes: 499
Antigüedad: 14 años, 3 meses
Puntos: 1
Buen código :)

Otra solución sería crear una sola imagen con los dos estados on y off, ponerla como imagen de fondo del div y mover su posición para mostrar la parte on con el :hover
__________________
Plaza Mozilla
http://www.chevrel.org/es/noticias/
  #4 (permalink)  
Antiguo 05/08/2004, 00:30
Avatar de KnowDemon  
Fecha de Ingreso: julio-2004
Ubicación: Ciudad de México
Mensajes: 544
Antigüedad: 13 años, 5 meses
Puntos: 2
A ver... un ejemplo super improvisado en línea (hojalá el servidor no me falle):

http://dhost.info/genesceptica/ejemplo/ejemplo.html
__________________
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."
  #5 (permalink)  
Antiguo 05/08/2004, 10:29
Avatar de monoswim
$moderador{'Esteban'}
 
Fecha de Ingreso: febrero-2002
Ubicación: Buenos Aires - Argentina
Mensajes: 8.762
Antigüedad: 15 años, 10 meses
Puntos: 90
Muy bueno, te felicito y gracias por compartirlo

Saludos
__________________
Esteban Quintana
  #6 (permalink)  
Antiguo 05/08/2004, 11:17
Avatar de ztikma  
Fecha de Ingreso: diciembre-2001
Ubicación: Viña del Mar
Mensajes: 1.144
Antigüedad: 16 años
Puntos: 1
Sólo sirve para páginas alineadas a la izquierda, si lo haces en una alineada al centro el roll over sale en su posición fija


saludos
__________________
La Pana
  #7 (permalink)  
Antiguo 05/08/2004, 17:00
 
Fecha de Ingreso: junio-2004
Ubicación: Coatepec, Veracruz
Mensajes: 80
Antigüedad: 13 años, 5 meses
Puntos: 7
¡Muy bueno!
Y claro que funciona con páginas centradas.
Ztikma, prueba meter todo en un div principal centrado de esta forma {margin-left:auto; margin-right:auto;} (jeje, éste método lo acabo de aprender de PascalC, en este mismo foro) y verás que funciona perfectamente.
__________________
HabitatWeb | @roccons
  #8 (permalink)  
Antiguo 06/08/2004, 01:30
Avatar de KnowDemon  
Fecha de Ingreso: julio-2004
Ubicación: Ciudad de México
Mensajes: 544
Antigüedad: 13 años, 5 meses
Puntos: 2
Cita:
Iniciado por ztikma
Sólo sirve para páginas alineadas a la izquierda, si lo haces en una alineada al centro el roll over sale en su posición fija


saludos
¡Por supuesto que no!

El problema debe estar en una malinterpretación de lo que es un elemento de bloque... Solo coloca el elemento de bloque (el div) donde desees... y listo. No debe haber mayor problema.
__________________
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."
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:38.