Plusieurs ID concernés par document.getElementById

Eléphant du PHP | 160 Messages

12 avr. 2008, 16:36

Bonjour,

Je dois mettre un javascript pour régler un problème de transparence PNG avec IE6.
Pour que le code reste valide j'ai dû metre le onload dans la balise <body>

Code : Tout sélectionner

<body onload="correctifpng(document.getElementById('img_cont'))" >
Mais j'ai plusieurs images concernées sur la même page.
Je ne peux pas mettre 2 ID identiques sur une page.
Alors comment faire pour que la fonction marche sur toutes mes images ?

Merci

Mammouth du PHP | 2937 Messages

12 avr. 2008, 17:14

Essaie ça :

Code : Tout sélectionner

var img_png = document.getElementsByTagName ('img'); for (var i = 0; i < img_png.length; i ++) { // Instructions de vérification de l'attribut src et de résolution de la transparence }
La boucle for vérifie si l'attribut src a une valeur finissant par ".png" (une expression régulière fera l'affaire pour la vérification). Si c'est le cas, tu appliques la propriété propriétaire de Miscrosoft filter (une méthode assez "cochonne", malheureusement : quand est-ce que tous les utilisateurs d'IE 6 essaieront pour de bon autre chose que ce navigateur jurassique ? :roll: ).

Enfin, il est judicieux de placer ce script dans un élément script encadré par un commentaire conditionnel (vu qu'il ne vise qu'IE 6 et versions antérieures).

Code : Tout sélectionner

<!--[if lte IE 6]> <script type="text/javascript"> // Le script ci-dessus </script> <![endif]-->

Eléphant du PHP | 160 Messages

12 avr. 2008, 18:04

Merci pour ton aide mais malheureusement je n'ai pas réussi.

Pourtant c'est bien ce que je veux faire, ça me permet de contourner le problème des ID et en plus de n'être réquisitionné que si c'est inférieur à IE6
Mais je n'ai pas réussi à faire :
// Instructions de vérification de l'attribut src et de résolution de la transparence
En fait j'ai ce script dans png.js

Code : Tout sélectionner

