Transparence PNG sous ie6 utilisant "pngfix.js"

**socket77** · 18/05/2008, 19h52

Voila apparament le script de compatibilité de la transparance des png pour IE que j'utilise ne marche pas pour ma page web, alors que j'avais déjà réussi à l'utiliser pour d'autre site...
Le code est le même la fonction d'appel la meme mais cela ne fonctionne pas..

Le script n'a aucunement été modifié

dans le <head> de la page



dans pngfix.js (dans le meme repertoire bien sur)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
/*
 
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
      }
   }
}

Une idée?

**Candygirl** · 18/05/2008, 20h44

Bonjour,

As-tu testé que ton commentaire conditionnel était bien pris en compte ? Par exemple en ajoutant une modification css bien visible.

As-tu testé si ton javascript était bien lu? Par exemple en ajoutant un window.alert tout en haut du script.

Supprimer le . change-t-il quelque chose (je pose la question parce que je ne peut pas tester actuellement) ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!--[if lt IE 7.]>

**socket77** · 18/05/2008, 21h48

Oui j'ai testé d'enlever le . dans <!--[if lt IE 7.]>

J'ai juste copier collé le script de cette page et il fonctionne bien chez eux et il déjà fonctionné aussi sur un autre site que j'ai fait

http://homepage.ntlworld.com/bobosola/pnghowto.htm

**Candygirl** · 18/05/2008, 22h23

Tu visualises le résultat sur une version officielle d'IE6 ou sur une standelone quelconque?

Et si testes ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<!--[if lt IE 7]>
<style type="text/css">
  body {border:10px solid red;}
</style>
<![endif]-->

Tu vois la bordure s'afficher ou pas?

Tu as installé la béta d'IE8 ou pas?

**socket77** · 18/05/2008, 23h21

J'ai en effet essayé ton bout de code la bordure apparait,
Autre chose j'ai d'abord utilisé une standalone d'ie6 puis j'ai désinstallé IE7 et installé IE6 aucun résultats !

Je désespère .. !

**Candygirl** · 19/05/2008, 01h34

Perso j'ai multiple IE (pour IE6) et depuis que j'ai installé la béta de IE8, je ne peux plus détecter via les commentaires conditionnels la version d'IE. Mais même en essayant avec un if ie tout simple ton code ne tournait pas non plus chez moi.

Après avoir constaté que document.images.length valait toujours 0, j'ai cherché pourquoi (Je me suis égarée sur ce forum je ne maîtrise pas javascript plus que ça; c'est l'aspect commentaire conditionnel qui m'a attirée

). En fait le truc c'est que javascript ne peut pas accéder à des éléments avant que le doc soit "construit".

Donc, en retardant l'application à après le chargement de la page, ça fonctionne chez moi. J'ai rajouté:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
window.onload=function(){
 
 
}

autour de ton code.

Autrement tu peux aussi coller ton commentaire conditionnel tout au bas de la page ça devrait faire le même effet.

Transparence PNG sous ie6 utilisant "pngfix.js"

JavaScript

Vue hybride

Discussions similaires

Partager

Partager