Changer background

Résolu
theteut Messages postés 31 Statut Membre -  
theteut Messages postés 31 Statut Membre -
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

1 réponse

  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
    1. theteut Messages postés 31 Statut Membre 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
    3. theteut Messages postés 31 Statut Membre 1
       
      Niquel ! Thx !
      0
    4. Profil bloqué
       
      j'ai mis la page en ligne :
      http://www.dev-studio.fr/test.html
      good night
      0
    5. theteut Messages postés 31 Statut Membre 1
       
      :D Superbe ! Je viens de tester sur ma page et ça marche tout bien comme il faut !
      0