PNG Fix para IE6 con Mootools - e24PNGFix

Publicado por aartiles
22 de junio de 2009 09:00 hrs.

Yo siempre me he declarado abiertamente en contra del uso Internet Explorer 6. IE me hace perder 3 o 4 horas de trabajo todos los días y nos pone a los desarrolladores web en la disyuntiva de limitar nuestras posibilidades de creación o renunciar a una cuota de mercado que aun no es despreciable.

Uno de los principales problemas de IE6 es su incompatibilidad con los PNGs transparentes, aunque esto es solucionable mediante uno de sus filtros de css. Hasta ahora yo había utilizado FixPNG de ClientCide, pero he detectado una limitación cuando aplicamos un efecto de transición de opacidad a un PNG transparente en IE6 o IE7, ya sea con el Tween o el Morph.

FixPNG soluciona el problema de la transparencia del PNG añadiendo la propiedad de css filter:

?Ver código JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13

var replacement = new Element('span', {
	id:(el.id)?el.id:'',
	'class':(el.className)?el.className:'',
	title:(el.title)?el.title:(el.alt)?el.alt:'',
	styles: {
		display: vis?'inline-block':'none',
		width: dim.x,
		height: dim.y,
		filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader (src='" 
			+ el.src + "', sizingMethod='scale');"
	},
	src: el.src
});

Hasta aquí bien, pero el problema radica en que cuando modificamos la opacidad de un elemento con Mootools en Internet Explorer, este lo que hace a través de la misma propiedad de CSS filter.

?Ver código JAVASCRIPT
1

if (Browser.Engine.trident) this.style.filter = (opacity == 1) ? '' : 'alpha(opacity=' + opacity * 100 + ')';

Por tanto nuestro efecto de transición de opacidad funcionará pero el PNG no será transparente y veremos un comportamiento un tanto extraño.

He desarrollado mi propio FixPNG para solucionar algunas de mis animaciones mientras ClientCide y Mootools solucionan el suyo.

Para usar e24PNGFix, las imágenes deben ponerse como background mediante css, ej:

?Ver código HTML
1

<div id="myimg"  style="background: url(img/myimg.png) no-repeat"></div>

Y bastaría con la siguiente sentencia de javascript:

?Ver código JAVASCRIPT
1

Browser.fixPNG('myimg');

Este script al menos satisface mis necesidades, sois libre de usarlo o no, aquí os dejo el código de e24FixPNG:

?Ver código JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

/*
 e24PNGFix
	- MooTools version required: 1.2.2
	Changelog:
		- 1.0: First release
*/
 
/*Based on the fixPNG module from MooTools, My Object Oriented Javascript Tools. Copyright (c) 2006-2007 Valerio Proietti, <http://mad4milk.net>, MIT Style License.||Clientcide Copyright (c) 2006-2008, http://www.clientcide.com/wiki/cnet-libraries#license*/
/* Copyright: equipo24 S.L.N.E <http://equipo24.com/> - Distributed under MIT License - Keep this message! */
 
$extend(Browser, {
	fixPNG: function(el) {
		if (Browser.Engine.trident){
			el = document.id(el);
			var w = el.getStyle('width');
			var h = el.getStyle('height');
			var imgURL = el.getStyle('background');
			if (imgURL.test(/\((.+)\)/)){
				el.setStyle('background', '');
 
				var subEl = new Element('div', {
					'style': 'width: ' + w + ';' +
					'height: ' + h + ';' +
					"filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='" + imgURL.match(/\((.+)\)/)[1] + "');"							
				});	
				el.grab(subEl);							
			};
		}
	}
});

En el próximo post documentaré otro efecto e24WalkerFx, sin e24PNGFix me hubiera sido imposible utilizar PNGs transparentes.

Si quieres saber en qué trabajo ahora sígueme en twitter @aartiles24

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Bitacoras.com
  • E-mail this story to a friend!
  • Meneame
  • MySpace
  • Netvibes
  • Reddit
  • StumbleUpon
  • Technorati
  • Wikio
Componentes, Javascript, Mootools
Comentarios
Trackbacks por Bitacoras.com el 22 de junio de 2009 a las 09:01 hrs.

Información Bitacoras.com…

Valora en Bitacoras.com: Yo siempre me he declarado abiertamente en contra del uso Internet Explorer 6. IE me hace perder 3 o 4 horas de trabajo todos los días y nos pone a los desarrolladores web en la disyuntiva de limitar nuestras posibilidades de….

Comentario por David el 23 de junio de 2009 a las 00:44 hrs.

Estimado, me parece un muy buen aporte, la verdad no lo he probado aún ya que tengo el mismo problema de las transiciones con PNG pero usando Mootools 1.11, crees que funcione tu hack? de cualquier manera muchas gracias por tu post.

Me voy de cabeza a probar si corre para Moo 1.11 =)

Saludos desde Chile,
David.

Comentario por David el 23 de junio de 2009 a las 02:57 hrs.

Hice los cambios pertinentes y funcionó perfcto para Mootools 1.11. Muchas Gracias Alfredo!!

Atentamente,
David.

Comentario por admin el 23 de junio de 2009 a las 09:47 hrs.

Gracias David,
Ya te iba a responder que era imposible sin hacer algunos cambios, pero ya veo que lo solucionastes. Me alegra que te sea útil.

Deja un comentario

(requerido)

(requerido)