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