begin process at 2010 03 14 18:46:08
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Trucs & Astuces

 > BUG FIX TRANSPARENCE PNG IE (SIMPLE)

BUG FIX TRANSPARENCE PNG IE (SIMPLE)


 Information sur la source

Note :
10 / 10 - par 1 personne
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs & Astuces Classé sous :png, simple, pngfix, iexplore Niveau :Initié Date de création :28/09/2006 Date de mise à jour :26/04/2007 12:15:40 Vu / téléchargé :28 490 / 1 087

Auteur : savon

Ecrire un message privé
Site perso
Commentaire sur cette source (22)
Ajouter un commentaire et/ou une note

 Description

Résout le Bug D'internet explorer qui n'affiche pas les png ainsi vous pouvez supprimer tout vos vilans gif et passer au png
un Exemple Concret est Ici http://www.love2love.com/guide/index.php.

Source

  • //Correction png en fonction du navigateur
  • //
  • <script>
  • function DisplayPngByBrowser ( browser, img_path, width, height ) {
  • var png_path;
  • if (browser == 'Microsoft Internet Explorer') {
  • document.write('<img src="/images/integration/blank.gif" style="width:'+width+'px; height:'+height+'px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+img_path+'\', sizingMethod=\'scale\');" >');
  • }
  • else if (browser == 'Netscape')
  • document.write("<img src='"+img_path+"' />");
  • else
  • document.write("<img src='"+img_path+"' />");
  • }
  • </script>
  • <script language="javascript">
  • //a mettre dans le .html
  • var path_png = DisplayPngByBrowser(navigator.appName, 'test_img.png', 152, 40 );
  • </script>
//Correction png en fonction du navigateur
// 
<script>
function DisplayPngByBrowser ( browser, img_path, width, height ) {
var png_path;	
	if (browser == 'Microsoft Internet Explorer') {
	document.write('<img src="/images/integration/blank.gif" style="width:'+width+'px; height:'+height+'px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+img_path+'\', sizingMethod=\'scale\');" >');
}
else if (browser == 'Netscape')
	document.write("<img src='"+img_path+"' />");
else 
	document.write("<img src='"+img_path+"' />");
	
}
</script>
<script language="javascript">
//a mettre dans le .html
var path_png = DisplayPngByBrowser(navigator.appName, 'test_img.png', 152, 40 );
</script>

 Conclusion

Fonctionne bien attention cependant il faut parfois vider le cache des fichiers IE pendant le developpement.
Mais en prod ca ne pose aucun probleme.

Marche sous IE Firefox et opera

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

28 septembre 2006 16:59:49 :
fautes
21 novembre 2006 13:24:27 :
Mise a jour image blank
01 décembre 2006 15:26:45 :
Ajout d'un exemple concret
26 avril 2007 12:15:40 :
Description pas assez clair

 Sources de la même categorie

ACCÈS À LA MÉTHODE SETATTRIBUTE('STYLE','') SOUS IE6 par masternico
OUTIL DE SÉLECTION par jdmcreator
Source avec Zip SIMPLIFIER LA CREATION DYNAMIQUE D'ELEMENT HTML par kazma
DÉTECTER SI CSS EST ACTIVÉ par jdmcreator
RETROUVER LE NUMÉROS DE TELEPHONE DE VOTRE EMPLOYER RAPIDEME... par rappise

 Sources en rapport avec celle ci

Source avec Zip SIMPLIFIER LA CREATION DYNAMIQUE D'ELEMENT HTML par kazma
Source avec Zip Source avec une capture MASTERMIND IPHONE par fifrelin70
Source avec Zip Source avec une capture INFO BULLES STANDARD COMPATIBLE FF,IE,CHROME,OPERA SIMPLE D'... par alex3105
Source avec Zip Source avec une capture ANNIMATION QUI RECOUVRE L'ÉCRAN AVEC UN PNG SEMI TRANSPARENT par djmmix
Source avec une capture MENU SIMPLE par tit1012

Commentaires et avis

Commentaire de abdoulax le 28/09/2006 23:28:17

Autant utiliser les CSS pour faire ça!!

Have fun

Commentaire de transfear le 29/09/2006 14:32:50

else if (browser == 'Netscape')
    document.write("<img src='"+img_path+"' />");
else
    document.write("<img src='"+img_path+"' />");
    
}

Quel est l'intérêt de faire un else if et un else ayant les mêmes instructions ??? Autant ne garder qu'un seul else...

Commentaire de rubiks10 le 29/09/2006 23:08:01

oui et surtout qu'un document.write( ... ) efface tout sur la page...
donc oui la solution est de creer une classe css

Bonne prog a tous

Commentaire de MangaII le 02/10/2006 07:55:04

"la solution est de creer une classe css" ????????????????????

Tu veux bien expliquer comment tu affiche des PNG en alpha ? avec une CSS (valide de préférence) ???

Commentaire de abdoulax le 02/10/2006 13:09:22

#exemple{
    background-image: url("image.png");
    * background-image: url("blank.gif");
    * filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');
}

Als les petite * s'appel des hack ( du moins je te préviens le code j'ai pas testé mais c'est le principe qui compte, il faut que tu regarde les hack css car je suis même plus sur kon utilise l'* pour faire des hack...). Donc la prémiere ligne s'execute si on est pas sous IE sinon c'est les 2 autre ligne qui prenne la main.

Je me demande si j'ai pas mélangé un peu tout mais le principe est la, regarde les hack css!!

Have fun

Commentaire de MangaII le 02/10/2006 13:42:54

En effet, ca pourrai fonctionner !
Mais là encore on utilise un hack spécifique à IE ! et le problème ici c'est que la CSS n'est plus valide ( http://jigsaw.w3.org/css-validator/ ), donc cette solution est à éviter ...

Commentaire de abdoulax le 02/10/2006 14:01:39

Si tu ve vraiment ne pas utiliser de hack, t'as cas passer par php. Tu fais un CSS pour IE et un pour les autres, et c'est php qui fera le choix.
Mais bon pour moi la meilleur des solutions est le hack CSS, c'est plus claire, plus facielement modifiable.

Ton validateur de CSS est un simple robot hors il prend pas en compte les différentes raison d'un tel choix. De plus l'utilisation de Javascript est encore moins conseillé pour rendre une page valide. Certe le Javascript permet de contourné le validateur, mais ne respecte en aucun cas les contrainte de validité!!

J'espère que tu comprends mon raisonnement, en tout cas je te conseil de ne pas utiliser ton système...

Have fun

Commentaire de savon le 18/10/2006 17:52:25

Pour Revenir sur le CSS, le but de ce bout de code est de simplifier l'intégration du PNG, pas de le compliquer. Ce code permet d'afficher n'importe qu'elle image png dans une page sans avoir justement a créer 250 Css différents pour afficher en plus une image.

Pour le Css, la méthode que nous utilisons est la suivante pour passer de Ie a Firefox :

html>body .csslabel{
background-image:url("chemin/image.png");
background-repeat: repeat-y;
background-position:center right;
        }
.csslabel {
background-repeat: repeat-y;
background-position:center right;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='chemin/image.png', sizingMethod='scale');
}

Commentaire de savon le 18/10/2006 17:54:51

Concernant les else et else if, n'oublier pas qu'il n'y a pas que 2 navigateurs qui trainent sur la toile et que les identifications peuvent changer...

Commentaire de Fugugirl le 13/11/2006 15:55:42

À quoi correspond cette image "blank.gif" ... un gif transparent qu'il faut mettre à   la base de son site ??

Commentaire de savon le 21/11/2006 13:21:35

oui.
Mais tu peut le mettre ou tu veut et changer le target.
C'est une image vide elle est transaparente je peut te l envoyer si tu veut.

Commentaire de savon le 13/03/2007 14:43:33

Cette source est a present disponible sur
www.pluton.homelinux.com/sources

Commentaire de abdoulax le 13/03/2007 22:36:12

Il faut savoir que javascript n'est pas toujours activé. je reste sur le fait que la solution de CSS est meilleur... :p

Commentaire de savon le 19/03/2007 14:03:17

Dslé pb de dns
l'url est donc :
http://plutonserveur.homelinux.com/

Commentaire de benftp le 19/07/2007 12:35:36

Le "hack CSS" est plus simple.
tu fais un png24 pour les navigateurs qui le gèrent en mettant "!important"
et un gif pour ie<7

/*CSS*/
#Exemple
{
background-image: url('bg.png') !important;
background-image: url('bg.gif') ; /* pour ie < 7 qui ne gère pas la transparence des png*/
}
/*END CSS*/

pour le gif, perso, j'le fais sous photoshop.
>enregistrer pour le web
>GIF 128 tramé
>et je met "tramage de transparence du motif"
ce qui fait un résultat pas trop dégeu

Commentaire de abdoulax le 19/07/2007 13:05:49

Ici ce script n'a pas de rapport avec ta solution. En effet tu ne gère qu'un seul type de transparence avec un Gif. Alors qu'ici on cherche à gérer tous les types de transparence que fournie un png. D'ailleur je croi que IE gère la transparence basique du PNG (à confirmer).

Have fun

Commentaire de benftp le 19/07/2007 14:54:39

bin c'est pas faux, dans le sens où ma solution ne résout pas le problème de transparence des PNG.
c'est une autre alternative pour ceux qui ne veulent pas voir le fond bleuté du PNG transparent sur ie5.5 et ie6 (qui se feront de plus en plus rare, normalement).

sur ie5.5 et ie6 on voit un GIF de moins bonne qualité
et sur firefox, ie7 et autres, on voit le PNG clean

A vrai dire j'avais essayé avec le blank.gif et le filter, mais comme ca marchait pas, jme suis rabattu sur cette solution. Mais j'vais réessayer quand même, c'était peut-être qu'une histoire de cache...

Commentaire de benftp le 22/07/2007 17:54:29

oui au fait je confirme, j'avais un problème de cache, ca marche très bien le filter :D

/*CSS*/
#Exemple
{
background-image: url('bg.png') !important;
background-image: url('blank.gif');
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png', sizingMethod='scale');
}
/*END CSS*/

messi

Commentaire de masta64 le 21/08/2007 14:22:56

hello tout le monde , jai attentivement lu tout ce post, j'ai tester differente facon pour regler ce prob de transparence au niveau de mes png (en 24 bits de prfondeur au niveau de la transparence, ehhh oui c'est du costaud lol) , mais le prob c'est que la je cale serieusement a tel point que j'en ai mal a la tete, pourriez vous m'aider ???

Le lien vers mon prob http://masta64.neuf.fr/PowerMax_BAD_Design/Index_1024.htm

Commentaire de masta64 le 21/08/2007 14:33:11

en fait je crois que le probleme est juste une histoire d'url de fichiers js et img

Commentaire de Evangun le 30/12/2007 23:23:12

Hello,

cette solution est lourde à mettre en place, et pour faire suite à la discussion sur une solution css, vous retrouverez effectivement une alternative bien plus pratique ici :

http://www.javascriptfr.com/codes/BUG-FIX-TRANSPARENCE-PNG-SOUS-IE_45232.aspx

Commentaire de ju0123456789 le 30/07/2008 18:07:14

ça ne marche pas ! c'est moi le problème ou c'est le code qui en marche pas du tout ?

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

javascript dans formulaire acrobat [ par domi ] "Envoie par mèl du contenu du formulaire"j'ai écrit deux lignes simple en javascript dans un formulaire acrobat, il fonctionne bien avec Acrobat "prog recherche aide [ par g2m ] nouveau dans la création de site, je bute sur une chose simple, créer un menu déroulant horizontale avec survol.Un truc simple quoi!Dans cette barre 8 c'est simple comme bonjour mais je ne me raplle plus... [ par escaflone1 ] Bonjour,comme je le di je ne sais plus comment on fait pour actualiser une page mais juste une seul fois:la page charger puis 1 voir 2 sec apres hop i tout simple [ par pierre81 ] je débute et je voudrez savoir comment on fait pour dire que quand on clique sur la frame de gauche , je veux afficher un truc a droite merci de me do Formulaire tout simple [ par Angel42480 ] Bonjour, je travail en html,Je désirerais créer un formulaire, qui définisse une image.Exemple : on tape dans la case du formulaire : "arbre" . Je veu Supprimer menubar [ par meka ] Bonjour,Voilà, je m'enlise sur un truc simple depuis 4 jours !j' explique : j'aimerais faire disparaitre le menubar ( Menus : fichier-edition-affichag truc surement tres simple mais bon... [ par bipross ] Bonjour,Voici mon souci :....var nbJ = nb_jour(l,laDate); //retourne 24 par exempleif (nbJ &gt; 31){toto = 1;}else{toto = 2;}et j'obtiens l'erreur "ob Afficher une popup [ par BsEtZeOpLhD ] Bonjour.Je cherche un code pour afficher une simple popup à l'affichage d'une fenetre. Une popup affichant une page web (http://perso.wanadoo.fr/bsetz contenu d'un textarea dans des 'input text' [ par SauCisS ] Bonjour a tousMon problème est simple, peut-t-on me dire comment faire pour mettre le contenu d'une zone de texte (texarea) dans des zones de texte si un script dans une page html pour un calcul simple avec saisie de l'utilisateur [ par lemasque49 ] si quelqu'un peut me dire comment faire un javascript qui me permet d'avoir cinq fenêtre dans lesquelles j'aurais 4 variables et un résultat et dans l


Nos sponsors


Appels d'offres

Sondage...

Comparez les prix

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), 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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,796 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales