faire ressortir le liens de la page en cours dans un menu

Invité · 24/12/2008, 11h19

Bonjour tout le monde

on me demande de faire ressortir le lien de la page en cours dans un menu.

j'ai d'abord pensé le faire en css mais me suis aperçu que cela n'est pas possible.

les liens de pages sont indiqués dans une balise <a><img src= alt= ></a>
les caractéristiques des balises a et des images sont définis dans une feuilles css. les images apparaissent normalement sans bordure. et les liens ne sont pas soulignés. lorsque la souris passe sur un lien son image apparaît avec une bordure jaune.

ce que je souhaite c'est que quand une page est en cours, l'image correspondant à son lien apparaisse avec une bordure d'une couleur.

je pense que cela se fait en java script mais n'ai pas trouvé d'exemple.

Merci de toute indication
paul

**SpaceFrog** · 24/12/2008, 12h13

ben avec css et les pseudo classes .. non

a img :active ??

**Bovino** · 24/12/2008, 12h19

Non Spaffy, la pseudo-classe :active correspond au moment où le lien est acivé, c'est-à-dire quand on clique dessus.
Pour avoir un style précis quand le lien correspond à la page actuelle, le meilleur moyen est de lui attribuer une classe CSS spécifique.

**Auteur** · 24/12/2008, 13h18

bonjour,

essaye comme ceci :

Code xhtml :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
 
<script type="text/javascript">
<!-- 
function styleMenu()
{
        var i, n;
        var urlPage, c, liens, images;
        var exp;
        
        urlPage = document.location.href.toLowerCase(); // url de la page en cours
        exp = new RegExp(urlPage, "gi"); // expression régulière
        
        c = document.getElementById("conteneurMenu"); 
        liens = c.getElementsByTagName("a"); // recherche de tous les liens dans le conteneur
        
        n = liens.length;
        for (i=0; i<n; i++)
        {
                image = liens[i].getElementsByTagName("img"); // on prend toutes  les images contenues dans un lien (balise a)
                
                if (liens[i].href.match(exp)) // si le href d'une balise a correspond à l'url de la page
                {
                        image[0].style.border = "solid yellow 2px"; // on modifie la bordure de l'image
                }
                else
                {
                        image[0].style.border = "none"; // sinon on supprime la bordure
                }
        }
        
}
 
 
 
//-->
</script>
 
</head>
 
<body onload="styleMenu()">
 
<div id="conteneurMenu">
	<a href="lien1.htm"><img src="image1.jpg" style="border: none" alt="image1.jpg" /></a><br/>
	<a href="lien2.htm"><img src="image2.jpg" style="border: none" alt="image2.jpg" /></a><br/>
	<a href="lien3.htm"><img src="image3.jpg" style="border: none" alt="image3.jpg" /></a><br/>
	<a href="lien4.htm"><img src="image4.jpg" style="border: none" alt="image4.jpg" /></a><br/>
	<a href="lien5.htm"><img src="image5.jpg" style="border: none" alt="image5.jpg" /></a><br/>
</div>	
 
 
</body>
</html>

**SpaceFrog** · 24/12/2008, 13h30

c'est pas plus direct de le faire en php ...
comme dit Beef une class ...

Invité · 24/12/2008, 22h33

Merci "auteur"

je vais essayer avec votre méthode
et je vous tiens au courant
à suivre
paul

Invité · 24/12/2008, 22h48

Merci beaucoup beaucoup camarade Auteur
il semble que cela marche sur le premier essai que j'ai fait
à suivre
paul

Invité · 25/12/2008, 19h56

Bon
j'ai fait quelques utilisations de ce scripts et pour le premier objectif ça marche.

mais

du coup ce qui est définit dans la feuille css de mise en forme des images et liens n'est plus pris en compte pour les liens qui sont inscrits dans le bloc conteneurMenu

en effet par exemple
j'avais mis en css que la bordure des images des liens sur lesquels passe la souris s'entoure d'une bordure de couleur différente
seule l'image du lien de la page en cours est entouré d'une couleur spéciale.

de plus, j'aimerais faire le même type de traitement quand il s'agit de lien sans image : qu'il apparaisse avec une couleur différente quand c'est la page en cours et une autre couleur quand le pointeur de la souris est dessus ...

merci d'avance de toute suggestion car je me mélange complètement les pinceau dans les bouquins javascript que j'ai et que je n'utilise pas souvent en fait.

merci d'avance
amicalement
paul
ps
j'espère que vous avez fait de bons réveillons : moi j'ai fait des pages html et bu une soupe de légumes diététiques c'est plus digeste !

**Auteur** · 26/12/2008, 19h36

Envoyé par paulriluma

du coup ce qui est définit dans la feuille css de mise en forme des images et liens n'est plus pris en compte pour les liens qui sont inscrits dans le bloc conteneurMenu

remplace

Code :

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

image[0].style.border="..........."

par

Code :

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

image[0].className="taFeuilleDeStyles"

fais de même dans le code HTML. Le même code que ci-dessus avec des feuilles de styles :

