[débutante]utiliser les classes css pour surligner des liens

Version imprimable

bonjour à tous,

j'ai fait un petit script me permettant de surligner un champ sélectionné et de remmettre le champ normal une fois désélectionné.

Le problème est que je fais la mise en forme dans le javascript alors que j'ai déjà des classes existantes dans la feuilles de style.
j'aimerai utiliser directement les classes définies dans le fichier css à partir du javascript. j'ai essayé avec un className mais sans succès.

voici mon code qui vous permettra de mieux voir mon problème :

partie javascript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 var oldRow = null; function sel(obj){ /***objet non sélectionné ou désectionné*****/ if(oldRow != null) { oldRow.style.color='#7f9d63'; oldRow.style.borderStyle='none'; } /***objet sélectionné ***/ obj.style.border='1px solid #d5d0ba'; obj.style.borderRight='7px solid #d5d0ba'; obj.style.color='#4a423b'; oldRow = obj; }
partie html et php :
Code:

1 2 3 4 5 6 7 8 9 echo " <div id='divCont'> <div class='clSub'>\n"; <a href='#' onclick='sel(this)'>ligne1</a><br>\n"; <a href='#' onclick='sel(this)'>ligne2</a><br>\n"; <a href='#' onclick='sel(this)'>ligne3</a><br>\n"; </div> </div>";
partie css :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 #divCont .clSub a { color: #7f9d63; font-family:verdana,arial,helvetica,sans-serif; font-size:10px; font-weight:bold; text-decoration:none; border:1px solid white ; border-right:7px solid white; text-align:left; padding:2px; } #divCont .clSub a:hover { background-color:white; color:#4a423b; border: 1px solid #d5d0ba; border-right:7px solid #d5d0ba; }
merci d'avance

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var oldRow = null;
function sel(obj){
 
   /***objet non sélectionné ou désectionné*****/
   if(oldRow != null)
   {
      oldRow.className = 'la classe pas selectionné';
 
    }
      /***objet sélectionné ***/
      obj.className = 'la classe selectionné';
 
 
 
oldRow = obj;
}

05/01/2006, 14h39
Mitaka

c'est ce que j'ai fait en utilisant la fonction className. Le problème est qu'au final ce n'est pas la ligne qui est surlignée mais toutes dans un bloc.
05/01/2006, 14h43
siddh

hum,
que veux tu faire ?
car la tu declenche le changement de classe sur le click sur un lien et c est ce lien la auquel tu change la classe 8O
05/01/2006, 14h53
Mitaka

je veux juste utiliser des classes au lieu de mettre les propriétés css dans le fichier javascript.

Problème que je ne comprend pas, le style est appliqué sur toutes les liens c'est à dire qu'ils sont tous dans un bloc encadré alors que je veux que chaque lien est un encadrement.
05/01/2006, 15h01
siddh

ben regarde tes styles pour cont et clSub
05/01/2006, 15h03
Mitaka

je veux juste utiliser en fait le style défini pour les liens dans clSub
05/01/2006, 15h10
siddh

je comprend pas !!!
t as pas besoin de javascript puisque c est un style :hover sur le lien qui se fera au survol.

a quoi te sert ton onclick alors ?
05/01/2006, 15h13
Mitaka

le onclick me sert à mettre en surbrillance la ligne sélectionnée. en fait il s'agit d'un menu et c'est pour repérer l'utilisateur. je désire appliquer le meme style pour le lien cliqué et le lien en hover ...

Code:

1
2
3
4
5
6
#divCont .clSub  a:hover, .lienClicke {
  background-color:white;
  color:#4a423b;
  border: 1px solid #d5d0ba;
  border-right:7px solid #d5d0ba;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var oldRow = null;
function sel(obj){
 
   /***objet non sélectionné ou désectionné*****/
   if(oldRow != null)
   {
      oldRow.className = '';
 
    }
      /***objet sélectionné ***/
      obj.className = 'lienClicke';
 
 
 
oldRow = obj;
}

05/01/2006, 15h26
Mitaka

on va encore tourner en rond :roll:
en faisant ce que tu m'as montré, aucun style n'est appliqué au menu sélectionné.
05/01/2006, 15h27
franculo_caoulene
Et si tu donnais des ID à tes liens?
De plus :
Code:

1 2 <div id='divCont'> <div class='clSub'>\n";
C'est un non sens.
Utilise les listes pour ton menu : http://bb.public.free.fr/css/menu.html
05/01/2006, 15h31
Mitaka

Citation:

Envoyé par franculo_caoulene

Et si tu donnais des ID à tes liens?
l

c'est à dire ?
05/01/2006, 16h06
siddh

Code:

#divCont .clSub a:hover, .lienClicke {

as tu bien rajouté le , .lienClicke ?
05/01/2006, 16h13
Mitaka

oui

de plus j'ai un autre problème : en utilisant le code décrit au début du sujet, une fois les liens sélectionnés le hover ne marche plus :cry:
05/01/2006, 16h25
siddh

remet ton code tel qu'il est maintenant stp

partie css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#divCont .clSub  a , .menu_unselect {
  color: #7f9d63;
  font-family:verdana,arial,helvetica,sans-serif;
  font-size:10px;
  font-weight:bold;
  text-decoration:none;
  border:1px solid white ;
  border-right:7px solid white;
  text-align:left;
  padding:2px;
}
 
 
 #divCont .clSub  a:hover, .menu_select {
  background-color:white;
  color:#4a423b;
  border: 1px solid #d5d0ba;
  border-right:7px solid #d5d0ba;
}

partie javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
var oldRow = null;
function sel_ss_menu(objet){
 
   /***objet non sélectionné ou désectionné*****/
   if(oldRow != null)
   {
      oldRow.className='menu_unselect';
    }
      /***objet sélectionné ***/
      objet.className='menu_select';
 
oldRow = objet;
}

partie php :

Code:

1
2
3
4
5
6
7
8
echo" 
<div id='divCont'>
      <div class='clSub'>\n
         <a href='#' onclick=\"sel_ss_menu(this)\">ligne1</a><br>\n"
         <a href='#' onclick=\"sel_ss_menu(this)\">ligne2</a><br>\n"
         <a href='#' onclick=\"sel_ss_menu(this)\">ligne3</a><br>\n"
     </div>
</div>";

05/01/2006, 18h18
siddh

Code:

#divCont .clSub a:hover,#divCont .clSub a.menu_select {
06/01/2006, 09h37
Mitaka

ça marche nickel !!! merci beaucoup !!!!