Changer background

Résolu
theteut Messages postés 28 Date d'inscription   Statut Membre Dernière intervention   -  
theteut Messages postés 28 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je voudrais qu'en survolant un élément du menu (:hover), le background de la page courante change (sans pour autant changer de page).

Quelqu'un saurait comment faire ?

Merci d'avance pour les réponses !

Pour l'instant, mon BG est défini comme ceci :
body{
background: url('background.jpg') fixed 100% top;
...
}



73u7
A voir également:

1 réponse

Réponse 1 / 1
Profil bloqué
 
salut

faut faire ca avec jQuery

il faut juste englober une image avec un lien <a class="change"> et renseigner la balise "rel" avec le nom de l'image qui va représenter le nouveau background.

un petit exemple de page HTML "prêt à l'emploi" :

<!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" xml:lang="fr" lang="fr">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<style type="text/css">
body{
background: url('background.jpg') fixed 100% top;
}
</style>
</head>
<body>

<a class="change" rel="background.jpg"><img src="background.jpg" width="100" /></a>

<a class="change" rel="background2.jpg"><img src="background2.jpg" width="100" /></a>

<script type="text/javascript">
jQuery(document).ready(function(){
$('a.change').click(function(){
var rel= $(this).attr('rel');
$('body').css('background-image', 'url(' + rel + ')');
});
});
</script>
</body>
</html>
0
theteut Messages postés 28 Date d'inscription   Statut Membre Dernière intervention   1
 
Merciiii ! Je vais tester ça demain, et voir si le "problème" est résolu, mais je pense que ça va le faire ! :D
0
Profil bloqué
 
ben je l'ai testé, ca marche
pense bien à inclure la ligne pour importer jquery dans le head et ajouter le bout de script du bas
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
0
theteut Messages postés 28 Date d'inscription   Statut Membre Dernière intervention   1
 
Niquel ! Thx !
0
Profil bloqué
 
j'ai mis la page en ligne :
http://www.dev-studio.fr/test.html
good night
0
theteut Messages postés 28 Date d'inscription   Statut Membre Dernière intervention   1
 
:D Superbe ! Je viens de tester sur ma page et ça marche tout bien comme il faut !
0