Asselin Benoit Développement - Création et conception de sites internet - Amiens Somme Picardie Paris France

Gérer les PNG transparents avec Internet Explorer 6 ( javascript, filter, CSS )
01`06`2008

Aucun commentairePoster un commentaire !
Tags: Internet Explorer Javascript CSS

Voici un petit javascript qui vous permettra de fixer la transparence des images au format PNG transparent 24 bits sous Microsoft Internet Explorer 6.

function fixPNG() {
	if(navigator.appName == 'Microsoft Internet Explorer') {
		var png = /\.png$/i;
		var imgs = document.getElementsByTagName('img');
		for(var i = 0, l = imgs.length; i < l; i++) {
			if(png.test(imgs.item(i).src)) {
				imgs.item(i).style.width = imgs.item(i).offsetWidth;
				imgs.item(i).style.height = imgs.item(i).offsetHeight;
				imgs.item(i).style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + imgs.item(i).src + '\',sizingMethod=\'image\')';
				imgs.item(i).src = 'empty.gif';
			}
		}
	}
}

Fonctionnement de la function :
Le PNG transparent est remplacé par un fichier GIF totalement transparent de 1px², puis le filter contenant le PNG est appliqué sur l'image GIF.
Pour activer cette fonction, il suffit de l'appeler dans un événement window.onload = function(){}.

Rappel des différentes écritures du filter en CSS :

img.image1 { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image1.png', sizingMethod='image'); }
img.image2 { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image2.png', sizingMethod='scale'); }
img.image3 { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image3.png', sizingMethod='crop'); }