PNG Fix for IE6 with Mootools - e24PNGFix

Publicado por aartiles
Monday June 22nd, 2009 09:00 AM

I use to lost about 2-3 hours a day fixing bugs at Internet Explorer 6. IE6 puts us in the disyuntiva of limit our creativity or lost the IE6 users quote.

One of the main problems of IE6 is its incompatibility with transparent PNGs. This is solved by one of its filters, so far I had used FixPNG of ClientCide, but I found a limitation when applying an opacity transition effect to a transparent PNG in IE6 or IE7, either with or Tween Morph.

FixPNG fixes the PNG transparency problem adding this css filter:

?View Code 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
});

That is OK, but the problem is that when we change the opacity of an element in Internet Explorer with Mootools, this making it through the same filter CSS property.

?View Code JAVASCRIPT
1

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

I have developed my own FixPNG to solve some of my animations while Mootools as ClientCide fixes the yours.

To use e24PNGFix, the images should be placed as a background using css, ie:

?View Code HTML
1

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

And then we can fix the PNG adding the following javascript sentence:

?View Code JAVASCRIPT
1

Browser.fixPNG('myimg');

The script at least meets my needs, you are free to use it or not, here I leave with you the e24FixPNG source code:

?View Code 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);							
			};
		}
	}
});

In the next post going to introduce e24WalkerFx effect, which uses e24PNGFix to fix transparent PNGs on Internet Explorer.

If you want to check what I am working on now, then follow me at 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
Components, Javascript, Mootools
Comentarios
Trackback por Bitacoras.com el Monday June 22nd, 2009 a las 09:01 AM

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 Tuesday June 23rd, 2009 a las 12:44 AM

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 Tuesday June 23rd, 2009 a las 02:57 AM

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

Atentamente,
David.

Comentario por admin el Tuesday June 23rd, 2009 a las 09:47 AM

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)