Transparencia de una imagen con brillo, en una capa, y un fondo cambiante.

[Kalimdor]

Hola, compañeros de foro. ...aquí voy de nuevo.

Antes de pasar a la pregunta, les mostraré el siguiente fragmento de imagen:



El texto de la imagen está en una capa, en la página web, encima de las dos imágenes redondeadas del fondo. En este ejemplo, el texto y las imágenes del fondo están combinadas, es decir, son una sola imagen.

En lo que estoy implementando, las dos imágenes redondeadas del fondo están animadas por medio de un JavaScript para que roten cada cierto tiempo. La capa me permite mantener el texto encima de las mismas, mientras ellas rotan.

Lo que no he podido lograr es recrear el brillo alrededor del texto de la capa, exactamente igual al ejemplo. He intentado muchas veces convirtiendo el texto con el brillo en una imagen .gif y/o .png, pero no logro la transparencia del ejemplo, que me permita ver el fondo cambiante y, al mismo tiempo, el brillo blanco del texto. Siempre quedan rastros del color del fondo eliminado del texto fundidos con el brillo del mismo. Obviamente, si pongo el fondo blanco, a la hora de hacerlo transparente, se me va el brillo también ya que también es blanco.

¿Existe algún código o numeración de color de fondo o algo que me permita lograr esa transparencia, manteniendo íntegro el brillo del texto?

Utilizo Corel PHOTO-PAINT 12 para trabajar con las imágenes.

Desde ya, muchísimas gracias por la ayuda que me puedan brindar.

Hasta luego.

Kalimdor.

[LadyPEGASVS]

Hola Kalimdor!

Yo creo que para ese tipo de efectos lo más acertado es hacerlo todo en Flash ya que si la transparencia es un gif en Flash se te va a ver re mal, no sé bien cómo se hace, pero sé que se puede y va a quedar mejor..

Sino otra opción es hacerlo en Fireworks, guardándolo como .png e importándolo desde Flah y creo que ahi te lo va a tomar bien..

Ahora para dejar el fondo transparente tenes que ir a 'configuración de publicacion' y en la solapa 'htm' elejís 'transparencia sin ventana' y cuando lo montes en el htm desde Dreamweaver, en la ventana de propiedades (abajo)vas a la opción 'parámetros' y le agregas el parámetro 'vmode' y el valor 'transparent' así debería tomarte fondo transparente..

Espero haberte ayudado en algo..

[baccxus]

Si usas PNG, pero de 32 bits, podrás usar transparencias alfa (o sea hasta 255 niveles de transparencia), el unico problema es que explorer no lo acepta muy bien y hay que incluir un javascript a la página para que lo cargue como es debido, ahora estoy en el trabajo, pero cuando llegue a casa te posteo lo que necesitarás para hacerlo

[baccxus]

ok, lo prometido es deuda:

Para que Internet Explorer pueda cargar correctamente los png, debes usar este escript:

Código:

// JavaScript Document
function PNG_loader() {
   for(var i=0; i<document.images.length; i++) {
      var img = document.images[i];
      var imgName = img.src.toUpperCase();
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
         var imgID = (img.id) ? "id='" + img.id + "' " : "";
         var imgClass = (img.className) ? "class='" + img.className + "' " : "";
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
         var imgStyle = "display:inline-block;" + img.style.cssText;
         if (img.align == "left") imgStyle += "float:left;";
         if (img.align == "right") imgStyle += "float:right;";
         if (img.parentElement.href) imgStyle += "cursor:hand;";
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
            + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>";
         img.outerHTML = strNewHTML;
         i--;
      }
   }
}
window.attachEvent("onload", PNG_loader);

y lo llamas desde tu página en la cabecera.

Lo segundo es que no sé si PhotoPaint pueda dar los niveles de transparencia alfa, el único que uso para ese tipo de archivos es fireworks de macromedia. Espero que lo que te posteo sea de ayuda.

Saludos

[Kalimdor]

Hola SOLdeNoche y baccxus.

Les agradezco muchísimo la ayuda que me brindan.

