AccueilCodesTutorielsForumsEmploiLivresConnexion

  • Javascript / Ajax / DHTML CodeS-SourceS
  • RSS CodeS-SourceS
  • CodyxBot, le Bot GTalk & MSN qu'il vous faut !
  • Générez des revenus avec vos codes, scripts et tutoriaux
  • Aide à la navigation du site
begin process at 2009 01 09 01:11:40
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

BUG FIX DE LA TRANSPARENCE DES PNG SOUS IE 6


Information sur la source

Catégorie :Effets Classé sous : transparence, png, ie6, bug, fix Niveau : Débutant Date de création : 30/12/2007 Date de mise à jour : 30/04/2008 00:05:09 Vu / téléchargé: 8 456 / 324
Auteur : Evangun Ecrire un message privé
Note :
8,5 / 10 - par 2 personnes
8,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Commentaire sur cette source (11)
Ajouter un commentaire et/ou une note

Description

Un code très court en css/javascript pour régler la non-prise en charge de la transparence sous Internet Explorer 6. L'ensemble pèse environ 1ko.
Vous devez aussi indiquer la doctype suivante ou supérieure : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

A mon avis c'est mieux que du javascript pur car cela fonctionne également sur du contenu généré dynamiquement, sans rien avoir à faire. Et c'est plus simple et court que d'ajouter une propriété filter à chaque image ou div qui en a besoin.

Donc, pour toutes les balises images <IMG /> c'est réglé d'office. Pour le cas des images png utilisées en background css, il faut rajouter une classe "png" à vos div : <div class="maclassenormale png">. Attention, j'ai ajouté une ligne qui fait que les images png utilisées en background seront étirées pour s'étendre sur toute la div, sauf si la propriété no-repeat est appliquée à ce background. Il faudra l'enlever si cela ne vous convient pas. Si vous aviez un background png transparent auquel vous aviez donné une propriété position "bottom", "right" ou autre, je précise tout de suite que ça ne fonctionnera jamais correctement sous IE6.

Si certaines des vos div ont un background png qui ne s'affiche pas du tout, c'est certainement que vous devrez leur donner une hauteur de 1px (sous IE6 ça ne pose aucun problème, elles s'étireront quand même :)) Il faudra écrire : * html #element { height: 1px; }

Enfin, le * html est indispensable, c'est un vieux hack qui fait que uniquement IE6 et inférieur prendra en compte ces propriétés (sinon vous aurez des problèmes sous IE7). Je sais, les hacks c'est pas bien, mais celui-là ne posera probablement jamais de problème. Si vous voulez utiliser des commentaires conditionnels à la place, c'est votre choix et ça marche bien, moi je ne voulais pas faire un hit en plus :) Il y a aussi un gif d'un pixel carré transparent à mettre sur votre serveur au même endroit que la page.

Pour finir, ce code vient à l'origine de cette adresse :
http://komodomedia.com/blog/index.php/2007/11/05/css-png-image-fix-for-ie/
et j'y ai apporté deux ou trois améliorations. Lisez les explications et les commentaires pour plus d'infos, ils sont très instructifs.
 

Source

  • * html img,
  • * html .png {
  • behavior: expression(
  • (this.runtimeStyle.behavior="none") && (this.pngSet ? this.pngSet = true : (
  • this.nodeName == "IMG" ? (
  • this.src.toLowerCase().indexOf('.png') > -1 ? (
  • this.runtimeStyle.backgroundImage = "none",
  • this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
  • this.src = "transp.gif"
  • ) : 0
  • ) : (
  • this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
  • this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
  • (this.currentStyle.backgroundRepeat != 'no-repeat') ? (
  • this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='scale')"
  • ) : 0,
  • this.runtimeStyle.backgroundImage = "none"
  • ),this.pngSet=true
  • )
  • )
  • );
  • }
* html img,
* html .png {
	behavior: expression(
			(this.runtimeStyle.behavior="none") && (this.pngSet ? this.pngSet = true : (
				this.nodeName == "IMG" ? (
					this.src.toLowerCase().indexOf('.png') > -1 ? (
						this.runtimeStyle.backgroundImage = "none",
						this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
						this.src = "transp.gif"
					) : 0
				) : (
					this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
					this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
					(this.currentStyle.backgroundRepeat != 'no-repeat') ? (
						this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='scale')"
					) : 0,
					this.runtimeStyle.backgroundImage = "none"
				),this.pngSet=true
			)
		)
	);
}

Conclusion

Passez à Firefox ! ;)
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

30 décembre 2007 23:15:18 :
0
30 décembre 2007 23:18:08 :
0
13 janvier 2008 15:35:18 :
chemin image
30 avril 2008 00:05:09 :
ajout de la doctype

Commentaires et avis

signaler à un administrateur
Commentaire de max_scc le 07/01/2008 18:40:55 8/10

Très pratique! il me la fallait mais... mon image png est une image mappée, (donc avec la propriété usemap), avec le correcteur l'image n'est plus mappée, une idée?

signaler à un administrateur
Commentaire de Ipszy le 08/01/2008 14:26:59

9a fonctionne très bien sauf que sous IE(6) ça ne gère pas les alt...
Une suggestion pour y remédier serait la bienvenue

