Magazine

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

Publié le 01 juin 2008 par Mr32

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'); }



Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

  • Css max-width

    Le monde du web semble tombé dans un espèce de coma ante-noël. Difficile donc de vous présenter des choses interessantes en cette fin d'année. Mias voici quand... Lire la suite

    Par  Marie Neff
    INTERNET, PROGRAMMATION
  • Gérer ses mails

    Crise dans les médias a fait un billet récemment sur la difficulté qu’ont les dirigeants à gérer leurs mails. Il a bien raison. Ils ne savent pas faire. Lire la suite

    Par  Nicolas J
    INTERNET
  • ie4osx : utiliser Internet Explorer sur son Mac

    La présence du navigateur de Microsoft sur son Mac peut être utile, principalement dans le but de tester son site Internet avec le navigateur de Microsoft ou... Lire la suite

    Par  Anonyme
    HIGH TECH
  • 22 resssources de CSS templates.

    resssources templates.

    Ne perdez pas le temps pour la mise en page de votre site, votre blog. Voici les 22 ressources de CSS template qui vous permettent de créer rapidement un... Lire la suite

    Par  Quan Tran-Meyer
    A CLASSER
  • Internet Explorer 8 en 2008

    Microsoft proposera une version beta de son navigateur Internet Explorer 8 en 2008. Au programme : le respect des standards. Microsoft va essayer de proposer... Lire la suite

    Par  Yeca
    CONSO, HIGH TECH, INFORMATIQUE, LOGICIELS
  • Trois extensions pratique pour Internet Explorer 7

    J’ai trouve trois extensions plutôt intéressantes pour Internet Explorer 7 parmis les 13 du comparatifs de 01 net qui se trouve ici : Comparatifs de treize... Lire la suite

    Par  Micka39
    HIGH TECH, INFORMATIQUE
  • 4.png

    IPhoneSender Premiere-video-du-firmware Pour IPhone Gplus-ou-comment-transformer-GTalk-en-MSN et le lien de installation Gplus J’ai fait l’installation et ses... Lire la suite

    Par  André C
    A CLASSER

A propos de l’auteur


Mr32 12 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte