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

Version imprimable

24/12/2008, 11h19
Invité

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

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
24/12/2008, 12h13
SpaceFrog

ben avec css et les pseudo classes .. non

a img :active ??
24/12/2008, 12h19
Bovino

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.

bonjour,

essaye comme ceci :

Code:

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>

24/12/2008, 13h30
SpaceFrog

c'est pas plus direct de le faire en php ...
comme dit Beef une class ...
24/12/2008, 22h33
Invité

Merci "auteur"

je vais essayer avec votre méthode
et je vous tiens au courant
à suivre
paul
24/12/2008, 22h48
Invité

Merci beaucoup beaucoup camarade Auteur
il semble que cela marche sur le premier essai que j'ai fait
à suivre
paul
25/12/2008, 19h56
Invité

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 !

Citation:

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:

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

par

Code:

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:

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>

Citation:

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:

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:

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

Citation:

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 :)

26/12/2008, 20h22
Invité

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 ?
26/12/2008, 21h54
Auteur

Citation:

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 :D

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
27/12/2008, 10h23
Bovino

Ou ici.
27/12/2008, 13h00
Invité

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 !