MULTIMEDIA, Video digital, Grabación, Diseño gráfico, Diseño web, Programación > Webmasters - Diseño Web - Programación - Diseño gráfico
Rollover sin Javascript
Rododendro:
He intentado generar un efecto rollover, pero éste sólo me funciona cuando se pone el cursor sobre él, antes de eso aparece el cuadro de la imagen vacío. De las explicaciones que he encontrado en internet, he creído entender que se necesita algo así como un script de precarga de imagen. Mi pregunta es: ¿existe algún método alternativo para crear un rollover que muestre la imagen desde el principio y que, por tanto, no precise un script añadido?
Gepetto:
Se puede hacer con CSS. Buscando en Google aparecen un montón de referencias:
http://www.google.es/search?q=rollover+css
Un saludo.
Rododendro:
Imaginaba que habría alguna variante dentro del método más tradicional, pero no suponía una solución con CSS, gracias por hacérmelo saber.
Gepetto:
De nada Rododendro.
Es posible que al principio te cueste un poco que el rollover se vea correctamente en todos los navegadores, pero se puede conseguir. Ánimo y al toro ;-)
Rododendro:
Estos dos últimos días he probado varias veces dos modelos de rollover que no requieren precarga, uno CSS puro y el otro híbrido (con una pizca de Javascript), hallados en la red. Ninguno me ha funcionado, así que paso a exponer el código de uno de ellos, concretamente el de CSS puro, que aparece detallado en muchas páginas sobre el asunto.
Para empezar, se dice que el truco reside en una imagen de fondo integrada en un contenedor cuya anchura es la mitad del ancho de la imagen, y con un efecto seudorollover se muestra la otra mitad del fondo.
Lo primero indican marcar el enlace para el rollover, ej:
<a href="#" title="RolloverCSS" class="rollover">bosque</a>
El CSS usado es:
a {
outline: none;
.rollover {
display: block;
width: 200px;
height: 130px;
background: url(img/rollover.jpg) no-repeat;
text-indent: -9999px;
}
a.rollover:link, a.rollover:visited, a.rollover:active {
background: url(img/rollover.jpg) no-repeat;
}
a.rollover:hover {
background-position: -200px;
}
He ensayado infructuosamente varias veces un código simila y esto me suscita unas cuantas dudas. Si el ejemplo viniera detallado con una página completa sería más claro para mí. Por ejemplo; ¿se supone que el enlace descrito inicialmente va en el body (o en la tabla o div incluido en él) y que el CSS va en la cabecera? Y si el rollover tiene que figurar precisamente en una tabla o capa, ¿no fuerza esto la anchura de la imagen a usar? Y por último: las imágenes mostradas en los ejemplos son dos variantes de una sola, como para usar en menús de navegación. ¿No sirven para esta modalidad imágenes de igual tamaño pero de diferente contenido?
Navegación
[#] Página Siguiente
Ir a la versión completa