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:

[ASTUCE]PNG Transparent sous IE


tangui

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

Lien vers le commentaire
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)

Lien vers le commentaire
Partager sur d’autres sites

oui, je n'ai pas eu le temps de tester ce script.. Mais j'ai pensé à toi en le voyant ainsi qu'a Diana...

Au moins, on sait a quoi s'en tenir... Faites des Gifs! :P

Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs

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

Lien vers le commentaire
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

Lien vers le commentaire
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

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...