image PNG

Pascal · 19-11-2006 21:01:50

Pour que vos images png ne soit plus sur un fond marron clair sous IE

mettre dans HEAD

<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

créer un fichier pngfix.js avec le code

/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var 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
      }
   }
}

kewee · 27-08-2008 18:45:10

Bonjour smile

je suis désolée de demander davantage de détails, mais j'ai beau regarder même les styles proposés, j'ai l'impression que personne n'est parvenu à rendre ses .png transparents sous ie6. Sur un site, no soucy, mais pour le forum que je suis en train de monter je n'y parviens pas.

J'ai placé le

<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

dans "header.php", juste après

<link rel="stylesheet" type="text/css" href="style/<?php echo $pun_user['style'].'.css' ?>" />

aurais-je erroré?

dsl encore si ma question est stupide mais je cale dessus depuis un bon moment et je ne sais plus quoi faire là sad

Pandark · 28-08-2008 03:00:04

<!--[if lt IE 7]>

Ça n'est pris en compte que si le navigateur est internet explorer 7 normalement wink

Regnareb · 28-08-2008 10:55:18

Mouais, foutre du Javascript pour ça, c'est vraiment laid, à moins que ce soit un site commercial pour un client, mieux vaut oublier.

La manière la plus simple est encore de fournir un gif au lieu d'un png aux utilisateurs d'IE6, il peut y avoir un peu plus d'aliasing, mais au moins ça leur rappelle qu'ils sont sous IE6 et qu'il serait temps d'en changer

balise.class {
background-image:url(image.png) !important;
background-image:url(image.gif);
}

Et hop c'est dans la poche smile

kewee · 28-08-2008 15:52:00

Regnareb a écrit :

Mouais, foutre du Javascript pour ça, c'est vraiment laid, à moins que ce soit un site commercial pour un client, mieux vaut oublier.
La manière la plus simple est encore de fournir un gif au lieu d'un png aux utilisateurs d'IE6, il peut y avoir un peu plus d'aliasing, mais au moins ça leur rappelle qu'ils sont sous IE6 et qu'il serait temps d'en changer
balise.class {
background-image:url(image.png) !important;
background-image:url(image.gif);
}
Et hop c'est dans la poche

comment dire ça simplement???

hum
/me s'éclaircit la gorge
je te vénère, tu es mon maître

Pandark > j'ai essayé toutes les méthodes je crois, mais j'ai beau tout essayer, ie7/ ie6 dans le code ou bien d'autres trouvés sur le net, rien n'y fait huh est-il réellement possible de mettre ce javascript dans punBB? L'avez-vous testé?

Dans tous les cas, merci encore pour la soluce, que je trouve excellente, moi aussi je suis anti ie6 lovers et ça les incitera peut-être à passer à la version supérieure mais sans les pénaliser de manière trop importante siffle .

Dernière modification par kewee (28-08-2008 16:07:08)

Mpok · 28-08-2008 19:50:18

On peut tout à fait gérer la transparence des png avec ie6, sans javascript.
Il suffit d'utiliser les propriétés "filter" dans un css conditionnel.
(c'est d'ailleurs ce que fait le javascript..)
A noter que cela ne fonctionne que si on déclare explicitement les tailles de l'image dans le css.

kewee · 28-08-2008 19:57:59

ok mais... comment?

et ma question est de savoir si cette astuce, partagée ici, est vraiment valable, et, si oui, comment rendre ce javascript actif ou si c'est une astuce qui n'a jamais été testée et n'est finalement pas utilisable sur punBB

ceci dit l'astuce du dessus me convient, mais j'voulais juste savoir si j'm'y prenais comme un pied ou si y'a une finesse que j'ai pas saisie tongue

en tout cas merci pour ces pistes wink

Mpok · 28-08-2008 20:24:32

kewee a écrit :

ok mais... comment?

Par exemple, suivre ce tuto.

C'est beaucoup plus propre de mettre le "filter" dans le css plutôt que de l'appliquer par javascript. En fait, le seul intérêt d'utiliser le javascript, c'est si tu as 50 images transparentes à traiter (et encore..).

kewee · 28-08-2008 21:08:52

Mpok a écrit :

kewee a écrit :
ok mais... comment?
Par exemple, suivre ce tuto.

adresse relevée, merci, ça me servira sûrement ultérieurement

Archives FluxBB.fr

#1 19-11-2006 21:01:50

image PNG

#2 27-08-2008 18:45:10

Re : image PNG

#3 28-08-2008 03:00:04

Re : image PNG

#4 28-08-2008 10:55:18

Re : image PNG

#5 28-08-2008 15:52:00

Re : image PNG

#6 28-08-2008 19:50:18

Re : image PNG

#7 28-08-2008 19:57:59

Re : image PNG

#8 28-08-2008 20:24:32

Re : image PNG

#9 28-08-2008 21:08:52

Re : image PNG

Pied de page des forums