signaler à un administrateur
Commentaire de Evangun le 13/01/2008 15:31:26

Tiens je n'avais pas pensé à ces cas de figure !

En fait le mappage en lui-même est conservé (idem pour les alt - ou plutôt title), mais vu que l'image png est remplacée par un gif transparent d'un pixel carré, ça ne fonctionne plus.

Essayez de remplacer le fichier tranp.gif par un autre fichier gif, lui aussi entièrement transparent, mais d'une taille supérieure à celle de votre png, ça devrait fonctionner cette fois :)

signaler à un administrateur
Commentaire de Targos le 19/01/2008 00:48:09

hello,

Merci super cool :)

Par contre mes png sont en background-image d'un TD en background-position:center bottom; et avec le hack la position n'est plus prise en compte.. une idée ?

signaler à un administrateur
Commentaire de Evangun le 19/01/2008 13:07:57

Hello, malheureusement, comme je l'indique dans mon commentaire, il n'existe aucune solution à ça.

signaler à un administrateur
Commentaire de Targos le 19/01/2008 15:46:14

Oups, désolé :p pas bien lu ton commentaire ou trop vite...
pfff IE de m...e

signaler à un administrateur
Commentaire de chabgyver le 29/04/2008 17:37:05

Merci pour ce script mais malheureusement, ça ne fonctionne pas chez moi, mon png-24 bits est un bouton tout simple pourtant.
La seule chose que j'ai modifié dans le script, c'est l'url du fichier .gif

Y'a t-il autre chose à modifier ?
Merci

signaler à un administrateur
Commentaire de Evangun le 29/04/2008 20:52:00

Salut, après ton MP, je vois que ton problème vient bien du fichier css que tu as modifié, pas de mon script. à+

signaler à un administrateur
Commentaire de ju0123456789 le 30/07/2008 17:59:47

Hello !

C'est OP comme script, enfin il serait OP s'il marcherait, mais il ne marche pas car moi aussi j'ai un problème visiblement, je n'ai pourtant pas modifié le chemin d'accès du gif, et j'ai rajouter dans al balsie HEAD le DOCTYPE que tu as noté en haut.

Help plz merci :)

signaler à un administrateur
Commentaire de ju0123456789 le 31/07/2008 17:02:34

RE !
Bon en fait j'ai retesté ce script sur un document vierge et il marche en fait très bien, le problème venait de mon côté, sûrement dû à un problème de compatibilité avec d'autres scripts.
Voilà
Désolé pour mon commentaire précédent :)
SCRIPT PARFAIT :) et qui sert beaucoup en + ;)

@++

signaler à un administrateur
Commentaire de ju0123456789 le 31/07/2008 17:04:17 9/10

j'ai oublié la note, cela mérite un petit 9/10 ;) (dommage qu'il n'y a pas 9,5) lol

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

PNG perd sa transparence sous IE6 [ par ju0123456789 ] Bonjour à vous !Quelq'un peut-il m'aider svp ?Je met des images en PNG24 avec un fond transparent (aux chiottes les GIF !! lol), mais quand on a IE6 o CSS : Bug de positionnement ie6 [ par leejunfan ] Bonjour, j'ai un petit soucis avec ie6 que je dois pourtant certifier (le site s'affiche bien dans ie7 et firefox)Voila mon problème :J'ai une page di Bug de transparence [ par Evangun ] Bonjour à tous, quelqu'un saurait-il comment éviter le bug d'IE avec la transparence que je détaille en-dessous ? C'est le bug qui fait qu'au lieu de Problème d'affichage de la transparence des .png dans Explorer 6 [ par Joasie ] Bonjour,Je suis pr&#233;sentement en train d'apprendre &#224; faire des sites web. J'apprends par moi-m&#234;me et je travaille sur une plate-forme Ma Svp Help me Pb IE6 [ par sami ] Bonjour J'ai un pb avec mon code javascript, ce code fonctionne bien sur Firefox mais pas du tout sur IE6. En fait, je veux bien rem BUG DE FIREFOX sur la taille de l'affichage [ par coyote ] Faites un test tres simple: une page web qui contient juste: &lt;select&gt;&lt;option&gt;test&lt;/option&gt;&lt;/test&gt; Puis, augmentez la taille d Bug d'affichage des div avec IE [ par yosh ] Bonjour &#224; tous, Je voudrais savoir si vous avez d&#233;j&#224; eu des soucis avec les div et internet explorer Au chargement de ma page j'utili bug getElementsByName ( ) sous IE [ par Evangun ] Bonjour à tous, j'ai une question simple : connaissez-vous des bugs qui expliqueraient que sous Internet Explorer je n'arrive pas à compter le nombre Event.target : BUG sous FireFox 2.0 [ par gipsy21 ] L'appel de event.target sous Firefox 2.0 ne renvoit pas le mm objet courant que sous une version antérieure à Firefox.2.0 :L'evènement clic par exempl Problème de cadre autour d'un div [ par flexx ] Bonjour J'ai créé un div avec une bordure d'un pixel noire et mon cadre apparait de façon bizarre dans le coin inférieur gauche du div sous IE 6. En


Nos sponsors

Sondage...

CalendriCode

Janvier 2009
LMMJVSD
   1234
567891011
12131415161718
19202122232425
262728293031 

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :


Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,452 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.