25 août 2010

(OverBlog) Changer de background à la demande

Voici une fantaisie à proposer à vos visiteurs. En cliquant sur un mot, ils pourront changer le fond de votre blog.

Pour plus de facilité, nous allons la réaliser entièrement en HTML d'un module Texte Libre.

Modifier en une couleur de fond 

Dans un premier temps, vous collez
<style type="text/css">
.red { background-image: none; background-color: red; }
.green { background-image: none; background-color:green; }
.blue { background-image: none; background-color: blue; }
</style> 
Puis :
<div style="cursor:pointer;color:red;" onclick="body.className='red';">
red</div>
<div style="cursor:pointer;color:green;" onclick="body.className='green';">
green</div>
<div style="cursor:pointer;color:blue;" onclick="body.className='blue';">
blue</div>
Vous notez la concordance des couleurs entre les 2 pavés pour pouvoir personnaliser.

Cliquez sur chaque couleur pour tester :

red
green
blue


Ces 2 exemples suivent la même règle :


Modifier en une texture de fond

Dans un premier temps, vous collez
<style type="text/css">
.purple { background-image: url(adresse de l'image1); }
.black { background-image: url(adresse de l'image2); }
.pink { background-image: url(adresse de l'image3); }
</style>
et à la suite
<div style="cursor:pointer;color:purple;" onclick="body.className='purple';">
purple </div>
<div style="cursor:pointer;color:black;" onclick="body.className='black;">
black </div>
<div style="cursor:pointer;color:pink;" onclick="body.className='pink';">
pink</div>
Modifier en une image de fond 

Dans un premier temps, vous collez
<style type="text/css">
.purple { background-image: url(adresse de l'image1);background-repeat:no-repeat;background-position:center;background-attachment:fixed; }
.black { background-image: url(adresse de l'image2); background-repeat:no-repeat;background-position:center;background-attachment:fixed;}
.pink { background-image: url(adresse de l'image3);background-repeat:no-repeat;background-position:center;background-attachment:fixed; }
</style>
et à la suite
<div style="cursor:pointer;color:purple;" onclick="body.className='purple';">
purple </div>
<div style="cursor:pointer;color:black;" onclick="body.className='black;">
black </div>
<div style="cursor:pointer;color:pink;" onclick="body.className='pink';">
pink</div>

7 commentaires:

  1. j'adore ce scriot :-) j'ai mis des jeux de couleur différents sur toutes mes pages :-)

    par contre (je sais plus si je t'avais posé la question ), j'aurais bien voulu mettre à la place des mots couleurs des petits carrés de couleur comme on trouve sur google image ou sur la page d'accueil du navigateur opéra ? amicalement Nessa

    RépondreSupprimer
  2. Bonjour Nessa :)
    Dans le 2ème pavé, en remplaçant le 3ème red par une image, a fonctionne.

    RépondreSupprimer
  3. merci ! je n'avais pas vu ta réponse mais j'ai réussi :-) ça marche même avec des images en rollover

    par contre je ne sais pas si c'est parce que c'est nouveau , plus de mal à me retrouver ici que sur l'ancien ; la fonction recherche du blog ne fonctionne pas et l'ancien annak est mieux référencé que les nouvelles ficelles ...dur dur mais ça va peut être changé :-)

    RépondreSupprimer
  4. Bonjour Nessa :) ce blog n'a que quelques semaines et les Ficelles avaient plus de 4 ans : c'est donc normal. Et pis, j'avais envie de déménager :) ça m'a donné l'occasion de revoir tous les articles, de les reformuler, rassembler ...

    RépondreSupprimer
  5. Bonjour Annak ! Je voudrais faire un menu abolute mais fixe.
    C'est à dire que le menu resterai en dessou du header et une fois arrivé à hauteur du menu, il descendrai avec nous.
    Merci d'avance
    PS : car HTML5

    RépondreSupprimer
  6. Désolé! Il faut que je change mon clavier!
    en DESSOUS et
    PS: la balise nav car HTML5

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)