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>