Foros del Web » Creando para Internet » CSS »

Efectos dinámicos de imágenes.

Estas en el tema de Efectos dinámicos de imágenes. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/06/2004, 05:19
 
Fecha de Ingreso: febrero-2004
Ubicación: Madrid
Mensajes: 65
Antigüedad: 13 años, 10 meses
Puntos: 0
Efectos dinámicos de imágenes.

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
  #2 (permalink)  
Antiguo 15/06/2004, 06:01
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
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
__________________
¡ hey, hou, hou, hey !
  #3 (permalink)  
Antiguo 15/06/2004, 06:26
 
Fecha de Ingreso: febrero-2004
Ubicación: Madrid
Mensajes: 65
Antigüedad: 13 años, 10 meses
Puntos: 0
O.K. Sigo tus indicaciones, muchas gracias.

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

Última edición por eltransito; 15/06/2004 a las 06:29
  #4 (permalink)  
Antiguo 15/06/2004, 17:19
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
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
__________________
¡ hey, hou, hou, hey !
  #5 (permalink)  
Antiguo 16/06/2004, 08:38
 
Fecha de Ingreso: marzo-2004
Mensajes: 28
Antigüedad: 13 años, 9 meses
Puntos: 0
Ok gracias, si no funciona más que en explorer no me interesa, yo mismo uso Mozilla. Gracias.
  #6 (permalink)  
Antiguo 16/06/2004, 09:47
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:19.