CodeS-SourceS est hébergé par Frontier.fr

Cliquez ici pour mettre ce site au démarrage de votre navigateur

AccueilCodesTutorielsForumsEmploiLivresConnexion

begin process at 2009 01 08 22:32:32

ESSAYEZ WINDOWS 7 GRATUITEMENT DèS DEMAIN par fabien

LUCENE - IGNORER LES ACCENTS LORS DE L'INDEXATION ET LA RECHERCHE | IGNORE DIACRITICS par cyril

MESH OBJECTS BROWSER - MOB 1.0 SUR CODEPLEX par redo

MICROSOFT TAG par khamlon

[LINQTOSQL] REQUêTES ASYNCHRONES SIMULTANéES par NeuroCypher

RE : PROBLèME AFFICHAGE DATE MISE à JOUR par PetoleTeam

RE : PROBLèME AFFICHAGE DATE MISE à JOUR par rgdu86

RE : PROBLEME SCROLLING AVEC IFRAME par PetoleTeam

RE : CREATION DE MOUVEMENT DE PERSONNAGES SUR UNE MAP par PetoleTeam

RE : RéSOLUTION D'éCRAN par PetoleTeam

+ de logiciels à télécharger

1 330 450 membres
762 nouveaux aujourd'hui
14 643 membres club

Trouver une ressource

Trouvez une ressource parmi 39 260 codes, 1 223 189 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

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 TRANSPARENCE PNG IE (SIMPLE)

Information sur la source

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é: 23 482 / 918

Auteur : savon

Site perso

Ecrire un message privé

Note :

10,00 / 10

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

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

blank.gif 43 octets
png.htm 677 octets
png.js 548 octets
test_png.png 2 404 octets

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

API GOOGLE TRADUCTION par CodeurleGeek

AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT par CodeurleGeek

AUTO MANUEL PARAGRAPHES, DIAPO PARAGRAPHES OU AUSSI PROJECTE... par abdelaziz_info

DEUX MESSAGES DANS LA BARRE D'ÉTAT par pgl10

DIAPORAMA 360° V2 MOUVEMENT DANS LES QUATRE SENS ROTATION VA... par abdelaziz_info

Toutes les sources de la catégorie Trucs & Astuces

Sources en rapport avec celle ci

ANNIMATION QUI RECOUVRE L'ÉCRAN AVEC UN PNG SEMI TRANSPARENT par djmmix

AJAX EN MOINS DE 50 LIGNES par Kimjoa

BUG FIX DE LA TRANSPARENCE DES PNG SOUS IE 6 par Evangun

BUG FIX PNG TRANSPARENT SOUS IE 6 (MOOTOOLS) par pysco68

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 > 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