1. ¿Buscando un Banco para abrir tu primera cuenta de ahorros? Revisa nuestro comparativo de cuentas cero mantenimiento haciendo clic aquí.
    Ocultar anuncio

[Script] Imágenes PNG transparentes en Internet Explorer 6

Publicado en 'Webmasters' por MijT, 7 Dic 2006.





  1. MijT

    MijT Miembro de bronce

    Registro:
    12 Oct 2006
    Mensajes:
    1,106
    Likes:
    63




    Este pekeño script nos permitira mostrar las imagenes PNG con transparencia en el navegador Internet Explorer en su version 6 para abajo, ke como sabemos soporta dichas imagenes pero con la deficiencia de ke no muestra las transparencias ke algunas de estas puedan tener.

    Encontramos la solución(de mano de Bob Osola) en los filtros visuales de MSIE, en concreto el filtro AlphaImageLoader, mediante el cual podremos usar archivos PNG sin restricciones. Para ello, copia el siguiente codigo en tu editor de texto favorito, y guardalo con el nombre png.js

    HTML:
    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);
    Ahora copia lo siguiente en la cabecera de todos los archivos de tu web que vayan a mostrar imágenes PNG (entre <head> y </head>), para cargar el archivo png.js en caso de que se visualice el documento con MSIE:

    HTML:
    <!--[if gte IE 5.5000]>
    <script type="text/javascript" src="./png.js"></script>
    <![endif]-->
    
    Lo ke conseguimos mediante este codigo es ke, una vez cargada la pagina, se corrijan las imagenes PNG del documento a traves del filtro. Como podras comprobar, primero se muestran las imagenes sin transparencia, y una vez ke todo el documento se ha cargado, las imagenes serán sustituidas. De esta manera conseguimos solucionar el problema provocado por el uso de un navegador deficiente, aunke lo ideal sería ke no tuvieramos ke recurrir a estos trucos por culpa de los desarrolladores de Microsoft.

    Espero ke les pueda servir.

    Saludos :)
     


  2. x-web

    x-web Miembro maestro

    Registro:
    23 Set 2006
    Mensajes:
    303
    Likes:
    0
    Muy buena la solución recuerdo haber dejado un Post parecido antes de que se perdiera la BD (ya hace mucho :D)

    Hay varias soluciones para esto pero creo que esta es de las mejores para ser usadas.

    Saludos:)
     
  3. web developer

    web developer Miembro nuevo

    Registro:
    1 May 2009
    Mensajes:
    1
    Likes:
    0
    Que buena solución, me funciono muy bien el script, lastima que no funciona con los png que hay en estilos y css (como por ejemplo este tipo de imagenes: background-image: url(imagen.png);)

    GRACIAS