changer la couleur des liens

Version imprimable

20/09/2005, 17h16
MANU_2

changer la couleur des liens

Code:

<A HREF="<?=$tab_menu[$i][1]?>" class="menug2" id="<?php echo $i; ?>" onfocus="document.GetElementById('1').style.color='#C90000;'"> <?=$tab_menu[$i][0]?></a>

Je voudrais que lorsqu'on clique sur le lien ça change de couleur mais si on clique sur un autre, ce lien récupère sa couleur d'avant.
Je pense que je doit utilisé les évènement onfocus (ou onclick) et onblur.
Mais mon code JS doit être faux.

Pouvez m'aider.

Merci
20/09/2005, 17h18
KiLVaiDeN

Fait plutot un this.style.Color='#HEBABE' sur l'évènement onClick, mais tu va surement avoir un conflit avec le css..
20/09/2005, 17h31
MANU_2

ça marche pas, je dois surement avoir un conflit avec la feuille CSS.
Et comment régler ce problème de conflit ?
20/09/2005, 17h37
SpaceFrog

vire le class ...
20/09/2005, 17h47
MANU_2

J'ai viré le class et là c'est la catastrophe : ça ne marche pas (le onclick) et en plus je perd tout mon style.

Pour m'amuser, j'ai codé ton truc, dans l'évènement onLoad j'ai mit le lien à activer par défaut ( si tu changes de page, ce qui risque d'arriver ).

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<html>
<head>
<script language="JavaScript">
  var lastLinkId = "";
 
  function ChangeLinkColor(aLinkId) {
    if(lastLinkId != "") document.getElementById(lastLinkId).style.color="#FF0000";
    document.getElementById(aLinkId).style.color="#0000FF";
    lastLinkId = aLinkId;    
  }  
</script>
</head>
<body onLoad="ChangeLinkColor('lien3')">
<a id="lien1" href="#" style="color:#ff0000" onClick="ChangeLinkColor(this.id);">Un lien</a>
<a id="lien2" href="#" style="color:#ff0000" onClick="ChangeLinkColor(this.id);">Un lien</a>
<a id="lien3" href="#" style="color:#ff0000" onClick="ChangeLinkColor(this.id);">Un lien</a>
<a id="lien4" href="#" style="color:#ff0000" onClick="ChangeLinkColor(this.id);">Un lien</a>
</body>
</html>

20/09/2005, 18h00
MANU_2

Merci, je testerais demain.

Sinon, j'ai un alert(this.style.Color); dans le onclick et on m'affiche "undefined".
20/09/2005, 18h10
SpaceFrog

LOL Kilv
passer this.id en paramètre pour faire un document.getElementById

autant passer this tout court
20/09/2005, 18h22
KiLVaiDeN

Et tu ferais comment si c'est un autre élément qui change la couleur du lien ?
Et pour le body onLoad ?
20/09/2005, 18h26
KiLVaiDeN

En fait je voulais passer uniquement 'lien3' tout simplement dans le onLoad mais j'ai rajouté du code inutile ( document.getElementById('lien3').id == 'lien3' ) :wink:

J'ai changé le code pour que ce soit plus évident :twisted:

J'ai un peu simplifié le code et ça marche, merci

Code:

1
2
3
4
5
6
<script language="JavaScript">
  function ChangeLinkColor(aLinkId) 
  {	
    document.getElementById(aLinkId-1).style.color="#C90000";
  } 
</script>

21/09/2005, 12h18
KiLVaiDeN

8O

Tu vas forcément avoir une erreur avec ton script, car le -1 ne marchera pas pour le premier id, de plus avec ta technique il faudrait que tes id soient des chiffres uniquement, donc attention !
21/09/2005, 12h25
MANU_2

Oui mes idées sont que des chiffres et ça pose quel problème ?

Sinon aLinkId a une valeur minimum de 1 donc pas de -1.
21/09/2005, 12h32
SpaceFrog

je sais plus ou j'ai lu qu'il fallait éviter des id numériques ...
et je ne sais plus non plus pourquoi ...
21/09/2005, 12h34
KiLVaiDeN

Je suppose qu'un des problèmes lié aux id numériques est qu'un opérateur "+" peut être interpreté comme une addition, alors que ce n'est pas forcément le comportement voulu 8O
21/09/2005, 12h37
SpaceFrog

y'a toujours l'astuce de multiplier par 1 pour obtenir du numérique et de faire un .concat pour une chaine ...
21/09/2005, 12h42
KiLVaiDeN

Oui c'est vrai, mais ça peut impliquer une modification plus ou moins couteuse de scripts déjà existants et une certaine lourdeur ( un concat est plus lourd qu'un '+' ), mais sinon je ne vois pas trop en quoi l'id pourrait poser un problème en étant numérique, hmm peut-être que certains id internes sont déjà en numérique ?
21/09/2005, 12h45
MANU_2

Oui mais dans mon cas, pas de pb
21/09/2005, 12h46
SpaceFrog

je sais pas kil, peut être aussi un problème de validité w3c ?
21/09/2005, 12h51
KiLVaiDeN

Pour le savoir je pense qu'il faudrait comprendre le fonctionnement en interne de l'attribution des id aux différents éléments d'une page, d'ailleurs à ce propos ( je le dis bien que ce soit hors sujet par rapport au thème principal de ce post ) j'ai découvert que dans firefox, il y a une fonction qui permet de voir la structure arborescente de la page, Menu Tools, Dom Inspector, raccourci clavier "CTRL+SHIFT+I" !

Assez interessant comme découverte :wink:

Pour s'assurer d'avoir une valeure numérique, on peut utiliser: Number()

Code:

1
2
3
4
5
6
7
8
 
     var sNumber01 = '1';
     var sNumber02 = '2';
 
     var sResult = sNumber01 + sNumber02;
     var iResult = Number(sNumber01) + Number(sNumber02);
 
     alert('Concaténation: ' + sResult + '\nAddition: ' + iResult );

- Capt!