Changer le ClassName d'une image avec son nom

Changer le ClassName d'une image avec son nom - HTML/CSS - Programmation

Marsh Posté le 13-09-2005 à 00:49:51    

Ce code change le ClassName de tous images avec pour nom "lui", mais il ne fonctionne pas sous Netscape/Mozilla, quelqu'un a une idée pour que ça fonctionne.

Code :
  1. <style>
  2. .bbo {border-color:green;}
  3. </style>
  4. <a href="a"><img class="bbo" src="red.gif" ></a>
  5. <a href="a"><img name="lui" class="bbo" src="red.gif"></a>
  6. <a href="a"><img name="lui" class="" src="red.gif" ></a>
  7. <a href="a"><img name="lui" class="" src="red.gif" ></a>
  8. <a href="a"><img name="lui" class="" src="red.gif" ></a>
  9. <a href="a"><img class="" src="red.gif" ></a>
  10. <script> 
  11. function imgbor(){
  12.     var agg = document.images('lui'); 
  13.     for(var i=agg.length-1; i>=0; --i) 
  14.         if(agg[i].className.indexOf('') != -1) {
  15.             agg[i].className = 'bbo';
  16.                 } 
  17. }
  18. </script>
  19. <a href="javascript:imgbor()">Test</a>

Reply

Marsh Posté le 13-09-2005 à 00:49:51   

Reply

Marsh Posté le 13-09-2005 à 08:21:11    

déjà c'est pas name qu'on utilise mais ID
 
et ensuite en code ca donne ca :  
 
var monimage = document.getElementById("lui" );
monimage.className = "Toto";

Reply

Marsh Posté le 13-09-2005 à 08:34:42    

darkkrab a écrit :

Ce code change le ClassName de tous images avec pour nom "lui", mais il ne fonctionne pas sous Netscape/Mozilla, quelqu'un a une idée pour que ça fonctionne.

Code :
  1. <style>
  2. .bbo {border-color:green;}
  3. </style>
  4. <a href="a"><img class="bbo" src="red.gif" ></a>
  5. <a href="a"><img name="lui" class="bbo" src="red.gif"></a>
  6. <a href="a"><img name="lui" class="" src="red.gif" ></a>
  7. <a href="a"><img name="lui" class="" src="red.gif" ></a>
  8. <a href="a"><img name="lui" class="" src="red.gif" ></a>
  9. <a href="a"><img class="" src="red.gif" ></a>
  10. <script> 
  11. function imgbor(){
  12.     var agg = document.images('lui'); 
  13.     for(var i=agg.length-1; i>=0; --i) 
  14.         if(agg[i].className.indexOf('') != -1) {
  15.             agg[i].className = 'bbo';
  16.                 } 
  17. }
  18. </script>
  19. <a href="javascript:imgbor()">Test</a>



  • Name a été déprécié sur tous les éléments ne faisant pas partie d'un formulaire, il ne doit plus être utilisé en dehors de cette situation.
  • Son remplaçant est "id", mais un id doit être unique sur une page, deux éléments ne peuvent pas avoir le même id
  • J'ai du mal à voir l'intérêt du test de classe vide
  • Utiliser l'aggrégation (elm.className+=" myClass" ) plutôt que l'écrasement, afin de conserver les classes existantes (un élément donné peut avoir un nombre illimité de classes)
  • Utiliser indexOf pour déterminer la présence ou non d'une classe donnée, et replace() pour les transferts d'une classe à l'autre
  • Utiliser les notions d'ascendants/descendants du DOM pour faire ses sélections (par exemple si on a une liste de liens que l'on veut modifier, on peut commencer par sélectionner la liste globale et itérer sur ses enfants au lieu de sélectionner directement les enfants, ça fait moins de code plus stable)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 13-09-2005 à 08:36:47    

On peut utiliser NAME ou ID pour une image. Et je ne peux pas simplement utilsier monimage.className = "Toto";, parce que je ne sais pas combien j'ai d'images ayant l'ID ou le NAME (La page est généré en php). Il me faux donc absolument un script qui change tout les images qui ont le même ID/NAME pour que ça fonctionne.

Reply

Marsh Posté le 13-09-2005 à 08:42:12    

darkkrab a écrit :

On peut utiliser NAME [...] pour une image.


Il faut éviter, le HTML 4.01 "name" n'est présent que pour des raisons de compatibilité

Citation :

On peut utiliser ID pour une image.


Il est interdit d'avoir deux éléments avec le même id dans une page, toutes les images doivent donc avoir leur propre ID

Citation :

Et je ne peux pas simplement utilsier monimage.className = "Toto";, parce que je ne sais pas combien j'ai d'images ayant l'ID ou le NAME (La page est généré en php).
 Il me faux donc absolument un script qui change tout les images qui ont le même ID/NAME pour que ça fonctionne.


