Tema: 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?

         
 
     

[Gepetto]

Hola Rododendro.

Primero de todo te recomendaría que cuando cites código, pongas por lo menos un enlace a la web de donde lo has sacado (para no negarle el derecho de autoría a quien lo ha creado).

---

He estado buscando y he encontrado una página en la que aparece un código igual a ese:

http://ervdesign.net/blog/?p=88

Al final de esa página tienes un enlace para ver el "resultado final" de la explicación. Haz clic en ese enlace para ir al ejemplo, y en el navegador te vas al menú "Ver - Código fuente" para ver la estructuración de la página.

---

Aquí tienes otra página con un código similar, pero comentado:

http://alexsancho.name/archives/2006/06/rollover-de-imagenes-con-css/

---

Y aquí te dejo otro que me ha gustado a mi  :

http://www.motuweb.com/techstuff/2x_css_rollover_demo.htm

---

*Ya sabes: "Ver - Código fuente" para examinar la estructura de la página.

Un saludo.

[Rododendro]

Ciertamente es de justicia añadir un enlace a la página de donde se toma una información, el problema es que uno nunca sabe si al hacerlo puede ser luego interpretado como spam por los responsables del foro (hablo de "foro" en términos genéricos, no me refiero exclusivamente a éste ni mucho menos, es una circunstancia habitual en casi todos).

   He visitado esas páginas que me indicas y sí, los ejemplos son interesantes; como decía, la pega es que siempre se refieren a menúes de navegación, que habitualmente utilizan sólo un mero cambio de color en la imagen, y eso me despista un poco. Seguiré tu consejo de ver el código fuente para hacerme una mejor composición general.

  Muchas gracias y un saludo  

[destroyer]

Ciertamente es de justicia añadir un enlace a la página de donde se toma una información, el problema es que uno nunca sabe si al hacerlo puede ser luego interpretado como spam por los responsables del foro (hablo de "foro" en términos genéricos, no me refiero exclusivamente a éste ni mucho menos, es una circunstancia habitual en casi todos).

Ciertamente hay que darle el mérito a quien se lo curra. En este sentido en este foro no vas a tener ningún problema al respecto..
El Spam, publicidad, etc es otro cantar que no tiene nada que ver con lo expuesto anteriormente 

Un saludo

[Piero]

Hola Rododendro

Simplemente, voy a redundar en algo que te ha comentado Gepetto para añadir unos detalles que, seguramente, sobra precisar (pero nunca se sabe).

Me refiero a

Ya sabes: "Ver - Código fuente" para examinar la estructura de la página.

Al visualizar el código fuente de una página puedes tomar nota de la dirección del archivo css de la misma (cuando lo tiene, obviamente):

En ocasiones se tratará de una dirección absoluta.
Para hacerte un ejemplo de esta situación he escogido la portada de daboweb (jeje) donde, en el encabezado, puedes encontrar:

Código: [Seleccionar]

<link href="http://www.daboweb.com/templates/rhuk_solarflare_ii/css/template_css.css" rel="stylesheet" type="text/css"/>
Así tienes la oportunidad de copiar la url

http://www.daboweb.com/templates/rhuk_solarflare_ii/css/template_css.css


y pegarla tal cual en tu navegador para acceder al archivo css:


En otras ocasiones se tratará de una dirección relativa. En ese caso tendrás que “reconstruir” la dirección del archivo.

Para hacerte un ejemplo, recurro, una vez más, a zengarden:

http://www.csszengarden.com/?cssfile=/197/197.css&page=0

Mirando en el código fuente de esta página, encontrarás la ruta relativa del archivo css

Código: [Seleccionar]

<style type="text/css" title="currentStyle" media="screen">
@import "/197/197.css";
</style>

Lo cual quiere decir que en el directorio raíz de la web se ha creado una carpeta que se ha bautizado “197” y, en su interior, existe un archivo que se ha denominado “197.css”
De esta manera puedes “reconstruir” la ruta absoluta del archivo que resultará:


http://www.csszengarden.com/197/197.css


De esta manera tenemos la oportunidad de estudiar y aprender cómo se han conseguido determinados efectos o resultados.


En ocasiones, podrás encontrar también la ruta del archivo de instrucciones específicas para el IE para superar el problema de las incompatibilidades. Suele tratarse de una instrucción comentada de este tipo:

Código: [Seleccionar]

<!--[if lt IE 7]>
<link rel='stylesheet' type='text/css' href="estilos/estilo-ie.css" />
<script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>
<![endif]-->

En este caso, reconstruyendo una hipotética dirección absoluta pondremos:

Código: [Seleccionar]

http://www.lawebquecorresponda/estilos/estilo-ie.css

Un saludo. Piero.

[Rododendro]

Te agradezco la información, es importante conocer esos detalles.

   Muchas gracias y un saludo.