manipuler css en javascript ?

**michaelbob** · 29/03/2006, 10h20

Bonjour � tous,

Je vous explique mon probleme : j'ai des menus que j'ai r�alis� en css. Dans un cas, il s'agit d'images lien qui s'empilent les unes sur les autres pour former un menu vertical. Lorsque je survole une image, elle change pour montrer que je suis dessus.
J'ai un autre type de menu, des textes qui changent de couleur lorsque je les survole.

Assez classique ...

Maintenant, j'aimerai que quand je suis surla page cible d'un des menus, le menu correspoondant s'allume comme si je le survolais, afin de savoir dans quel partie du site je suis. J'ai donc pens� � du code Js qui activerait le mode :hover en css ... Est ce possible ?

**Johnbob** · 29/03/2006, 10h38

oui c'est possible:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

document.getElementById("element_du_menu").className="highlight"

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
.no_higlight:hover { ton style dejà existant }
.highlight { recopie le même style ici }

(Si �a marche pas c'est ".style.className" au lieu de ".className")

**michaelbob** · 29/03/2006, 15h33

Merci pour ta r�ponse, mais ... ca fonctionne pas ... J'ai essay� les deux syntaxes.

Voila mon code :

css :

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
 
.menu1G{
 
background-image: url(menu1_off.gif);
width: 209px;
height: 50px;
}
 
.menu1G a {
margin: 0px;
width: 100px;
height: 50px;
display: block;
text-align: center;
border-style: none;
text-decoration: none;
padding: 0px;
}
.menu1G a:hover {
width: 209px;
height: 50px;
background-image: url(menu1_on.gif);
}
 
.test {
width: 209px;
height: 50px;
background-image: url(menu1_on.gif);
}

et la page html :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<HEAD>
<TITLE>portal</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"></META>
	<!-- feuilles de style -->
<style type="text/css">@import "default.css";@import "custom.css";</style>
<SCRIPT language="javascript">
function go(){
document.getElementById("test").style.className="test";
alert ("on passe bien par la");
 
}
</SCRIPT>
 
</HEAD>
<BODY>
	<ul>
		<li class="menu1G" id="test"><a href="#"></a></li>
	</ul>
	<a href="#" onclick="go()">test</a>
</BODY>
</HTML>

Le principe etant,; dans un premier temps, au clic sur lelien, de changer l'apparence du menu.

Et en fait, il se passe rien, j'ai aps d'erreur dans la console javascript ...

Une id�e ?

Merci d'avance