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

**Mitaka** · 05/01/2006, 14h22

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**siddh** · 05/01/2006, 14h32

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Mitaka** · 05/01/2006, 14h39

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.

**siddh** · 05/01/2006, 14h43

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

**Mitaka** · 05/01/2006, 14h53

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.

**siddh** · 05/01/2006, 15h01

ben regarde tes styles pour cont et clSub

**Mitaka** · 05/01/2006, 15h03

je veux juste utiliser en fait le style défini pour les liens dans clSub

**siddh** · 05/01/2006, 15h10

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 ?

**Mitaka** · 05/01/2006, 15h13

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 ...

**siddh** · 05/01/2006, 15h20

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Mitaka** · 05/01/2006, 15h26

on va encore tourner en rond

en faisant ce que tu m'as montré, aucun style n'est appliqué au menu sélectionné.

**franculo_caoulene** · 05/01/2006, 15h27

Et si tu donnais des ID à tes liens?
De plus :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Mitaka** · 05/01/2006, 15h31

Envoyé par franculo_caoulene

Et si tu donnais des ID à tes liens?
l

c'est à dire ?

**siddh** · 05/01/2006, 16h06

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#divCont .clSub  a:hover, .lienClicke {

as tu bien rajouté le , .lienClicke ?

**Mitaka** · 05/01/2006, 16h13

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

**siddh** · 05/01/2006, 16h25

remet ton code tel qu'il est maintenant stp

**Mitaka** · 05/01/2006, 16h59

partie css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**siddh** · 05/01/2006, 18h18

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#divCont .clSub  a:hover,#divCont .clSub  a.menu_select {

**Mitaka** · 06/01/2006, 09h37

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

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

JavaScript

Discussions similaires

Partager

Partager