Tu donnes des classes à tes images et tu sélectionnes uniquement les images ayant la classe recherchée pour faire tes traitements [:itm]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 13-09-2005 à 08:50:13    

J'ai déjà utiliser le même id pour plusieurs éléments, avec une boucle c'est OK. Comment faire "Tu donnes des classes à tes images et tu sélectionnes uniquement les images ayant la classe recherchée pour faire tes traitements"? (Comment appeler une image?)

Reply

Marsh Posté le 13-09-2005 à 09:13:27    

darkkrab a écrit :

J'ai déjà utiliser le même id pour plusieurs éléments, avec une boucle c'est OK.


Non, c'est pas ok, c'est illégal d'après la spec et ça donne un comportement indéfini, avec des conneries pareilles faut pas t'étonner si tu te retrouves avec des bugs plein ton code [:enzan]  
 

Citation :

Comment faire "Tu donnes des classes à tes images et tu sélectionnes uniquement les images ayant la classe recherchée pour faire tes traitements"? (Comment appeler une image?)


[:pingouino]
 

<img class="latumetstaclasseboulet"/>


var tesimagesdeboulet = document.getElementsByTagName('IMG');
for(var i=0; i<tesimagesdeboulet.length; ++i)
    if(tesimagesdeboulet[i].className.indexOf("latumetstaclasseboulet" ) != -1) {
        // Image avec la classe qui va bien
    }


Message édité par masklinn le 13-09-2005 à 10:12:01

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 13-09-2005 à 09:19:50    

masklinn a écrit :


var tesimagesdeboulet = document.getElementsByTagName('IMG');


 
 [:petrus75]

Reply

Marsh Posté le 13-09-2005 à 09:24:48    

Les images n'ont pas tous un ClassName au chargement de la page. C’est pourquoi je doit utiliser un ID commun.
 
Et je ne peux pas utiliser ceci, ça modifie tout les images

Code :
  1. <script> 
  2. function imgbor(){
  3. var agg = document.getElementsByTagName('img');
  4. for(var i=0; i<agg.length; ++i)
  5.     if(agg[i].className.indexOf("" ) != -1) {
  6.             agg[i].className = 'bbo';
  7.     }
  8. }
  9. </script>


 
La question est:
var agg = ?

Reply

Marsh Posté le 13-09-2005 à 09:33:20    

ben tu apprends à coder

Reply

Marsh Posté le 13-09-2005 à 09:33:20   

Reply

Marsh Posté le 13-09-2005 à 09:38:34    

Elle est bonne. :-)
Sérieux personne ne connaît un truc.

Reply

Marsh Posté le 13-09-2005 à 09:41:21    

tu donnes la meme classe à toutes tes images [:petrus75]


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 13-09-2005 à 09:48:49    

Exemple: au début tout images sont vertes sauf une qui est jaune, l'utilisateur clique sur un bouton et la moitier des images vertes deviennent bleus. Et je voudrais qu’avec un autre bouton touts les images redeviennent vertes sauf la jaune qui reste jaune.
 
Il me faux vraiment un ID commun pour rassembler tous les images qui sont vertes.

Reply

Marsh Posté le 13-09-2005 à 09:52:51    

on t'a déjà dis qu'un ID c'est unique dans une page puisque la commande getElementById ne renvoi qu'un seul objet au lieu d'un tableau de références

Reply

Marsh Posté le 13-09-2005 à 09:59:29    

Je sais (je ne débatterai pas), mais comment regrouper un goupe d'images?

Reply

Marsh Posté le 13-09-2005 à 10:03:06    

ben tu essais de petites combine, fais marcher ton cerveau..
 
tu nommes tes id comme cela : image1, image2....
les images de 0 à x sont premier groupe...etc
 
Faut un peu réfléchir man

Reply

Marsh Posté le 13-09-2005 à 10:08:57    

J'y avait pensé mais je ne sais pas d'avance le nombre d'images que je vais avoir de chaque couleur au chargement de la page. Et je me demandais surtout s'il n'y avait pas une autre syntaxe pour ma variable 'agg' pour que ce sois compatible avec les autres navigateurs.

Reply

Marsh Posté le 13-09-2005 à 10:09:56    

darkkrab a écrit :

Exemple: au début tout images sont vertes sauf une qui est jaune, l'utilisateur clique sur un bouton et la moitier des images vertes deviennent bleus. Et je voudrais qu’avec un autre bouton touts les images redeviennent vertes sauf la jaune qui reste jaune.
 
Il me faux vraiment un ID commun pour rassembler tous les images qui sont vertes.


Tout ça se fait avec des classes... L'attribut class permet justement de donner un certain sens à des éléments, afin par exemple de leur donner un style, ou de leur donner un certain comportement via JS, etc.

Reply

