Changer background
Résolu
theteut
Messages postés
31
Statut
Membre
-
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
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:
- Changer background
- Changer dns - Guide
- Windows 7 logon background changer - Télécharger - Thèmes & Fonds d'écran
- Changer carte graphique - Guide
- Changer extension fichier - Guide
- Changer wifi chromecast - Guide
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>
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>
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>
http://www.dev-studio.fr/test.html
good night