Survol des liens dans un menu dynamique

**leejunfan** · 26/04/2008, 13h44

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 :

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

**Thes32** · 26/04/2008, 17h26

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

**htr999** · 26/04/2008, 20h42

heuresement que ton code n'est pas très long...
essaie ceci

Code :

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
 
<!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>

a+

**leejunfan** · 26/04/2008, 21h13

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

**leejunfan** · 27/04/2008, 17h28

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

Code :

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

Survol des liens dans un menu dynamique

JavaScript

Vue hybride

Discussions similaires

Partager

Partager