javascript - graphisme

Pour obtenir des png transparent sous IE faire ceci :
Dans votre page html, rajoutez entre les balise <head> et </head> ceci :

javascript

function IE_CorrectAlpha_PNG(){
	for(i=0; i<document.images.length; i++){
		img    = document.images[i];
		imgExt  = img.src.substring(img.src.length-3, img.src.length);
		imgExt  = imgExt.toUpperCase();
		if (imgExt == "PNG"){
			imgID    = (img.id) ? "id='" + img.id + "' " : "";
			imgClass= (img.className) ? "class='" + img.className + "' " : "";
			imgTitle= (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
			imgStyle= "display:inline-block;" + img.style.cssText;
			if (img.align == "left") { imgStyle = "float:left;"  + imgStyle; } else if (img.align == "right"){ imgStyle = "float:right;" + imgStyle; }
			if (img.parentElement.href)   { imgStyle = "cursor:hand;" + imgStyle; }       
			strNewHTML    = '<span '+imgID+imgClass+imgTitle+' style="width:'+img.width+'px; height:'+img.height+'px;'+imgStyle+';'+'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+img.src+'\', sizingMethod=\'scale\');"></span>';
			img.outerHTML = strNewHTML;
			i = i-1;
		}
	}
}
     var userAgent=navigator.userAgent;
     if (userAgent.indexOf('MSIE') != -1) {
          window.attachEvent("onload", IE_CorrectAlpha_PNG);
     }

Ce code, mettra automatiquement la transparence a tous les PNG de votre page, sans rien avoir a faire de plus.

Discussion

Lex dc, 14/06/2007 23:10:

merci beaucoup, très bon script.

Juste une remarque : quelques commentaires auraient été les bienvenues, cela aurait ajouté la compréhension à la satisfaction.

lexdc, webmaster amateur

max.dev77, 19/07/2007 23:40:

Bien joué, très bon remède contre ce bug assez agaçant … Bonne continuation. Merci

nicolas, 28/07/2007 22:34:

c'est génial, mais ce script tombe à l'eau avec la nouvelle version d'explorer qui ne déplore plus la transparence.

Ash, 20/08/2007 01:34:

Merci ! Ce script me sauve la vie, j'en ai essayé des tonnes mais celui-ci est définitivement le plus simple !

J'ai juste un problème avec : j'ai des images png en rollover, mais le script semble les ignorer. Comment réactiver ce survol tout en gardant la transparence grâce à ce script ?

Merci !

shantee, 07/10/2007 02:48:

dommage ça à l'air sympa mais ça ne marche pas pour les image background dans les CSS :(

maniT4c, 08/10/2007 08:14:

Si regarde sur cette page http://www.wikistuce.info/doku.php/css/png_transparent_pour_les_backgrounds?s=png

SpaceFrog, 26/10/2007 10:34:

Et quid des png mappés ? Ce code rend un mappage inactif :( Au secours …

iDo, 26/10/2007 16:59:

alors la par contre… Je ne sais pas sii il existe une methode qui fait ça !

Aekar, 10/01/2009 15:57:

Je tiens sincèrement à exprimer toutes mes félicitations à l'auteur de ce script.

En quelques lignes, ce programme fait gagner des heures, voire des jours à chaque développeur/infographiste, qui était encore obligé de faire d'utiliser des images en aplats suite à ce problème d'IE6, ou de passer à des GIF de qualité si médiocre…

Enfin le PNG va pouvoir connaître le règne glorieux qu'il mérite.

Je ne dirai rien aux mécontents si ce n'est : regardez déjà tout ce que cela fait ! C'est déjà superbe !

IE7 c'est hors sujet ; il gère en effet bien les transparences PNG, heureusement. Que vient chercher une personne ici, sur cette page, si elle souhaite parler d'IE7 ? On parle bien d'IE6 seulement, et du problème de gestion des PNG.

Encore merci !

Chargement en cours...

Discussion