Modifier la couleur d'un bloc au survol d'un lien

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

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

**PilouLille** · 04/06/2012, 17h03

Bonjour,

Je suis nouveau sur ce Forum alors je me présente rapidement : j'ai 21 ans et je suis étudiant en ingénierie financière, j'apprend donc seul le webdesign. Par conséquent je vous prie d'être indulgent avec moi.

J'espère aussi ne pas m'être trompé en réutilisant cette discussion.

Voilà, je suis tombé sur ce site et j'ai donc utilisé la formule proposé par NoSmoking. Celle ci fonctionne très bien, quand je passe ma sourie sur le lien, la div que j'ai sélectionnée change de couleur comme prévu mais celle ci reste colorée après que ma sourie ne soit plus sur le lien en question.

Ma question est donc : est t'il possible de faire en sorte que lorsque mon curseur quitte le lien, la div repasse à sa couleur d'origine?

et est-il possible d'utiliser la même fonction avec un background image?

Merci d'avance,

Piloulille

**NoSmoking** · 04/06/2012, 18h41

Bienvenue donc sur DVP,
il eut effectivement mieux valu ouvrir une autre discussion, mais comme on est là

Ma question est donc : est t'il possible de faire en sorte que lorsque mon curseur quitte le lien, la div repasse à sa couleur d'origine?

oui en appelant la fonction sur l'événement mouseout

Code html :

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

1
2
3
4
<a href="#" 
  onmouseover="change('affichage', 'red', 'texte ROUGE');"
  onmouseout="change('affichage', 'blue', '')">
dupont</a>

et est-il possible d'utiliser la même fonction avec un background image?

c'est le même principe en changeant simplement l'action dans la fonction.

nota: il peut être plus intéressant de modifier la class de l'objet

**PilouLille** · 04/06/2012, 20h39

Merci beaucoup pour ta réponse.

Je tiens à m'excuser, la prochaine fois je recréerai une discussion.

En tout cas super ça marche parfaitement, exactement le rendu que j'attendais.

J'aurais juste une dernière question, comment puis-je intégrer un effet de transition, je chercherais à faire le même effet que "ease-in-out" en CSS. Un effet de fondu en gros?

Encore merci

.

Piloulille

**NoSmoking** · 04/06/2012, 21h35

comment puis-je intégrer un effet de transition, je chercherais à faire le même effet que "ease-in-out" en CSS.

je ne saurais que te conseiller l'excellent article les transitions CSS3 par l'exemple de Jérôme Debray.

**PilouLille** · 04/06/2012, 21h48

Ce que je voulais dire c'était réaliser ces transitions mais en JS pour mon changement de backgroundImage.

ce sont les mêmes formules?

**NoSmoking** · 04/06/2012, 21h59

non dans le lien fournis il s'agit de CSS3 uniquement.

Pour des transitions en javascript tu peux t'inspirer de Galerie avec effet de fondu

**PilouLille** · 05/06/2012, 11h57

Super, merci beaucoup pour votre aide

Modifier la couleur d'un bloc au survol d'un lien

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager