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
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
A voir également:
- Changer background
- Changer dns - Guide
- Changer clavier qwerty en azerty - Guide
- Changer carte graphique - Guide
- Windows 7 logon background changer - Télécharger - Thèmes & Fonds d'écran
- Changer extension fichier - 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>
13 févr. 2013 à 22:22
13 févr. 2013 à 22:24
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>
13 févr. 2013 à 22:25
13 févr. 2013 à 22:39
http://www.dev-studio.fr/test.html
good night
14 févr. 2013 à 01:09