function correctifpng(img) { if(document.all && (IEver=parseFloat(navigator.appVersion.split("MSIE")[1])) && (IEver>=5.5) && (IEver<7) && document.body.filters && img) { imgName=img.src.toUpperCase(); if(imgName.substring(imgName.length-3,imgName.length)=="PNG") img.outerHTML= "<span "+(img.id?"id='"+img.id+"' ":"")+(img.className?"class='"+img.className+"' ":"")+(img.title?"title=\""+img.title+"\" ":"") +"style=\"width:"+img.width+"px;height:"+img.height+"px;"+(img.align=="left"?"float:left;":(img.align=="right"?"float:right;":"")) +(img.parentElement.href?"cursor:hand;":"")+"display:inline-block;"+img.style.cssText+";" +"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img.src+"',sizingMethod='scale');\"></span>"; }}
Je l'appelle comme ça :
<body onload="correctifpng(document.getElementById('pnglogo'))">

Je mets l'ID dans la balise IMG de l'image concernée par le problème de transparence PNG.

Ta solution semble parfaite pour contourner le problème des ID multiples mais mon petit niveau, microscopique, m'empêche d'y parvenir.

Si tu vous pouvez encore m'aider,

Merci

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

12 avr. 2008, 20:35

L'objet "image" se trouve dans "img_png" (code de Victor)
Tu récupères les éléments en ".png" (expression régulière)
et tu appliques ta fonction dessus.

var recherchePNG = /(.png$)/;

for (var i = 0; i < img_png.length; i ++)
{    
    if(recherchePNG.test(img_png.src))
    {
         correctifpng(img_png);
    }
}
 

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Eléphant du PHP | 160 Messages

12 avr. 2008, 23:04

J'ai essayé diverses choses avec vos informations et j'en suis là :

Code : Tout sélectionner

<!--[if lte IE 6]> <link href="ie.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="png.js"></script> <script type="text/javascript"> // recherche les balises img var img_png = document.getElementsByTagName ('img'); // boucle pour trouver toutes les balises img for (var i = 0; i < img_png.length; i ++) { // chercher toutes les images .png if(recherchePNG.test(img_png.src)) { // appliquer le correctif à toutes les images trouvées, mais à quoi sert test dans : recherchePNG.test ? correctifpng(img_png); } } </script> <![endif]-->
J'ai mis des commentaires dans le code pour essayer de comprendre, si vous pouvez encore m'aider,

Merci

Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

13 avr. 2008, 00:06

tu as oublié de définir "recherchePNG" qui est le masque de recherche (regex).
"test()" est une fonction regex javascript qui teste l'existence du masque dans la chaine passé en paramètre.

Ceci dit j'ai oublié d'ajouter l'indice de tableau à "img_png" pour ne traiter qu'un élément par passage de boucle.
if(recherchePNG.test(img_png[i].src)) 
Idem pour l'appel de la fonction correctif

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute

Eléphant du PHP | 160 Messages

13 avr. 2008, 00:29

Merci pour ton aide, j'en suis là :

Code : Tout sélectionner

<!--[if lte IE 6]> <link href="ie.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="png.js"></script> <script type="text/javascript"> // recherche les balises img var img_png = document.getElementsByTagName ('img'); // masque de recherche (regex) var recherchePNG = /(.png$)/; // boucle pour trouver toutes les balises img for (var i = 0; i < img_png.length; i ++) { // chercher toutes les images .png // test() : fonction regex javascript testant l'existence du masque dans la chaine passée en paramètre if(recherchePNG.test(img_png[i].src)) { // appliquer le correctif à toutes les images png trouvées correctifpng(img_png[i].src); } } </script> <![endif]-->
J'ai essayé d'intégrer les corrections mais ça ne marche pas...
si tu peux encore m'aider...

Merci

Mammouth du PHP | 2937 Messages

13 avr. 2008, 02:21

Essaie de procéder ainsi :

Code : Tout sélectionner

<!--[if lte IE 6]> <link href="ie.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var img_png = document.getElementsByTagName ('img'); var recherchePNG = /(.png$)/; for (var i = 0; i < img_png.length; i ++) { if (recherchePNG.test (img_png[i].src)) { img_png[i].style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+img_png[i].src+'", sizingMethod="image")'; } } </script> <![endif]-->

Eléphant du PHP | 160 Messages

13 avr. 2008, 02:35

Merci mais toujours pas.
Dommage qu'ils n'aient pas créé : document.getElementByClass
ça m'aurait bien dépanné...

Si tu as une autre idée je suis preneur parce que là je suis bloqué.

J'y retourne...

Merci encore

Mammouth du PHP | 19672 Messages

13 avr. 2008, 09:17

non, mais tu as getElementsByTagName qui te retourne un tableau sur lequel tu peux boucler pour vérifier la propriété className, un truc du genre :
<script type="text/javascript">/* <![CDATA[ */
var oImgs = document.getElementsByTagName('img');
for(var oImg in oImgs)
{
    if(undefined !== oImg.className && oImg.className == 'laClasseRecherchee')
    {
        //  action a effectuer...
    }
}
//... etc...
/* ]]> */</script>
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphant du PHP | 160 Messages

13 avr. 2008, 12:37

J'ai essayé dans tous les sens mais sans résultat...

Je m'y remets,

Je pensais pas bloquer comme ça pour IE6 :( , mais bon, patience, bientôt plus d'utilisateurs...

Mammouth du PHP | 19672 Messages

13 avr. 2008, 12:46

Un détail, je me suis gouré dans la boucle, corrigé :
<script type="text/javascript">/* <![CDATA[ */
var oImgs = document.getElementsByTagName('img');
for(var oImg in oImgs)
{
    if(undefined !== oImgs[oImg].className && oImgs[oImg].className == 'laClasseRecherchee')
    {
        //  action a effectuer...
    }
}
//... etc...
/* ]]> */</script>
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphant du PHP | 160 Messages

13 avr. 2008, 13:21

Merci pour ton aide,

Je viens juste de trouver une solution existante :

Code : Tout sélectionner

function correctPNG() { 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 } } } window.attachEvent("onload", correctPNG);
Cela dit j'ai quand même essayé avec la tienne mais je n'ai pas réussi, c'est dommage elle avait l'air très bien,

Merci encore pour votre aide,
on peut toujours compter sur vous,
ça fait plaisir.

Mammouth du PHP | 19672 Messages

13 avr. 2008, 13:25

Fais donc voir tes essais avec ma méthode, c'est peut-être pas grand chose qui manque pour que ça fonctionne aussi :-k
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse :axe:

Eléphant du PHP | 160 Messages

13 avr. 2008, 17:58

Je viens de tout faire marcher... ça n'a pas été facile.
Je vais essayer aussi ta méthode, je voudrais essayer de faire le truc vraiment court et propre pour régler simplement le problème des PNG en dur dans le HTML et ceux dans la CSS.

J'essaierai avec ton code, mais comme je ne suis pas programmeur c'est difficile,

Mais déjà bien content d'avoir fait fonctionner sous IE sans trop dégrader,

Merci encore pour votre aide,

Toujours résolu mes posts sur votre forum,

Vous et Alsa, j'adore, heureusement qu'il y a encore des endroits comme ça sur le Web

et pour l'anecdote, j'ai même vu que les posts étaient indexés par Google dans les 10 minutes qui suivent... Impressionnant...