Page 1 sur 2
Plusieurs ID concernés par document.getElementById
Posté : 12 avr. 2008, 16:36
par jpsartre
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
Posté : 12 avr. 2008, 17:14
par Victor BRITO
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 ? 
).
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]-->
Posté : 12 avr. 2008, 18:04
par jpsartre
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
Posté : 12 avr. 2008, 20:35
par Truc
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);
}
}
Posté : 12 avr. 2008, 23:04
par jpsartre
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
Posté : 13 avr. 2008, 00:06
par Truc
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
Posté : 13 avr. 2008, 00:29
par jpsartre
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
Posté : 13 avr. 2008, 02:21
par Victor BRITO
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]-->
Posté : 13 avr. 2008, 02:35
par jpsartre
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
Posté : 13 avr. 2008, 09:17
par Cyrano
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>
Posté : 13 avr. 2008, 12:37
par jpsartre
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...
Posté : 13 avr. 2008, 12:46
par Cyrano
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>
Posté : 13 avr. 2008, 13:21
par jpsartre
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.
Posté : 13 avr. 2008, 13:25
par Cyrano
Fais donc voir tes essais avec ma méthode, c'est peut-être pas grand chose qui manque pour que ça fonctionne aussi
Posté : 13 avr. 2008, 17:58
par jpsartre
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...