Marsh Posté le 13-09-2005 à 10:14:04    

gatsusat a écrit :

[:petrus75]


[:mlc]
 
Ptin j'en ai marre [:sisicaivrai]
Même le matin chuis pas réveillé [:sisicaivrai]

darkkrab a écrit :

Les images n'ont pas tous un ClassName au chargement de la page.


T'as qu'à en mettre une [:mlc]

Citation :

C’est pourquoi je doit utiliser un ID commun.


C'est
in
ter
dit
 
interdit
pas autorisé
pas droit
mal
bouh
berk
 
DEUX ELEMENTS D'UNE MÊME PAGE NE PEUVENT PAS PORTER LE MÊME ID


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 13-09-2005 à 10:16:18    

Dans l'exemple vert égale pas de class. Mais le problème c'est qu'il y a d'autres images sans class. Je sais qu'il y a quand même un moyen, mais le vrai problème va survenir quand tous les images vont se voir octroyer la même class, il n'y aura plus moyen de les différencier.

Reply

Marsh Posté le 13-09-2005 à 10:20:17    

J'ai une question pour masklinn.
 
Je sais que tu a raison pour les ID, mais je cherche un moyen. Et au fait il est ou le problème avec NAME?

Reply

Marsh Posté le 13-09-2005 à 10:20:44    

tu peux leur attribuer plusieurs classes hein si tu veux [:petrus75]

Reply

Marsh Posté le 13-09-2005 à 10:21:20    

Moi je dis ton affaire est mal ficelé, bosse un peu plus et trouve quelque chose de plus concordant...

Reply

Marsh Posté le 13-09-2005 à 10:21:58    

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <style>
  7. .verte {
  8.  background:green;
  9. }
  10. .jaune{
  11.  background:yellow;
  12. }
  13. .bleue{
  14.  background:blue;
  15. }
  17. </style>
  18. <script>
  19. function QQBleus() {
  20.  var MesImages = document.getElementById("mesimages" ).getElementsByTagName("IMG" );
  21.  for (var i=0; i<MesImages.length-1;i++){
  22.   if (MesImages[i].getAttribute("bleu","false" )=="possible" )
  23.    MesImages[i].className = "bleue";
  24.  }
  26. }
  27. function TousVerts() {
  28.  var MesImages = document.getElementById("mesimages" ).getElementsByTagName("IMG" );
  29.  for (var i=0; i<MesImages.length-1;i++){
  30.   if (MesImages[i].className.toLowerCase().indexOf("jaune" )==-1)
  31.    MesImages[i].className = "verte";
  32.  }
  34. }
  38. </script>
  39. </head>
  41. <body>
  42. <div id="mesimages">
  43. <a href="a"><img class="verte" src="red.gif" ></a> 
  44. <a href="a"><img name="lui" class="verte" src="red.gif" bleu="possible"></a>
  45. <a href="a"><img name="lui" class="verte" src="red.gif" bleu="possible"></a>
  46. <a href="a"><img name="lui" class="verte" src="red.gif" bleu="possible"></a> 
  47. <a href="a"><img name="lui" class="verte" src="red.gif" ></a> 
  48. <a href="a"><img class="jaune" src="red.gif" ></a> 
  49. </div>
  50. <form>
  51. <input type="button" value="Quelques Bleus" onclick="QQBleus()">
  52. <input type="button" value="Tous Vert" onclick="TousVerts()">
  54. </form>
  55. </body>
  56. </html>


 
c'est pas parfait hein ! mais c'est juste pour montrer au monsieur ce qu'on peut faire de nos jours

Reply

Marsh Posté le 13-09-2005 à 10:27:59    

darkkrab a écrit :

J'ai une question pour masklinn.
 
Je sais que tu a raison pour les ID, mais je cherche un moyen. Et au fait il est ou le problème avec NAME?


Parce que "name" a été déprécié sur les images ça veut dire qu'on est plus censés l'utiliser [:spamafote]  
 
Je vois pas trop ce que t'as contre les classes [:petrus75]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 13-09-2005 à 10:37:34    

La dernière image ne change pas.
 

Code :
  1. <style>
  2. .bbo {border-color:green;}
  3. </style>
  4. <a href="a"><img class="bbo" src="red.gif" ></a>
  5. <a href="a"><img class="bbo" src="red.gif" bleu="possible"></a>
  6. <a href="a"><img class="" src="red.gif" bleu="possible"></a>
  7. <a href="a"><img class="" src="red.gif" bleu="possible"></a>
  8. <a href="a"><img class="" src="red.gif"></a>
  9. <a href="a"><img class="" src="red.gif" bleu="possible"></a>
  10. <script> 
  11.    function imgbor() {
  12.         var agg = document.getElementsByTagName("img" );
  13.         for (var i=0; i<agg.length-1;i++){
  14.             if (agg[i].getAttribute("bleu","false" )=="possible" )
  15.                 agg[i].className = "bbo";
  16.         }
  17. }
  18. </script>
  19. <a href="javascript:imgbor()">Test</a>

