Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2275 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Changer le ClassName d'une image avec son nom

 



 Mot :   Pseudo :  
 
 Page :   1  2
Page Précédente
Auteur Sujet :

Changer le ClassName d'une image avec son nom

n°1197984
darkkrab
Posté le 13-09-2005 à 00:49:51  profilanswer
 

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>

mood
Publicité
Posté le 13-09-2005 à 00:49:51  profilanswer
 

n°1198009
gatsusat
Posté le 13-09-2005 à 08:21:11  profilanswer
 

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";

n°1198011
masklinn
í dag viðrar vel til loftárása
Posté le 13-09-2005 à 08:34:42  profilanswer
 

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)


---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°1198013
darkkrab
Posté le 13-09-2005 à 08:36:47  profilanswer
 

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.

n°1198017
masklinn
í dag viðrar vel til loftárása
Posté le 13-09-2005 à 08:42:12  profilanswer
 

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]


---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°1198019
darkkrab
Posté le 13-09-2005 à 08:50:13  profilanswer
 

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?)

n°1198030
masklinn
í dag viðrar vel til loftárása
Posté le 13-09-2005 à 09:13:27  profilanswer
 

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

---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°1198037
gatsusat
Posté le 13-09-2005 à 09:19:50  profilanswer
 

masklinn a écrit :


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


 
 [:petrus75]

n°1198046
darkkrab
Posté le 13-09-2005 à 09:24:48  profilanswer
 

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 = ?

n°1198056
gatsusat
Posté le 13-09-2005 à 09:33:20  profilanswer
 

ben tu apprends à coder

mood
Publicité
Posté le 13-09-2005 à 09:33:20  profilanswer
 

n°1198060
darkkrab
Posté le 13-09-2005 à 09:38:34  profilanswer
 

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

n°1198067
plainsofpa​in
Pingouino's lover
Posté le 13-09-2005 à 09:41:21  profilanswer
 

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
n°1198083
darkkrab
Posté le 13-09-2005 à 09:48:49  profilanswer
 

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.

n°1198087
gatsusat
Posté le 13-09-2005 à 09:52:51  profilanswer
 

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

n°1198109
darkkrab
Posté le 13-09-2005 à 09:59:29  profilanswer
 

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

n°1198115
xtof_83
Freeride Spirit
Posté le 13-09-2005 à 10:03:06  profilanswer
 

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

n°1198125
darkkrab
Posté le 13-09-2005 à 10:08:57  profilanswer
 

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.

n°1198127
FlorentG
Unité de Masse
Posté le 13-09-2005 à 10:09:56  profilanswer
 

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.


---------------
last.fmflickr
n°1198136
masklinn
í dag viðrar vel til loftárása
Posté le 13-09-2005 à 10:14:04  profilanswer
 


[: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


---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°1198137
darkkrab
Posté le 13-09-2005 à 10:16:18  profilanswer
 

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.

n°1198145
darkkrab
Posté le 13-09-2005 à 10:20:17  profilanswer
 

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?

n°1198147
souk
Tourist
Posté le 13-09-2005 à 10:20:44  profilanswer
 

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

n°1198149
xtof_83
Freeride Spirit
Posté le 13-09-2005 à 10:21:20  profilanswer
 

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

n°1198150
gatsusat
Posté le 13-09-2005 à 10:21:58  profilanswer
 

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


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

n°1198161
masklinn
í dag viðrar vel til loftárása
Posté le 13-09-2005 à 10:27:59  profilanswer
 

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]


---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°1198188
darkkrab
Posté le 13-09-2005 à 10:37:34  profilanswer
 

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>

n°1198195
darkkrab
Posté le 13-09-2005 à 10:41:25  profilanswer
 

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

n°1198205
gm_superst​ar
Appelez-moi Super
Posté le 13-09-2005 à 10:48:26  profilanswer
 
n°1198209
gatsusat
Posté le 13-09-2005 à 10:49:33  profilanswer
 

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

n°1198212
FlorentG
Unité de Masse
Posté le 13-09-2005 à 10:50:51  profilanswer
 

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]


---------------
last.fmflickr
n°1198216
gatsusat
Posté le 13-09-2005 à 10:51:20  profilanswer
 

/me is going to do some tests

n°1198218
FlorentG
Unité de Masse
Posté le 13-09-2005 à 10:52:50  profilanswer
 

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


---------------
last.fmflickr
n°1198225
gatsusat
Posté le 13-09-2005 à 10:56:04  profilanswer
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title></title>
  5. <script>
  6. window.onload = function(){
  7. var mesA = document.getElementsByTagName("a" );
  8. alert(mesA.length);
  9. }
  10. </script>
  11. </head>
  12. <body>
  13. <a href="toto">pouet</a>
  14. <a href="toto">prout</a>
  15. </body>
  16. </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>
  7.     <script type="text/javascript">
  8.     //<![CDATA[
  9.     window.onload = function(){
  10.     var mesA = document.getElementsByTagName("a" );
  11.     alert(mesA.length);
  12.     }
  13.     //]]>
  14.     </script>
  15.   </head>
  16.   <body>
  17.     <a href="toto">pouet</a> <a href="toto">prout</a>
  18.   </body>
  19. </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
n°1198227
gatsusat
Posté le 13-09-2005 à 10:57:11  profilanswer
 

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
n°1198307
FlorentG
Unité de Masse
Posté le 13-09-2005 à 11:23:17  profilanswer
 

Ca marche quelque soit la casse du A :)


---------------
last.fmflickr
n°1198325
masklinn
í dag viðrar vel til loftárása
Posté le 13-09-2005 à 11:30:20  profilanswer
 

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)


---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°1198331
FlorentG
Unité de Masse
Posté le 13-09-2005 à 11:31:52  profilanswer
 

masklinn a écrit :

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


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


---------------
last.fmflickr
n°1198339
masklinn
í dag viðrar vel til loftárása
Posté le 13-09-2005 à 11:35:55  profilanswer
 

[:petrus dei]


---------------
I've never understood the compulsion to use Web technologies minus the Web's security and deployment models. It seems a bit like throwing the orange away and eating the peel. — @ justinschuh‬
n°1198360
xtof_83
Freeride Spirit
Posté le 13-09-2005 à 11:43:45  profilanswer
 

FlorentG a écrit :

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


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

n°1198363
FlorentG
Unité de Masse
Posté le 13-09-2005 à 11:46:07  profilanswer
 


 
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>


---------------
last.fmflickr
mood
Publicité
Posté le   profilanswer
 

 Page :   1  2
Page Précédente

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Changer le ClassName d'une image avec son nom

 

Sujets relatifs
empêcher le chargement d'une image dans le cache du navigateurEnvoyer des paramètres à une image ?
cadre et image[résolu] Changement d'image lors d'un clic
Lire un fichier image en javaChanger l'affichage d'une page lorsqu'un utilisateur se loggue
"traitement" d'image[aide] popup image javascript ?!
ACCESS insérer une image dans un formulaireChanger une page HTML après un temps donné
Plus de sujets relatifs à : Changer le ClassName d'une image avec son nom


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR