Modifier la couleur d'un bloc au survol d'un lien [Résolu]

filtep · 25/11/2011, 09h34

Bonjour,
pour modifier la couleur de fond d'un bloc en fonction du lien survolé j'ai essayé 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
27
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
 <style type="text/css">
 
 #affichage{
 position:absolute;
 width:100px;
 height:100px;
 top:200px;
 left:200px;
 border:solid 1px red;
 }
 
 </style>
 <body>
 <div id="affichage">
 <span id="nom">QUI ?</span>
 </div>
 <a href="#" onmouseover="document.getElementById('affichage').style.background-color='red;';">dupont</a>
 <a href="#" onmouseover="document.getElementById('affichage').style.background-color='blue';">durand</a>
 <a href="#" onmouseover="document.getElementById('affichage').style.background-color='yellow';">dupuis</a>
 
 </body>
 </html>

Ça ne fonctionne pas et je ne comprend pas pourquoi...
Ensuite j'aimerai également pouvoir modifier le texte contenu dans le bloc en fonction du lien survolé... avec un truc du genre "document.getElementById('nom').caption='blablabla';" ... CSS permet-il celà? sinon il faudra que je passe par une image mais je trouve que ça fait un peu bricolo...

Un petit coup de main me sera fort utile dans mon apprentissage !

merci d'avance

A+
Philippe

NoSmoking · 25/11/2011, 09h43

Bonjour,
background-color est l'éciture CSS, il faut utiliser backgroundColor en javascript, donc

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

 <a href="#" onmouseover="document.getElementById('affichage').style.backgroundColor='red';">dupont</a>

(*) attention à laposition du ; après red

Citation:

Ensuite j'aimerai également pouvoir modifier le texte contenu dans le bloc en fonction du lien survolé... avec un truc du genre "document.getElementById('nom').caption='blablabla';" ... CSS permet-il celà?

non ilte faut passer par le javascript, tu noteras que ce que le code ci dessus n'est pas réalisé en CSS mais bien en javascript

filtep · 25/11/2011, 10h41

Mais bien sûr !!! Merci beaucoup. La syntaxe, la syntaxe, la syntaxe...
Sinon pour le texte en JS... "text", "caption" ???
Encore un p'tit coup de main siouplé ?

A+
Philippe

NoSmoking · 25/11/2011, 11h09

dans ce cas on nage en plein javascript et le mieux et de passer par un fonction qui fera tout ce que tu as besoin.
voila un code rapide pour exemple.

Code html :

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
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
#affichage{
  position:absolute;
  width:100px;
  height:100px;
  top:200px;
  left:200px;
  border:solid 1px red;
}
</style>
<script>
function change( idobjet, couleurfond, texte){
  // recup de l'objet a traiter
  var oElem = document.getElementById( idobjet);
  // si objet existe, on ne sait jamais !!!
  if( oElem){
    // modif couleur de fond
    oElem.style.backgroundColor = couleurfond;
    // modif du contenu via son innerHTML
    oElem.innerHTML = texte;
  }
}
</script>
<body>
<div id="affichage">
<span id="nom">QUI ?</span>
</div>
<a href="#" onmouseover="change('affichage', 'red',    'texte ROUGE');">dupont</a>
<a href="#" onmouseover="change('affichage', 'blue',   'texte BLEU');">durand</a>
<a href="#" onmouseover="change('affichage', 'yellow', 'texte JAUNE');">dupuis</a>
</body>
</html>

tu pourrais également passer par les class si tu as plusieurs paramètres CSS à modifier.

filtep · 25/11/2011, 12h37

Merci pour cette réponse, je vais mettre tout ca en œuvre, je reviendrai sur ce post en cas de difficulté.

Cordialement
Philippe

25/11/2011, 10h41	#3
filtep Futur Membre du Club Inscription : juin 2007 Messages : 68 Détails du profil Informations personnelles : Localisation : France, Paris (Île de France) Informations forums : Inscription : juin 2007 Messages : 68 Points : 18 Points : 18	Mais bien sûr !!! Merci beaucoup. La syntaxe, la syntaxe, la syntaxe... Sinon pour le texte en JS... "text", "caption" ??? Encore un p'tit coup de main siouplé ? A+ Philippe
	00

25/11/2011, 12h37	#5
filtep Futur Membre du Club Inscription : juin 2007 Messages : 68 Détails du profil Informations personnelles : Localisation : France, Paris (Île de France) Informations forums : Inscription : juin 2007 Messages : 68 Points : 18 Points : 18	Merci pour cette réponse, je vais mettre tout ca en œuvre, je reviendrai sur ce post en cas de difficulté. Cordialement Philippe
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email