SOLdeNoche:
Estuve viendo tu sugerencia para trabajar la imagen pero, lamentablemente, no domino Flash ; conozco muy, pero muy por encima el entorno de trabajo y me pierdo en medio de tantas herramientas . Me imagino que los pasos que me explicabas son en Flash, ¿o me equivoco?

Aunque, de todas maneras, la idea que me diste de usar Fireworks para la imagen me pareció interesante.

De todas maneras, me ha quedado dando vueltas en la cabeza lo de usar Flash para lograr el efecto y, bueno, ojalá pueda aprenderlo.

baccxus:
Me terminaste de convencer en usar Fireworks (dos compañeros de foro que me recomiendan la misma herramienta... por gusto no es... ¿verdad? jejejejeje ), así que, manos a la obra, guardé el texto como una imagen .png de 32 bits, aunque me di cuenta también de que, en 8 bits, mantenía la transparencia de fondo... pero la dejé en 32 como me dijiste.

Sin el código JavaScript que me posteaste comprobé que, aunque Dreamweaver deja ver la imagen con transparencia excelentemente bien, el Internet Explorer ponía el fondo blanco. Así que puse el código en medio de las etiquetas <head> </head> de la página en la que pondré la imagen... pero tampoco me funcionó.

Coloqué el código dentro de las etiquetas <script language="JavaScript1.2" type="text/javascript"> </script>, pero el resultado es que la imagen, que persiste en mantener el fondo blanco, después de unos segundos desaparece. La imagen, totalmente invisible, permanece, aunque no se ve. Y sé que permanece porque se puede seleccionar con el mouse y se ve la silueta resaltada.

¿Qué podrá ser, baccxus?
Probando y probando vi el código y en él escrita la palabra "PNG" en mayúsculas. Recuerdo que, leyendo sobre el uso de JavaScript, el mismo hace diferencia entre mayúsculas y minúsculas, así que lo puse en minúsculas ya que así está en la extensión de la imagen .png... pero igual... no me funcionó?

Dime... ¿estaré utilizando tu código de manera incorrecta?, ¿hay que modificarle algún parámetro o agregarle un llamado a la imagen o algo por el estilo?, ¿por qué desaparece la imagen .png después de unos segundos y no más bien el fondo blanco que me deje ver el brillo del texto?

Perdona si te rellené de preguntas, espero no haber incomodado.

Nuevamente les agradezco su ayuda y, bueno, ojalá me puedan ayudar.

Muchas, muchas gracias, amigos.

Kalimdor.

[baccxus]

Creo que me ha pasado lo mismo y el problema radica en la compatibilidad de Internet Explorer con CSS, dejame desocuparme y te hago un ejemplo de como funciona, sin embargo fíjate en como se vé con firefox, que si es un buen navegador web, y si el problema persiste entonces es algo mal que hayas puesto.

Saludos,

[Kalimdor]

Iniciado por baccxus

Creo que me ha pasado lo mismo y el problema radica en la compatibilidad de Internet Explorer con CSS, dejame desocuparme y te hago un ejemplo de como funciona, sin embargo fíjate en como se vé con firefox, que si es un buen navegador web, y si el problema persiste entonces es algo mal que hayas puesto.

Saludos,

Hola, baccxus... ¿cómo te encuentras?

Tienes toda la razón. En Firefox se ve tal como en la imagen de ejemplo del primer mensaje. Perfectamente transparente, mientras el fondo cambia constantemente.

Ese se podría decir que es un excelente punto a favor en cuanto a compatibilidad con un navegador distinto pero, lamentablemente, como el Internet Explorer es el navegador dominante, significaría que, para la mayoría de las visitantes, el efecto no podría apreciarse.

¿Crees que pueda adaptarse para el Internet Explorer también?

Un millón de gracias, estimado amigo. Que la pases bien.

Kalimdor.

[LadyPEGASVS]

De nada!!

Si te interesa introducirte en el mundo del Flash, en mi site tengo el manual en castellano de la versión 5 y MX2004..

Suerte!!!

SOL

[Kalimdor]

Iniciado por Kalimdor

¿Crees que pueda adaptarse para el Internet Explorer también?

Hola, baccxus... ¿cómo te encuentras?

Me puse a buscar en Internet, con respecto a la pregunta que te hice sobre cómo podría corregirse la visualización de .png's transparentes en el Internet Explorer y di con la siguiente dirección: http://weblogs.javahispano.org/page/vitxo/20040902, que me llevó a ésta: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html.

En esta última dirección te explican todo el procedimiento, te brindan un demo de su uso y el enlace para bajarlo compreso en .zip.

Como explican allí, copié entre <head> y </head>, de la página que usa la imagen .png transparente, el siguiente código:

Código HTML:

<style type="text/css">
img {
behavior: url("pngbehavior.htc");
}
</style> 

Del archivo .zip tomé solamente dos archivos: pngbehavior.htc y blank.gif, y los puse en la misma carpeta de la página que utiliza el efecto.

¿Y qué crees?... ¡problema arreglado! ... y funciona para el Internet Explorer y para Firefox. Me imagino que también para otros navegadores.

¡Vamos!... ¡pruébalo y me dices qué tal!

Otra cosa... y que es la más importante: te agradezco mucho la ayuda que me has brindado y el tiempo que te has tomado para ayudarme. Muchas gracias, mi estimado amigo.

Bueno, seguiré haciendo pruebas para ver qué más puede pasar con las transparencias y su interacción con este código y estos archivos.

Que Dios te bendiga, baccxus y que la pases muy bien.

Un efusivo saludo.

Kalimdor.

[Kalimdor]

Iniciado por SOLdeNoche

De nada!!

Si te interesa introducirte en el mundo del Flash, en mi site tengo el manual en castellano de la versión 5 y MX2004..

Suerte!!!

SOL

¡Qué super, SOLdeNoche!... ¡te agradezco mucho que me brindes tu manual!. Voy a estudiarlo y comenzar a adentrarme en el increíble mundo de Flash. Esa siempre ha sido una de mis metas.

Tu sitio web se ve muy bien... ¡felicidades!. Me gusta mucho la animación flash del encabezado y se ve muy completo también.

De repente, cuando entre en el terreno y me salga uno que otro problemita, te pediré ayuda... ¿se podrá?

Muchas gracias nuevamente SOL. Que Dios te bendiga y que la pases muy bien.

Kalimdor.

[baccxus]

Gracias por darme las gracias, y disculpa que no te pude ayudar como debía. De todas maneras, el behavior para PNG es otra de las formas para que internet explorer vea bien los PNG, y el problema solo está en Internet Explorer, los demás navegadores visualizan correctamente los PNG.

saludos.

[Kalimdor]

Iniciado por baccxus

Gracias por darme las gracias, y disculpa que no te pude ayudar como debía. De todas maneras, el behavior para PNG es otra de las formas para que internet explorer vea bien los PNG, y el problema solo está en Internet Explorer, los demás navegadores visualizan correctamente los PNG.

saludos.

Hola, baccxus... ¡claro que me ayudaste bastante!

Además, con lo que me escribiste, me entero que behavior es, realmente, otro método. Muy interesante...

De todos modos, si el método que me enseñaste puede funcionar en el Internet Explorer, no está de más conocerlo también. ¿se podrá?

Y, parece mentira: el navegador más popular resulta ser el menos compatible con .png's con transparencias y con CSS también... o sea.

Muchas gracias por todo, mi estimado amigo. Que Dios te bendiga y que la pases muy bien.

Kalimdor.

[LadyPEGASVS]

Iniciado por Kalimdor

¡Qué super, SOLdeNoche!... ¡te agradezco mucho que me brindes tu manual!. Voy a estudiarlo y comenzar a adentrarme en el increíble mundo de Flash. Esa siempre ha sido una de mis metas.

Tu sitio web se ve muy bien... ¡felicidades!. Me gusta mucho la animación flash del encabezado y se ve muy completo también.

De repente, cuando entre en el terreno y me salga uno que otro problemita, te pediré ayuda... ¿se podrá?

Muchas gracias nuevamente SOL. Que Dios te bendiga y que la pases muy bien.

Kalimdor.

Gracias a vos por visitar mi web! y me alegro que te haya gustado y te resulte útil; cuando quieras podés consultarme lo que no sepas a través de los datos que tengo en mi perfil e este site o uniéndote al foro de PEGASVS. www.pegasvs.com.ar/foro

Besos!!!

SOL