Foros de daboweb
MULTIMEDIA, Video digital, Grabación, Diseño gráfico, Diseño web, Programación => Webmasters - Diseño Web - Programación - Diseño gráfico => Mensaje iniciado por: Rododendro en 21 de Mayo de 2007, 06:22:15 pm
-
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?
-
Se puede hacer con CSS. Buscando en Google aparecen un montón de referencias:
http://www.google.es/search?q=rollover+css (http://www.google.es/search?q=rollover+css)
Un saludo.
-
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.
-
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 ;-)
-
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?
-
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 (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/ (http://alexsancho.name/archives/2006/06/rollover-de-imagenes-con-css/)
---
Y aquí te dejo otro que me ha gustado a mi :cool::
http://www.motuweb.com/techstuff/2x_css_rollover_demo.htm (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.
-
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 ;-)
-
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
-
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:
<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
<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:
<!--[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:
http://www.lawebquecorresponda/estilos/estilo-ie.css
Un saludo. Piero.
-
Te agradezco la información, es importante conocer esos detalles.
Muchas gracias y un saludo.
-
Después de diversas pruebas con varios códigos distintos ya tengo el asunto casi solucionado. Digo "casi" porque me quedan algunas dudas por resolver.
En primer lugar, lo que me despistó inicialmente con el modelo propuesto en http://ervdesign.net/blog/?p=88 fue el que en realidad, si he entendido bien, se maneja una sola imagen y no dos. Para hacer una prueba muy sencilla, con un programa de dibujo pueden elaborarse, por ejemplo, dos cuadrados de diferente color e idéntico tamaño (pongamos 100x100 px) y unirlos entre sí, formando una figura única de 200x100, y en el código adjudicar al bloque el valor 100px para width (-100 para hover). Con dibujos no veo pegas; ahora bien, yo apenas he manejado fotografías, por tanto debo preguntar: ¿cómo se unen dos fotos distintas para formar una sola que contenga a ambas?
En segundo lugar, me sorprende que en los tutoriales de CSS que he visto de momento apenas se menciona el tema de las imágenes. ¿Cómo se inserta y posiciona una foto -o un rollver- en un div que alberga el texto del documento?
Finalmente, en algunas páginas que muestran códigos a modo de ejemplo para lograr determinados efectos, se pide que para aplicarlos se contacte previamente con el webmaster. Si atendiendo ese requerimiento se le escribe al responsable de la web y tras un tiempo prudencial no contesta, ¿cómo debe interpretarse esa especie de "silencio administrativo"? ¿Puede o no aplicarse alguno de los códigos en cuestión?
-
Corregido el enlace, a ver que te indican.
Un saludo
-
Hola, Rododendro, es verdad que en algunos manuales de CSS pasan como de puntillas por el tema de las imágenes, pero no es la norma. Si quieres, echa un vistazo en http://css.maxdesign.com.au/floatutorial/index.htm (http://css.maxdesign.com.au/floatutorial/index.htm), creo que te será úti. (Está en inglés, pero es muy sencillo y didáctico).
Suerte y un saludo ;-)
-
En efecto, tal y como decías aparece todo bien explicado.
Gracias y un saludo.