Code xhtml :

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
64
65
66
67
68
69
70
71
72
73
74
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
 
 
<style type="text/css">
<!--
.sansBordure{
 border: none;
}
 
.avecBordure{
 border: solid yellow 2px;
}
-->
</style> 
 
<script type="text/javascript">
<!-- 
function styleMenu()
{
        var i, n;
        var urlPage, c, liens, images;
        var exp;
        
        urlPage = document.location.href.toLowerCase(); // url de la page en cours
        exp = new RegExp(urlPage, "gi"); // expression régulière
        
        c = document.getElementById("conteneurMenu"); 
        liens = c.getElementsByTagName("a"); // recherche de tous les liens dans le conteneur
        
        n = liens.length;
        for (i=0; i<n; i++)
        {
                image = liens[i].getElementsByTagName("img"); // on prend toutes  les images contenues dans un lien (balise a)
                
                if (liens[i].href.match(exp)) // si le href d'une balise a correspond à l'url de la page
                {
                        image[0].className= "avecBordure"; 
 
                }
                else
                {
                        image[0].className = "sansBordure";
                }
        }
        
}
 
//-->
</script>
 
</head>
 
<body onload="styleMenu()">
 
<div id="conteneurMenu">
	<a href="test.htm"><img src="image1.jpg" class="sansBordure" alt="image1.jpg" /></a><br/>
	<a href="lien2.htm"><img src="image2.jpg" class="sansBordure" alt="image2.jpg" /></a><br/>
	<a href="lien3.htm"><img src="image3.jpg" class="sansBordure" alt="image3.jpg" /></a><br/>
	<a href="lien4.htm"><img src="image4.jpg" class="sansBordure" alt="image4.jpg" /></a><br/>
	<a href="lien5.htm"><img src="image5.jpg" class="sansBordure" alt="image5.jpg" /></a><br/>
</div>	
 
 
</body>
</html>

Envoyé par paulriluma

et une autre couleur quand le pointeur de la souris est dessus ...

pour cela rien de plus simple : utilise la pseudo-classe CSS :hover
Syntaxe :
- pour toutes les balises <a>

Code css :

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

1
2
3
4
 
a:hover{
 color: #0000FF; /*lien en bleu lors du survol de la souris*/
}

- pour des balises <a> contenues dans un élément :

Code css :

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

1
2
3
4
 
.menuLiens a:hover{
 color: #0000FF; /*lien en bleu lors du survol de la souris*/
}

Il existe d'autres pseudo-classes CSS pour les liens

Attention : lorsqu'il s'agit des liens, il y a un ordre à respecter dans la construction de la feuille de styles :
cf. http://r-hunel.developpez.com/tutori...u-vertical/#LV

Envoyé par paulriluma

de plus, j'aimerais faire le même type de traitement quand il s'agit de lien sans image : qu'il apparaisse avec une couleur différente quand c'est la page en cours

je vais réfléchir à ça

Mais tu peux reprendre ce que j'ai fait et supprimer du code ce qui concerne les images

Invité · 26/12/2008, 20h22

Merci beaucoup auteur
je vais travailler ça
j'avais effectivement utilisé a:hover dans ma feuille css
mais je n'ai peut-être pas respecté l'ordre que tu m'indique de vérifier
je te remercie de ta collaboration
et je vais suivre tes indications et toute nouvelle formule que tu me proposera

par ailleurs

j'ai plusieurs livres sur le java script mais aucun ne me renseignent de façon très pratique pour créer moi-même des programmes
ils restent très théorique dans une présentation scolaire du langage en définition de classe d'objet de fonction etc et franchement je n'arrive pas à utiliser tout ça.
aurais-tu une bibliographie à m'indiquer ?

**Auteur** · 26/12/2008, 21h54

Envoyé par paulriluma

j'ai plusieurs livres sur le java script mais aucun ne me renseignent de façon très pratique pour créer moi-même des programmes
ils restent très théorique dans une présentation scolaire du langage en définition de classe d'objet de fonction etc et franchement je n'arrive pas à utiliser tout ça.
aurais-tu une bibliographie à m'indiquer ?

euh, non je n'ai aucun bouquin javascript... J'ai appris sans livre

En fait, je n'ai qu'un seul livre :
aide-mémoire javascript aux éditions Eyrolles mais tu peux voir qu'il est un peu vieux (2003). Il doit sans doute y avoir une édition plus récente

Mais c'est un aide-mémoire ! Il n'y a que des mots-clefs javascript, il n'y a pas d'exemples. Donc ce livre ne t'aidera pas à apprendre le langage. Mais il est bien pratique quand tu recherches des instructions bien précises

Jette un oeil sur la section javascript de developpez.com

**Bovino** · 27/12/2008, 10h23

Ou ici.

Invité · 27/12/2008, 13h00

bon ok
je te remercie de ces indications
je vais voir ça.
c'est curieux mais j'ai plus de facilité à me mettre au php
et par ailleurs le bash m'est assez accessible
mais je résiste au javascript pour je ne sais quelle raison !

faire ressortir le liens de la page en cours dans un menu

JavaScript

Discussions similaires

Partager

Partager