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

Par tangui
dans Programmation

 Partager

Messages recommandés

tangui Godlike Member

tangui

Posté(e)
Posté(e)

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

KewlCat Devil Member !

KewlCat

Posté(e)
Posté(e)

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)

tangui Godlike Member

tangui

Posté(e)
  • Auteur
Posté(e)

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

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

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

KewlCat Devil Member !

KewlCat

Posté(e)
Posté(e)

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>

Phantom-X Mega Power Member

Phantom-X

Posté(e)
Posté(e)

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

simous Extrem Member

simous

Posté(e)
Posté(e)

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

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.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

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