Foros del Web » Programación web » Javascript »

Efecto en botones (Fade)

Estas en el tema de Efecto en botones (Fade) en el foro de Javascript en Foros del Web. Quisiera hacer unos botones para mi foro como los de esta página (La parte superior): http://foro.mambohispano.org/ Ví el código del botón y el éste: Código ...
  #1 (permalink)  
Antiguo 09/10/2005, 06:06
Avatar de metacortex
Moderador
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 8.859
Antigüedad: 10 años, 1 mes
Puntos: 784
Efecto en botones (Fade)

Quisiera hacer unos botones para mi foro como los de esta página (La parte superior):

http://foro.mambohispano.org/

Ví el código del botón y el éste:

Código HTML:
 <td width="39"><!-- *** Start Register *** -->
              <table width="78" height="39" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td background="aria/misc/register.gif"><a href="register.php?"
		onMouseOver="JSFX.fadeIn('register')"
		onMouseOut="JSFX.fadeOut('register')"><img name="register" class="imgFader"
		src="aria/misc/register.gif"  width="78" height="39" border="0"></a></td>
                </tr>
            </table></td> 
Ahí se nombra una clase "imgFader" que no aparece en el CSS del cód. fuente. Mi pregunta es la siguiente ¿Ese efecto de JS se puede hacer con CSS?.

También vi la FAQ 15, pero no estoy seguro si esa es la manera. Si alguien puede orientarme al respecto le estaría muy agradecido.
  #2 (permalink)  
Antiguo 09/10/2005, 06:31
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 11 años, 1 mes
Puntos: 1
con css solo se puede hacer un cambio instantaneo. para un fade necesitaras js.
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #3 (permalink)  
Antiguo 09/10/2005, 07:14
 
Fecha de Ingreso: agosto-2005
Mensajes: 125
Antigüedad: 8 años, 11 meses
Puntos: 0
Justamente en el foro de (X)HTML pusieron esta dirección que te puede servir:
http://www.dynamicdrive.com/dynamici...hlightgrad.htm

Saludos
__________________
Andrés Gattinoni
------------------------
¿Necesita un lugar en Internet? Hospedaje web en Argentina.
Planes desde $5 argentinos - Alojamiento ideal para Blogs
  #4 (permalink)  
Antiguo 09/10/2005, 09:36
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.050
Antigüedad: 12 años, 3 meses
Puntos: 1127
Hola:

Bueno, ya te han dicho que con css no es posible (aunque más de una vez he pensado que algo era imposible y aparecieron respuestas... )

En javascript (con algo de css) he participado en este mensaje: http://www.forosdelweb.com/f13/fadeout-talbla-159137/ y es bastante fácil de implementar... Si te interesa, te puedo indicar como usarlo

Viendo el ejemplo, me parece que se trata de imágenes de fondo de esos botones... En base a los colores que uses habría que crear unas 3 imágenes con la altura de los botones y el ancho de 1 pixel y hacer un script que cambie la imagen de fondo transitando con esas imágenes.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 09/10/2005, 10:10
Avatar de metacortex
Moderador
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 8.859
Antigüedad: 10 años, 1 mes
Puntos: 784
Gracias amigos por responder. Tal como lo has mencionado Caricatos, Kemie tiene razón. De hecho hace rato me tropecé con el post que linkeaste y bienvenida esa explicación pana Caricatos. Un detalle que te cuento es que guardé el index y me fijé que cada botón tiene 2 imágenes, mira esto:



La imagen de la derecha aparece visible por defecto, pero cuando el mouse se posa sobre ella entonces desaparece dejando ver la de la izquierda. Es como si las 2 imágenes estuvieran cargadas al mismo tiempo (una sobre otra) y con la acción del ratón la de arriba perdiera el valor alfa hasta el 0%. Al principio pensé que se trataba de un botón flash, pero al cerciorarme de que era un efecto JS me sorprendí (En verdad es buenísimo).

Como te decía pasé de largo el post que mencionaste porque el ejemplo no incluía este caso de 2 imágenes. Todo esto te lo digo desde mi completa ignorancia del tema, así que lo más probable es que esté equivocado . Bueno viejo, ya estoy sentado en el primer pupitre, con cuaderno nuevo y lápiz afilado. Gracias por todo .
  #6 (permalink)  
Antiguo 09/10/2005, 18:03
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.050
Antigüedad: 12 años, 3 meses
Puntos: 1127
Hola Meta:

Estuve viendo la página con opera, y al no tener soporte para "opacidad" se ve igual a un simple rollover...

Se puede hacer un rollover con estilos y javascrpt por supuesto, poniendo una capa con position: relative; y otras 2 capas del mismo tamaño y en la misma posición pero con posición absoluta y diferentes fondos/imágenes aplicando onmouseover en la superior para ocultarla, y onmouseout a la inferior para volver a mostrar la superior... En el menú de la página de mi perfil (ya sabes, de caricaturas) aplico esta técnica... pero para el efecto fade es obligatorio un retraso, y fondos/imágenes transitorias.

Para el efecto fade con opacidad, puedes ver unas transiciones en la página de tunait (no recuerdo si es en una galería o en el carrousel...)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #7 (permalink)  
Antiguo 09/10/2005, 20:41
Avatar de ramm  
Fecha de Ingreso: junio-2004
Ubicación: Guadalajara
Mensajes: 207
Antigüedad: 10 años, 1 mes
Puntos: 0
Puedes hacerlo con CSS si haces una imagen gif animada con el efecto fade.
  #8 (permalink)  
Antiguo 10/10/2005, 02:46
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.050
Antigüedad: 12 años, 3 meses
Puntos: 1127
Hola otra vez:

Subí una página muy básica con un par de botones: http://www.caricatos.net/gradientes/botones.html

El primer botón hace un simple rollover, y el segundo hece un efecto como el que quieres...

Los valores del botón los obtuve desde esta otra página: http://www.caricatos.net/inicio.html
... y los fondos los genero con php... (puedes verlo en el código) aunque como dije antes se trata de una imagen con un degradado vertical y 1 pixel de anchura.

Espero que te sirva, y ya sabes que por aquí andamos.

Saludetes
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #9 (permalink)  
Antiguo 10/10/2005, 03:04
Avatar de metacortex
Moderador
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 8.859
Antigüedad: 10 años, 1 mes
Puntos: 784
Genial viejo!! Ahora mismo voy a hacer una pruebita con estas bases pero con botones enteros. Una cosa que pude notar es que el efecto del botón Dato 2 no se da en FF, sin embargo lo probé en IE y funciona tal cual.

Caricatos mil gracias por esa muestra "live". Dentro de un rato subo la cuestión a ver qué tal quedó. Da gusto ver cómo dominas el área hermano .

Y Ramm, gracias por ese dato del Gif, también probaré esa opción pana. Ahí nos vemos.

Saludos.
  #10 (permalink)  
Antiguo 10/10/2005, 09:16
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 9 años, 5 meses
Puntos: 0
Eso va a funcionar solamente en ie porque la propiedad filter no es CSS.

Suerte
Fede
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #11 (permalink)  
Antiguo 10/10/2005, 10:26
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.050
Antigüedad: 12 años, 3 meses
Puntos: 1127
Hola:

La retoqué un poco para que se vea en firefox, aunque tampoco lo he depurado...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #12 (permalink)  
Antiguo 10/10/2005, 16:29
Avatar de fullmental  
Fecha de Ingreso: octubre-2004
Ubicación: México DF, Xochimilco
Mensajes: 582
Antigüedad: 9 años, 9 meses
Puntos: 3
mmm no es que sea quisquilloso pero en firefox "tiempla"... y como por ahi dijo ramm eso mismo se podria hacer con puro css y un gif animado...

a {background:#FFF url("gifinicio.gif")}
a:hover {background:#FFF url("gifanimado.gif")}

creo que javascript debe ser el último recurso :P
__________________
Diseño web responsivo
T:_ramjam
  #13 (permalink)  
Antiguo 13/10/2005, 02:28
Avatar de metacortex
Moderador
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 8.859
Antigüedad: 10 años, 1 mes
Puntos: 784
Cita:
Iniciado por ramm
Puedes hacerlo con CSS si haces una imagen gif animada con el efecto fade.
Hola ramm y fullmental, intenté hacerlo de ese modo, pero cada botón me está pesando 1.8K. El efecto debe ser tanto progresivo como regresivo, eso ameritaría que ambos botones sean animados, lo que sería 3.6K x 6 = 21.6K solamente en botones... En cambio el mismo botón sin animar pesa 376 bytes, lo que daría un total de 4.5K en botones.

Creo que implementar el Js es conveniente en este caso.

Última edición por metacortex; 13/10/2005 a las 03:48
  #14 (permalink)  
Antiguo 13/10/2005, 04:54
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.853
Antigüedad: 12 años, 11 meses
Puntos: 366
Vamos p'al forum de javascript

movido desde css

Saludos
  #15 (permalink)  
Antiguo 13/10/2005, 09:57
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.050
Antigüedad: 12 años, 3 meses
Puntos: 1127
Hola:

Te propongo una solución un poco híbrida... y se trataría de algo en lo que "estarías como pez en el agua"

En vez de hacer varios botones, podrías hacer imágenes de 1 pixel de anchura, la altura de los botones y una transición (loop=1) del formato inicial al final... y viceversa...

Un rollover con transición, puedes verlo en la página de mi perfil... con el mouseover paso de una imagen estática a una imagen con morphing (supongo que habrás trasteado cosas así...)

En tal caso en vez de cambiar una imagen, habría que cambiar la imagen de fondo... algo así:
onmouseover="this.style.backgroundImage = 'fadeIn.gif'"
onmouseout="this.style.backgroundImage = 'fadeOut.gif'"

Son tan solo unas ideas...

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 12:26.
SEO by vBSEO 3.3.2