Reply

Marsh Posté le 13-09-2005 à 10:41:25    

Mon acienne boucle fontionne.
Merci Gatsusat pour le getAttribute.
 
Et j'ai rien contre les classes.

Reply

Marsh Posté le 13-09-2005 à 10:48:26    

Reply

Marsh Posté le 13-09-2005 à 10:49:33    

var agg = document.getElementsByTagName("img" ); <=== c'est pas en MAJUSCULE que IMG doit etre ?  
 
je crois car sinon ca foire tout

Reply

Marsh Posté le 13-09-2005 à 10:50:51    

gatsusat a écrit :

var agg = document.getElementsByTagName("img" ); <=== c'est pas en MAJUSCULE que IMG doit etre ?  
 
je crois car sinon ca foire tout


Ca dépend si t'es en HTML ou en XHTML, non ? [:johneh]

Reply

Marsh Posté le 13-09-2005 à 10:51:20    

/me is going to do some tests

Reply

Marsh Posté le 13-09-2005 à 10:52:50    

Oublie pas avec des pages XHTML d'utiliser les deux types MIME possibles

Reply

Marsh Posté le 13-09-2005 à 10:56:04    

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <script>
  7. window.onload = function(){
  8. var mesA = document.getElementsByTagName("a" );
  9. alert(mesA.length);
  10. }
  11. </script>
  12. </head>
  14. <body>
  16. <a href="toto">pouet</a>
  17. <a href="toto">prout</a>
  19. </body>
  20. </html>


avec ce code HTML
sous IE
a minuscule : Ca marche
A majuscule : ca marche
sous FF
a minuscule : Ca marche
A majuscule : ca marche
 
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.   <head>
  5.     <title>
  6.     </title>
  8.     <script type="text/javascript">
  9.     //<![CDATA[
  10.     window.onload = function(){
  11.     var mesA = document.getElementsByTagName("a" );
  12.     alert(mesA.length);
  13.     }
  14.     //]]>
  15.     </script>
  16.   </head>
  17.   <body>
  18.     <a href="toto">pouet</a> <a href="toto">prout</a>
  19.   </body>
  20. </html>


avec ce code en XHTML
sous IE
a minuscule : Ca marche
A majuscule : ca marche
sous FF
a minuscule : Ca marche
A majuscule : ca marche


Message édité par gatsusat le 13-09-2005 à 10:56:46
Reply

Marsh Posté le 13-09-2005 à 10:57:11    

FlorentG a écrit :

Oublie pas avec des pages XHTML d'utiliser les deux types MIME possibles


types Mime ??? hu ??
 
can you explain more for me please Mister FlorentG
 
edit: c'est bon j'ai pigé : type text/html ou type text/xml, tu peux faire le test pour moi, sur les deux types mimes ??? je suis au taf et j'ai po d'apache ni php sous la main
 
ma fonction renvoi 2 si c'est bon et 0 si c'est faut (avec un alert bourrin)


Message édité par gatsusat le 13-09-2005 à 10:59:16
Reply

Marsh Posté le 13-09-2005 à 11:23:17    

Ca marche quelque soit la casse du A :)

Reply

Marsh Posté le 13-09-2005 à 11:30:20    

FlorentG a écrit :

Ca dépend si t'es en HTML ou en XHTML, non ? [:johneh]


en application/xhtml+xml c'est impérativement en minuscules, en text/html il est plus prudent de le mettre en majuscules (IE, entre autres, a parfois des comportements bizarres)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 13-09-2005 à 11:31:52    

masklinn a écrit :

en application/xhtml+xml c'est impérativement en minuscules


Alors ce con de FireFox fait n'importe quoi [:johneh]

Reply

Marsh Posté le 13-09-2005 à 11:35:55    

[:petrus dei]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 13-09-2005 à 11:43:45    

FlorentG a écrit :

Alors ce con de FireFox fait n'importe quoi [:johneh]


 
 
 :(  :non: Euh là tu sort... :hello:

Reply

Marsh Posté le 13-09-2005 à 11:46:07    

masklinn a écrit :

[:petrus dei]


 
Ca fonctionne bien :  [:johneh]  [:johneh]  
 

<?php
  header('Content-Type: application/xhtml+xml; charset=utf-8');
 ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
      <script type="text/javascript">
     //<![CDATA[
     window.onload = function(){
     var mesA = document.getElementsByTagName("A" );
     alert(mesA.length);
     }
     //]]>
     </script>
   </head>
   <body>
     <a href="toto">pouet</a> <a href="toto">prout</a>
   </body>
</html>

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed