Efecto en botones (Fade)

[metacortex]

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.

[kemie]

con css solo se puede hacer un cambio instantaneo. para un fade necesitaras js.

[El_Barto]

Justamente en el foro de (X)HTML pusieron esta dirección que te puede servir:
http://www.dynamicdrive.com/dynamici...hlightgrad.htm

Saludos

[caricatos]

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

[metacortex]

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 .

[caricatos]

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

[ramm]

Puedes hacerlo con CSS si haces una imagen gif animada con el efecto fade.

[caricatos]

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

[metacortex]

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.

[thunder.scripts]

Eso va a funcionar solamente en ie porque la propiedad filter no es CSS.

Suerte
Fede

[caricatos]

Hola:

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

Saludos

[fullmental]

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

[metacortex]

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.

[tunait]

Vamos p'al forum de javascript

movido desde css

Saludos

[caricatos]

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