Discussion :

[tedparker]

Bonjour,

voici une partie de mon code.

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<td width='170px' valign='top'>
        <div class='menu_top'><img src="images/puce_menu.gif">&nbsp;&nbsp;<a class='menu' href='index.php'>Insérer un corpus</a></div>
        <hr>
        <div class='menu'><img src="images/puce_menu.gif">&nbsp;&nbsp;<a class='menu' href='vectoriseDoc.php'>Vectoriser un document</a></div>
        <hr>
        <div class='menu'><img src="images/puce_menu.gif">&nbsp;&nbsp;<a class='menu' href='displayLexicon.php'>Afficher un lexique</a></div>
        <hr>
        <div class='menu'><img src="images/puce_menu.gif">&nbsp;&nbsp;<a class='menu' href='displayDocument.php'>Afficher un vecteur</a></div>
        <hr>
        <div class='menu'><img src="images/puce_menu.gif">&nbsp;&nbsp;<a class='menu' href='searchDocument.php'>Rechercher un document</a></div>
        <hr>
    </td>

Donc ca représente ma barre de menus sur la gauche de l'écran avec les liens vers les pages du site.
J'aimerais indiquer à l'utilisateur sur quelle page il se trouve en changeant l'apparence du lien sur lequel il a cliqué pour accéder à la page (un changement de couleur par exemple).

Comment dois-je m'y prendre svp ?

Merci

[Kerod]

Tu dois utiliser les pseudo-classes de la balise <a>

Pour t'aider voilà de quoi te guider

Comment changer la couleur d'un lien lors d'un évènement ?

[tedparker]

J'ai rajouté le ptit bout de code CSS dans mon main.css mais rien ne change. C'est à cause de la classe que jdéfinis pour la balise <a> ?
Dois-je redéfinir le style pour cette balise comme indiqué dans le tuto et si oui comment svp ??
Merci

[Kerod]

peux-tu mettre la définition de ton css, stp ?

[tedparker]

Code css :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
/* propriétés pour la balise a */
a {
  color : #0000FF;
  text-decoration : none;
}
 
/* :active permet de définir les propriétés d'un lien actif - qui vient d'être cliqué */
a:active {
  color : #0022FF;
  text-decoration : none;
}
 
/* :focus permet de définir les propriétés des liens lorque l'on passe d'un lien à un autre
avec la touche [TAB] */
a:focus {
  color : #0000FF;
  text-decoration : none;
  background-color : #CCCCCC;
}
 
/* :hover permet de définir les propriétés du lien au survol de celui-ci */
a:hover {
  color : #FF0000;
  text-decoration : underline;
}
 
/* :link permet de définir les propriétés des liens */
a:link {
  color : #0000FF;
  text-decoration : none;
}
 
/* :visited permet de définir les propriétés des liens déjà visités */
a:visited {
  color : #0000FF;
  text-decoration : none;
}
 
div.menu{color:#191970;font-family:verdana, arial, serif;font-size:11px;font-weight:bold;padding-left:10px;margin:5px;margin-bottom:15px;margin-top:15px;}
 
div.menu_top{color:#191970;font-family:verdana, arial, serif;font-size:11px;font-weight:bold;
padding-left:10px;margin:5px;margin-bottom:15px;margin-top:70px;}
 
div.middle_content{color:#191970;font-family:verdana, arial, serif;font-size:11px;font-weight:bold;padding-right:35px;margin:5px;padding-left:20px;text-align:justify;margin-top:70px;}
 
a.menu {color:#191970;text-decoration:none;}
 
td.listCorpus{color:#191970;font-family:verdana, arial, serif;font-size:11px;padding-left:10px; padding-top:20px}
 
select.menuDeroulant{color:#191970;font-family:verdana, arial, serif;font-size:11px;margin-top:5px; margin-left:40px;}
select.menuDeroulant2{color:#191970;font-family:verdana, arial, serif;font-size:11px;margin-top:2px;}
 
input.validButton{color:#191970;font-family:verdana, arial, serif;font-size:11px; margin-top:5px;margin-left:40px;}
input.recupName{color:#191970;font-family:verdana, arial, serif;font-size:11px;margin-left:5px;}
 
input.radioButton{color:#191970;font-family:verdana, arial, serif;font-size:11px;margin-left:40px; margin-top:20px}
input.radioButton2{color:#191970;font-family:verdana, arial, serif;font-size:11px;margin-left:40px;}
input.radioButton3{color:#191970;font-family:verdana, arial, serif;font-size:11px;}
input.submitButton{color:#191970;font-family:verdana, arial, serif;font-size:11px; margin-top:20px}
 
 
td.listVecteur{color:#191970;font-family:verdana, arial, serif;font-size:13px;padding-right:10px;padding-left:10px; padding-top:5px;padding-top:5px;}

[Kerod]

Dernière question : C'est au clic ou après le clic ? Les pages sont différentes ? Ce que j'entends par là c'est est ce que le menu est rechargé ?

[tedparker]

C'est après le clic.

En fait, je veux distinguer le quel des liens j'ai cliqué en dernier (changement de couleur ou autre distinction particulière)

Merci

[Kerod]

Si c'est ce que je pense, je te propose de le faire en php. Tu testes ta page ou un id et tu attribues à ton lien un style spécifique. Je vais te donner un exemple de code qui utilise des id (passage par $_GET)

Code :

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

1
2
3
<a class="<? echo ($id == 5)?'current_page_item_last':'last_menu'; ?>" href="/?id=5" title="<?php echo $MAIL_TITLE; ?>">
              <?php echo $MAIL; ?>
          </a>

On teste l'id passé en paramètre et on attribue la classe qu'il faut. Dans ton cas tu peux le faire juste sur le nom des fichiers avec la fonction décrite ici : Comment extraire le nom de fichier d'un chemin ?

En CSS pur tu pourras faire uniquement quand tu as déjà visité une page ou éventuellement utiliser le :active mais c'est pas sûr que cela fonctionne (car rechargement de la page)

[tedparker]

EUh ouais bon j'ai essayé mais j'ai jamais fait de PHP non plus dc c'est chaud ....

[Kerod]

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php $path_parts = pathinfo($_SERVER['PHP_SELF']); ?>
<td width='170px' valign='top'>
        <div class='menu_top'><img src="images/puce_menu.gif">&nbsp;&nbsp;<a class='<?php echo ($path_parts['basename'] != 'index.php')?"menu":"menu_actif"; ?>' href='index.php'>Insérer un corpus</a></div>
        <hr>
        <div class='menu'><img src="images/puce_menu.gif">&nbsp;&nbsp;<a class='menu' href='vectoriseDoc.php'>Vectoriser un document</a></div>
        <hr>
        <div class='menu'><img src="images/puce_menu.gif">&nbsp;&nbsp;<a class='menu' href='displayLexicon.php'>Afficher un lexique</a></div>
        <hr>
        <div class='menu'><img src="images/puce_menu.gif">&nbsp;&nbsp;<a class='menu' href='displayDocument.php'>Afficher un vecteur</a></div>
        <hr>
        <div class='menu'><img src="images/puce_menu.gif">&nbsp;&nbsp;<a class='menu' href='searchDocument.php'>Rechercher un document</a></div>
        <hr>
    </td>

Tu pourrais faire ceci en te basant sur le nom du fichier actif. Ca devrait fonctionne que pour le index.php

A savoir qu'il faut créer la class menu_actif