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
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 :cool::
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:
--- Cita de: Rododendro en 24 de Mayo de 2007, 12:33:56 pm ---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).
--- Fin de la cita ---
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
--- Citar ---Ya sabes: "Ver - Código fuente" para examinar la estructura de la página.
--- Fin de la cita ---
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: ---<link href="http://www.daboweb.com/templates/rhuk_solarflare_ii/css/template_css.css" rel="stylesheet" type="text/css"/>
--- Fin del código ---
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: ---<style type="text/css" title="currentStyle" media="screen">
@import "/197/197.css";
</style>
--- Fin del código ---
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: ---<!--[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]-->
--- Fin del código ---
En este caso, reconstruyendo una hipotética dirección absoluta pondremos:
--- Código: ---http://www.lawebquecorresponda/estilos/estilo-ie.css
--- Fin del código ---
Un saludo. Piero.
Rododendro:
Te agradezco la información, es importante conocer esos detalles.
Muchas gracias y un saludo.
Navegación
[#] Página Siguiente
[*] Página Anterior
Ir a la versión completa