IE PNG FIX – Solucion a PNG ’s con transparencia en IE6

Obtén una cuenta de @zoneartcss.com gratuita

Ver correo

Jul 01

soy ie6 y soy transparente

Porfin una solucion definitiva para los PNG con transparencia en IE con Javascript y Prototype.

Ya sabemos todos lo amargo que es que este famoso Internet Explorer 6 nos haga mas dificil nuestros proyectos, cuando llegamos al famoso “Test en otros navegadores”, en lo personal eh probado miles… de FIXS, HACKS, y otras soluciones y metodos extraños, muy prometedores pero nunca, me funcionaron… algunas gentes dicen que si… pero bueno, espero que la utilizen y queden satisfechos como yo… estoy implementando un Theme para Wordpress en la empresa donde trabajo… y uso transparencias y me fue y es muy util esta solucion a los PNG’S y aqui la comparto con ustedes…

Antes de aplicarlo es bueno saber que:

1.- Necesita la libreria JS de Prototype 1.6
2.- Funciona tanto en imagenes (<img/>) como en (#css{background:url…}), pero!… si es un fondo en mosaico (que se repite X o Y o las 2) no funciona.

Bueno… para aplicarlo como eh dicho necesita Prototype asi que lo llamamos desde nuestro <head>

1	<script src="javascripts/prototype.js" type="text/javascript"></script>

luego llamamos a pngHack.js este archivo necesita un gif (s.gif) que viene en dentro del zip… simplemente lo agregamos en una carpeta llamada “images“,

1	<script src="javascripts/pngHack.js" type="text/javascript"></script>

Luego llamamos a functions.js que es donde configuramos nuestros elementos que tendran transparencia.

<script src="javascripts/functions.js" type="text/javascript"></script>

// aplica el hack al elemento con la "<strong>id</strong>" <strong>yourPNG</strong>
$('yourPNG').pngHack();
 
// aplica el hack a todos estos elementos
$$('div#fixMe', 'img#andMe', 'img.andUsTo').invoke('pngHack');

Ver demo en linea
Descargar PNG FIX FOR IE
Y eso es todo por ahora… tratare de encontrar mas soluciones a este enorme problema…

Conoces una solucion mas???
funciona al 100%????
quieres compartirla con nosotros??….
pues envianos tus aportaciones a…. Tu Granito de Arena!!

Posted in General. on Miércoles, Julio 1st, 2009 by miguelortega Tags: 32 bit, 8-bits, alpha, background, fix, ie6, internet explorer, Javascript, PNG, problema, Prototype, solucion, transparency, transparente

3 Comments

jose on Septiembre 8th, 2009

No funciona correctamente ya aplique los cambios y ahora no se visualiza, la variable YOURPNG aplica solo para un archivo ? se definir con la extension o solo el nombre del archivo ?

function applyPNGHacks () {
$(’yourPNG’).pngHack();

$$(’div#fixMe’, ‘img#andMe’, ‘img.andUsTo’).invoke(’pngHack’);

$(’andMe’).up().pngHack();

$(’anotherExample’).pngHack();

}
Alex Aguiar on Septiembre 8th, 2009

me cago en la… por que escribias en ingles? jaja…
pregunta en los foros
http://www.zoneartcss.com/foro/
ademas
lee bien el primer ejemplo solo vale para un ID y el segundo para los que desees….
ademas asegurate de bajarte todo el zip y que las librerias… esten correctamente
funciona sino nose publica chao

PD: Ve a los foros
Ya no se da ayuda por comentarios para eso esta el foro pregunta alli.
josem on Septiembre 8th, 2009

Ok Pregunto al Fonro entonces gracias por tu apoyo