ZoneArtCSS | Desarrollo Web, Diseño de páginas Web, Aplicaciones Móviles, Notas de Tecnología » 32 bit http://www.zoneartcss.com Tips de Diseño y Desarrollo Web Wed, 26 Oct 2011 18:31:39 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 IE PNG FIX – Solucion a PNG ‘s con transparencia en IE6 http://www.zoneartcss.com/general/ie-png-fix-solucion-a-png-s-con-transparencia-en-ie6/ http://www.zoneartcss.com/general/ie-png-fix-solucion-a-png-s-con-transparencia-en-ie6/#comments Thu, 02 Jul 2009 03:01:29 +0000 miguelortega http://www.zoneartcss.com/?p=96

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>
1
2
3
4
5

// 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!!

]]> http://www.zoneartcss.com/general/ie-png-fix-solucion-a-png-s-con-transparencia-en-ie6/feed/ 3