11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous !

Voila, j'ai trouvé ce code sur un site, qui permet de rendre les background d'une classe transparente en utilisant le PNG :

.element {
    /* Mozilla ignore le code que Microsoft a mis en place sur son navigateur */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images_png/1.png');
			}
 
/* IE ignore les définitions de style avec [attributs], il ignorera ce qui va suivre */
.element[class] {
    background-image:url('images_png/1.png');
}


L'inconvenient de ce code, c'est que pour l'utiliser dans des tableaux, on est obligés de créer une nouvelle classe pour chaque "<td>" ce qui prend énormément de temps et qui prend des bons paquets d'octets aussi...

La solution serait de créer un script du genre "PNGbehavior" mais qui fonctionne pour les "<img" et pour les "background".

Je ne m'y connait pas encore assez pour réaliser un script comme celui-ci mais si quelqu'un veut ce lancer (il donnerait la solution à des milliers d'utilisateur qui aiment le PNG !!) :

Le script aurrait les caractéristiques suivantes :
- Doit fonctionner sur une page externe à inclure dans la page html ou php
- Il doit donner un équivalent "<img src='1.png'...>" par un code de n'importe quel nature mais qui incluera par n'importe quel moyen la correction de l'affichage PNG
- Il doit donner un équivalent de "<td background='1.png'..." du genre "<td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=1.png,sizingMethod='scale');"..."
- Il doit être compatible sur tous les naviguateurs

Et c'est tout !!
Alors ne me dites pas que sur tous ces super-programmeur javascript/css il n'y en a pas un qui pourrait faire un script simple comme celui-ci.

Vous pouvez vous aidez du script "PNGbehavior" que voici :

<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>

var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "blank.gif";

if (supported) fixImage();

function propertyChanged() {
   if (!supported) return;

   var pName = event.propertyName;
   if (pName != "src") return;
   // if not set to blank
   if ( ! new RegExp(blankSrc).test(src))
      fixImage();
};

function fixImage() {
   // get src
   var src = element.src;

   // check for real change
   if (src == realSrc) {
      element.src = blankSrc;
      return;
   }

   if ( ! new RegExp(blankSrc).test(src)) {
      // backup old src
      realSrc = src;
   }

   // test for png
   if ( /\.png$/.test( realSrc.toLowerCase() ) ) {
      // set blank image
      element.src = blankSrc;
      // set filter
      element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
                                     src + "',sizingMethod='scale')";
   }
   else {
      // remove filter
      element.runtimeStyle.filter = "";
   }
}

</script>
</public:component>


J'avais moi même tenter (et oui j'avais beaucoup d'espoir Smiley smile ) de le modifier, en doublant le script, et en remplaçant les variables "realSrc" et "src" par "realBackground" et "background"...

Sous ie, le code fonctionnait à moitié, mais je pense qu'il y avait peut-être de l'idée dans mon script.

Inspire !


Merci à tous et à toutes!
Bonne Soirée,
FluidBlow.