28172 sujets

CSS et mise en forme, CSS3

Changer une image de fond (body) ? [Résolu]

Bonsoir,

Je cherche un moyen pour changer une image de fond d'une page suite à un passage de souris au dessus d'un lien.

Je n'ai rien trouvé, je ne sais d'ailleurs pas si c'est possible... Smiley ohwell

Pour être plus clair, le code de ma page est ci dessous.

Je voudrais donc changer background-image: url(1.png);
par background-image: url(2.png); au passage de la souris sur Orientation 2

Voici le code de ma page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Backgroud Viewer</title>
<style type="text/css">
<!--
body {
	margin: 0;
	padding: 0;
	background-image: url(1.png);
}

#global {
	position:absolute;
	left: 50%;
	top: 50%;
	width: 700px;
	height: 600px;
	margin-top: -300px; 
	margin-left: -350px; 
	border: 1px solid #333;
	background-color: #eee;
	padding: 5px;
}

-->
</style>
</head>

<body>
<div id="global">
  <h3>Vous pouvez tester les différents modèles en passant la souris sur les liens ci-dessous.</h3>
  <p>Taille : 5 - Couleur : #333333 - #484848</p>
  <p><a href="#">Orientation 1</a></p>
  <p><a href="#">Orientation 2</a></p>
  <p><a href="#">Orientation 3</a></p>
  <p><a href="#">Orientation 4</a></p>
  <p><a href="#">Orientation 5</a></p>
  <p><a href="#">Orientation 6</a></p>
  <p><a href="#">Orientation 7</a></p>
  <p><a href="#">Orientation 8</a></p>
</div>
</body>
</html>


Merci de votre aide !
Modifié par bertho (26 Feb 2009 - 14:49)
Salut,

il faudra faire ça en JavaScript (évènements onmouseover et onmouseout) mais assure toi que le rendu est satisfaisant car ce n'est pas un comportement "normal" pour un visiteur. Smiley cligne
Bonjour,

Merci pour la réponse...

J'ai cherché du coté de onmouseover mais je n'ai pas trouvé le moyen de changer l'image de fond du body. Lorsqu'il s'agit d'un div ou autre, c'est sans trop de problème mais là, je dois bien avouer que je sèche...

Si quelqu'un a une idée...

Bertrand

PS: Je sais que ce n'est pas un comportement normal mais c'est juste pour que la personne puisse visualiser les différentes images de fond disponible.
Re,

Bon, j'ai mis une div qui prend toute la largeur et la hauteur de l'écran ou j'ai placé mon image.

Sur le texte que je survole pour changer le fond, j'ai fais comme ceci :

  <p><a href="#" onMouseOver="javascript:document.getElementById('ground').style.background-image.url ( '5/333333_484848_2.png');">Orientation 1</a></p>


Mais cela ne fonctionne pas. J'ai aussi essayé avec ...background-image.src, mais ce n'est pas mieux.

Ou est l'erreur?

Merci,

Bertrand
Modifié par bertho (26 Feb 2009 - 14:14)
Bon, finalement, j'ai trouvé..

J'ai fais une fonction :

</style>
<script language="javascript" type="text/javascript">
function changeimg(srcimg) {
	document.body.style.background = "url("+srcimg+")"
}
</script>


Que j'appelle ensuite comme ceci :

  <p><a href="#" onMouseOver="javascript:changeimg('5/333333_484848_1.png');">Orientation 1</a></p>
Bonjour,

J'ai eut aussi du fil à retordre en css.
Mais il y a une façon pour y arriver sans passer par le javascript, ce qui est un avantage non négligeable compte tenu du nombre importants d'internautes l'ayant désactivé.

Voici le code css:


#ton_id {
display: block;
background-image: url("background1.png");
width: xxx px;                         // taille de ton image
height: xxx px;
}

img {
border: none;
}

#ton_id:hover, #ton_id:focus {
background-image: url("background2.png"); // ton chemin complet
}

#ton_id img {
display: none;
}


Ensuite dans ton body:

<a href="#" id="ton_id">
<img src="background1.png" alt="description">
</a>

PS: Ceci est pour changer d'image au survol de la souris, pour le changement par rapport à un lien il suffit d'adapter le code en fonction.

E N J O Y
Smiley biggrin
Modifié par artistik (01 Apr 2009 - 14:15)
Salut artistik,

hmm... je ne comprends pas trop ton code : la question portait sur un changement du background du body.

Soit ton lien #ton_id est l'un des éléments du body et lui seul va être modifié sur le :hover, soit il est censé prendre toute la place du body et dans ce cas :
1) on ne peut plus rajouter d'éléments puisqu'il s'agit d'un lien et il aurait donc mieux valu utiliser un DIV (d'ailleurs à quoi sert ce "lien" ?)
2) même en utilisant un DIV le :hover va être déclenché sur tout l'espace occupé par #ton_id

Sinon et pour conserver une bonne lisibilité des messages sur le forum, il est demandé d'utiliser les balises code pour présenter le code source des exemples.
Pourrais-tu éditer ton message pour te conformer à cette règle de mise en forme ?
Merci d'avance. Smiley cligne
Bonjour,

Voila j'ai modifié l'apparence de mon message pour rectifier le tir, à propos de la forme.
Je vous prie de m'excuser pour cette erreur, en réalité je suis juste passé par là et omis quelques lectures importantes!

Peut-être que j'ai mal compris la demande, n'est ce pas pour afficher une image au survol d'un lien? parce qu'il s'agit de changer juste un background au passage de la souris l'image peut se substituer au background, mais ça dépend réellement de la mise en page du document.
Modifié par artistik (01 Apr 2009 - 14:22)
Sujet clos
Aller à