Changement du Background en Rollover

Version imprimable

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:

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:

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:

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

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:

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:

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>

17/11/2012, 12h51
rodolphebrd

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

bonjour,

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

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

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

17/11/2012, 17h52
rodolphebrd

Merci beaucoup ;)
18/11/2012, 11h47
rodolphebrd

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