manipuler css en javascript ?

Version imprimable

29/03/2006, 10h20
michaelbob

manipuler css en javascript ?

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 ?
29/03/2006, 10h38
Johnbob
oui c'est possible:

Code:

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

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

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

Voila mon code :

css :

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
 
.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:

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

29/03/2006, 15h42
FMaz

c'est pas "active" la classe pour les lien "active" ?
highlight fonctionne aussi ?
29/03/2006, 16h03
michaelbob

Bon ben au temps pour moi .. Ca fonctionne... J'ai pas trop compris ce qe j'ai fait, mais maintenant, ca fonctionne !! 8)

Merci pour ton aide !
29/03/2006, 17h45
Johnbob

Citation:

Envoyé par FMaz

c'est pas "active" la classe pour les lien "active" ?
highlight fonctionne aussi ?

"highlight" est juste un nom de classe arbitraire que j'ai donné comme exemple pas une pseudo-classe comme hover ou active.
29/03/2006, 17h49
FMaz

Je viend de relire le code et de comprendre, désolé pour la question stupide ;p