Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

tangui

[ASTUCE]PNG Transparent sous IE

Messages recommandés

Voici un code javascript qui permettrait (je ne l'ai pas testé) de faire une transparence des fichiers PNG sous IE (Cette transparence est prise en charge avec IE7, mais pas IE6)

 

Dans votre page html, rajoutez entre les balise <head> et </head> ceci :

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

 

Source: http://www.wikistuce.info/doku.php/javascr...ansparent?s=png

Partager ce message


Lien à poster
Partager sur d’autres sites

Ca marche, en effet.

Cela dit, ça ne marche que pour les png transparents qui sont dans des balises img (donc les background-images, circulez y'a rien à voir !)

Autre souci que j'ai rencontré : pour les images centrées grâce à un margin: auto; ça fait foirer le style (le script crée un conteneur autour de l'image)

IMHO c'est pas le seul souci que ce script génère, mais bon... quand on a de la transparence alpha dans des images, on n'a pas beaucoup le choix (quoique la solution GIF transparente + conteneur de ladite gif avec des propriétés "filter alpha" et "-moz-opacity" ça peut "le faire", aussi)

Partager ce message


Lien à poster
Partager sur d’autres sites

Je ne voudrais pas paraître tâtillon, Messieurs, mais ne serait-il pas souhaitable que, entre les balises <head> et </head>, vous placiez ce script entre des balises <script type="text/javascript"> et </script> ? Nous savons tous qu'IE est permissif, mais à ce point-là, ce serait grave... :P

Partager ce message


Lien à poster
Partager sur d’autres sites

Evidemment, Tangui ne donnait que le code JavaScript.

Tout le monde sait comment insérer un script sur sa page, n'est-ce pas ? ;-)

 

<script type="text/javascript"> // <![CDATA[

 (bla bla bla)

 // ]]>
</script>

Partager ce message


Lien à poster
Partager sur d’autres sites

Une fois que j'avais testé ce script, il avait réussi à me foirer un background-image (oui, dans un css, moi aussi ça m'a surpris) en me l'étirant dans tout le div concerné plutôt que de se contenter de le coller en haut à gauche.

 

Bref, c'est encore perfectible. Donc continuez à gifer et priez le ciel qu'un jour Microsoft comprenne le mot "norme". :P

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour à tous et à toutes,

 

Il a possibilité via la CSS de faire afficher des images (background ou non ) avec IE.

 

J'ai mis en application ces possibilités sur mon site en signature, affichez la CSS sous IE pour vous en rendre compte (attention, il a un switch php qui ne charge pas cette CSS avec Firefox, il faut passer par IE :P )

 

Aucun javascript dans mon code :P

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

  • En ligne récemment   0 membre est en ligne

    Aucun utilisateur enregistré regarde cette page.

×