(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>