Efectos dinámicos de imágenes.

[eltransito]

Estoy empezando con esto del css pero me tiene fascinado. Tengo entendido que esta página está construida enteramente con css y xhtml(o html no lo sé). El caso es que no consigo entender ni aún viendo el código, como se hacen los efectos, que también he visto en alguna otra página, de variar las tonalidades de imágenes que hacen de cabecera y menú por ejemplo al pasar el cursor por encima. Supongo que hay alguna manera jugando con los backgrounds etc. pero no logro ver como. ¿Alguien me podría echar una mano? Gracias por adelantado

[PatomaS]

Hola

Bueno, vamos por partes.

En efecto esa página está hecha con xhtml y cumple con las normativas xhtml 1.0 transitional; una de las tres versiones de este lenguaje.

Agregaré que el xhtml es lo mismo que el html, al menos piensa en el de esa forma dado que es una evolcuión del mismo, igual que ha habido diversas versiones, ... 3.2, 4.0, 4.01, ahora hay xhtml 1.0 (transitional, strict y frameset), xhtml 1.1 y en un futuro xhtml 2.0.

Respecto a los efectos de las imágenes, lo de cambiar una por otra cuando pasas el ratón, se puede hacer de varias formas, una es con javascript y otra es con css.

Para hacerlo con javascript, utilizas los detectores de eventos onmouseover y onmouseout, de manera que llamen a la imagen correspondiente cuando se pasa el rató por encima y cuando se saca del área de la imagen.

Con css se haría mediante los modificadores a:hover y a:link (se puede complementar con el a:active, a:visited). pero en principio con esos dos basta. El hover, indica que el ratón está sobre el vínculo y com oesas imágenes son vínculos, se podría utilizar.

Especificamente esta página lo hace así:

Código:

#dailymenu a:hover	{background: transparent url(/i04/nav.gif) 0 -30px no-repeat;}
#dwwsmenu a:hover {background: transparent url(/i04/nav.gif) -139px -30px no-repeat;}
#glammenu a:hover {background: transparent url(/i04/nav.gif) -385px -30px no-repeat;}
#classicsmenu a:hover {background: transparent url(/i04/nav.gif) -538px -30px no-repeat;}
#aboutmenu a:hover {background: transparent url(/i04/nav.gif) -634px -30px no-repeat;}

Te recomiendo que revises los vínculos que hay en este mensaje de manera que empieces a practicar un poco con las css y el xhtml, puedes utilizar css con html normal.

También es buena idea que revises estos foros en busca de más manuales y tutoriales, te vendrán muy bien.

Suerte

Felicidad

[eltransito]

O.K. Sigo tus indicaciones, muchas gracias.

P.D: También es una posibilidad usar filtros ¿no? He encontrado al menos esto por ahí .

[PatomaS]

Hola

el problema de ese tipo de filtros que encontraste, es que solo funcionan en explorer, se hacen con un código propietario y eso impide que funcione bien en los demás navegadores.

Así que mejor utiliza javascript o css estandar.

Felicidad

[iccaro]

Ok gracias, si no funciona más que en explorer no me interesa, yo mismo uso Mozilla. Gracias.

[caricatos]

Hola a todos:

Si bien los filtros son cosa microchoff hay algunas cosas que se pueden adaptar con mozilla/netscape, entre otras el filtro alpha, que en mozilla es estilo moz-opacity...

Lamentablemente no conozco ninguna forma de implementarlo en opera, aunque creo haber visto en w3.org que la forma estandar sería un estilo "opacity"

Esperemos que en el futuro se pongan todos de acuerdo y no sigan obligándonos a hacer distinciones de código según el navegador...

Si te interesa el código para netscape haz una búsqueda en los foros y seguro que encuentars algo... de no ser así, avisa y con gusto te orientaremos.

Saludos