De PNGs transparentes, navegadores y onLoads va la cosa

En el estudio he tenido que emplear PNGs transparentes, que como sabéis (y si no, deberíais) no son soportados por versiones de Internet Explorer 6 o anteriores, sino que vienen soportadas desde la versión 7 de nuestro amigo IE.

Hasta aqui no hay gran problema, porque empleando un pngfix de javascript se arregla el entuerto (bonito palabro). Lo vemos a continuación:



/* Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in  with DEFER keyword wrapped in conditional comments:


*/

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i" 
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

El tema se complicó (no iba a ser todo tan sencillo…) cuando además metía un evento onLoad para el body con la intención de lanzar una función javascript, y paso a describir el caso porque puede ser de ayuda para quien se encuentre en la situación:

LO QUE QUEREMOS LOGRAR
Tenemos una imagen de fondo de un cierto peso en KB (ya que no es una trama, sino una imagen plena de faculades), y sobre esa imagen han de colocarse unos botones que a su vez son imágenes, y que para que quede medianamente bonito han de ser transparentes.

PRIMER PROBLEMA
El primer problema es que la imagen de fondo que se crea por CSS, pesa lo suficiente como para que se dé durante unos segundos la situación de aparecer los botones sin el fondo que les da “sentido”, un efecto poco deseable.

SOLUCIÓN PRIMER PROBLEMA
Para solucionarlo buscamos si existía algun método mediante CSS o XHTML para forzar la carga de los elementos de la hoja de estilos antes que se renderizara el HTML, pero….. no lo hemos encontrado. Si algún alma caritativa sabe cómo lograrlo mediante CSS (o de una manera más limpia que la que hemos empleado nosotros) que no dude en contárnosla.
Jorge tuvo la feliz idea de poner la misma imagen con propiedad display:none en el comienzo del body, con lo que la imagen se carga como HTML impidiendo así que se muestre lo que va a continuacion hasta que se completa dicha carga, y luego el CSS no tarda nada de tiempo en cargarla porque está en caché. Mientras esto ocurre, el div con los botones transparentes, permanece oculto también con la propiedad display, para por javascript hacerlo visible en el onLoad de la página.

SEGUNDO PROBLEMA
Cuando ya estábamos pegando saltos de alegría con el trabajo terminado, vemos que nuestro querido IE 6 no muestra los botones, no así en IE 7 o en firefox…. :(

SOLUCIÓN SEGUNDO PROBLEMA
El problema es debido a la mala compatibilidad del pngfix con métodos invocados en el onLoad. La solución pasa por usar una variante del pngfix (que ha salido a la luz porque también da problemas con el swfobject) y que permite mezclar estas dos necesiades: pngfix y onLoad.

Lo que hicimos es “googlear” y emplear el citado pngfix adaptado además de colocar la llamada al mismo DESPUÉS (y ojo que esto es necesario para que se dispare el evento onLoad) de la etiqueta de apertura de BODY. Cuando decimos la llamada nos referimos a esto:




El resultado lo podéis ver aquí. La web está recien salida del horno… diseño por takeone dsgn y programación flash y adaptación del blog por [Q] :)