Changer background

Résolu/Fermé
theteut Messages postés 28 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 13 janvier 2018 - Modifié par theteut le 13/02/2013 à 20:35
theteut Messages postés 28 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 13 janvier 2018 - 14 févr. 2013 à 01:09
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

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 mercredi 15 juin 2011 Statut Membre Dernière intervention 13 janvier 2018 1
13 févr. 2013 à 22:22
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é
13 févr. 2013 à 22:24
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 mercredi 15 juin 2011 Statut Membre Dernière intervention 13 janvier 2018 1
13 févr. 2013 à 22:25
Niquel ! Thx !
0
Profil bloqué
13 févr. 2013 à 22:39
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 mercredi 15 juin 2011 Statut Membre Dernière intervention 13 janvier 2018 1
14 févr. 2013 à 01:09
:D Superbe ! Je viens de tester sur ma page et ça marche tout bien comme il faut !
0