Changement du Background en Rollover

**rodolphebrd** · 17/11/2012, 11h56

Bonjour, Je cherche à faire des essais et là je bloque:

Je souhaiterai faire un rollover sur un lien et modifier le background de la balise body:
Ça ne fonctionne pas :

Code :

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

1
2
3
4
5
6
7
body {
	background-color: yellow;
	}
 
<body>
<a href="#" onmouseover="document.getElementsByTagName('body').style.backgroundColor='Blue';" 
onmouseout="document.getElementsByTagName('body').style.backgroundColor='yellow';">lien</a></body>

Ça fonctionne :

Code :

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

1
2
3
4
5
6
7
#er {
	background-color: yellow;
	}
 
<body id="er">
<a href="#" onmouseover="document.getElementById('er').style.backgroundColor='Blue';" 
onmouseout="document.getElementById('er').style.backgroundColor='yellow';">lien</a></body>

Ça ne fonctionne pas :

Code :

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

1
2
3
4
5
6
7
body {
	background-image: url(img1.jpg);
	}
 
<body>
<a href="#" onmouseover="document.getElementsByTagName('body').style.backgroundImage=url('img2.jpg');" 
onmouseout="document.getElementsByTagName('body').style.backgroundImage=url('img1.jpg');">lien</a></body>

Merci pour vos réponses

**NoSmoking** · 17/11/2012, 12h39

Bonjour,
le méthode getElementsByTagName('body'), retourne une collection, c'est le s, donc pour accéder à un élément il y a lieu d'indiquer son index

Code :

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

var oBody = document.getElementsByTagName('body')[0];

de plus pour style.backgroundImage=url() il faut mettre des quotes autour de url pour que ce soit considérer comme une chaine.

Au final

Code :

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

1
2
3
<a href="#"
  onmouseover="document.getElementsByTagName('body')[0].style.backgroundImage='url(http://www.developpez.com/)';"
  onmouseout="document.getElementsByTagName('body')[0].style.backgroundImage='url()';">lien</a>

**rodolphebrd** · 17/11/2012, 12h51

Merci pour la célérité de la réponse; Je teste cet après-midi.
PS: NoSmoking toujours à la rescousse!!!

**Auteur** · 17/11/2012, 15h22

bonjour,

tu as même plus simple : tu peux accéder à l'objet body directement à partir du document.

Code CSS :

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

1
2
3
body {
	background-color: yellow;
	}

Code html :

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

1
2
3
4
5
<body>
<a href="#" onmouseover="document.body.style.backgroundColor='Blue';" 
onmouseout="document.body.style.backgroundColor='yellow';">lien</a>
 
</body>

**rodolphebrd** · 17/11/2012, 17h52

Merci beaucoup

**rodolphebrd** · 18/11/2012, 11h47

J'ai testé et ça fonctionne très bien merci.

Changement du Background en Rollover

JavaScript

Discussions similaires

Partager

Partager