Survol des liens dans un menu dynamique

Version imprimable

Bonjour a tous

Je suis novice et j'ai un petit soucis avec un menu dynamique en javascript, je ne vais pas rentrer dans de grandes explication mais tenter de simplifier au maximum :

Soit deux liens, lien a et lien b

Je voudrais pouvoir modifier le background de lien a au survol de lien b

J'ai tenté d'ecrire une fonction, elle ne génère pas d'erreur mais cela ne fonctionne pas, la voici :
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 html : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Document sans nom</title> <link href="liens.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="liens.js"></script> </head> <body> <p><a href="#" id="liena">lien a</a> </p> <p><a href="#" onfocus="javascript:lien();">lien b</a></p> </body> css : a:hover {background-color:red;} a.noir {background-color : black;} javascript : function lien(){ document.getElementById('liena').className='noir'; }
Si vous avez une solution, elle est bienvenue car je m'arrache les cheveux :o)

26/04/2008, 17h26
Thes32

salut,
Commence par mettre ton code dans la balise CODE;

heuresement que ton code n'est pas très long...
essaie 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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style>
a.red:hover {background-color:red;}
.black {background-color : black;}
</style>
 
<script>
function lien(att, id){
document.getElementById(id).className = (att=='over')? 'black' : 'red';
}
</script>
 
</head>
 
<body>
<p><a href="#" class="red" id="liena">lien a</a> </p>
<p><a href="#" class="red" onMouseOver="lien('over', 'liena');" onMouseOut="lien('out', 'liena');">lien b</a></p>
<p><a href="#" class="red" onMouseOver="lien('over', 'liend');" onMouseOut="lien('out', 'liend');">lien c</a> </p>
<p><a href="#" class="red" id="liend">lien d</a></p>
</body>
</html>

26/04/2008, 21h13
leejunfan

Merci htr999, je crois que ton code va m'être bien utile, je l'étudie et je reviens en parler

Désolé pour l'oubli des balises codes, c'est mon premier post

J'ai simplifié un peu les choses pour avoir une petite fonction qui va bien et que j'adapterais a mon menu dynamique :

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
 
lien.html :
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="liens.css" rel="stylesheet" type="text/css" />
<title>Document sans nom</title>
<script type="text/javascript" src="liens.js"></script>
</head>
 
<body>
 
<a href="#" id="lien1">lien a</a> </p>
<a href="#" id="lien2" onmouseover="sur();" onmouseout="par();">lien b</a></p>
 
</body>
</html>
 
liens.css :
 
a:hover {background-color:red;}
.class1  {background-color:red;}
.class2  {background-color:none;}
 
liens.js :
 
function sur()
    {    document.getElementById("lien1").className="class1";    }
 function par()
    {    document.getElementById("lien1").className="class2";    }

Donc remerci htr999 ;o)