-
Modif couleurs par visiteur
Un p'tit clavier ou zapette, pour modifier certaines couleurs du blog...!
Quoi ...????? C'est juste pour le fun !!!!!!Code CSS
#choix-couleur li { float: left; margin-right:20px; margin-left:1px; list-style-type: none; box-shadow:6px 6px 10px black; transition:1s; } #choix-couleur li:hover { box-shadow:none; transition:0.5s; } #coul { max-width:200px; height:260px; margin-bottom:20px; background-color:rgba(51, 51, 51, 0.55); border:2px solid black; border-radius:15px; box-shadow:6px 6px 10px black; } #coul p { margin:10px auto; max-width:130px; text-align:center; color:grey; padding:0px; border:2px solid black; border-radius:5px; background-color:white; box-shadow:6px 6px 10px black; }
Code HTML
<div id="coul"> <p>fond de page en:</p> <ul id="choix-couleur"> <li><a style="color: red;" onclick="$('body').style.background=' red';$('header').style.background=' yellow'" href="#"><span style="background: red;">rou</span></a></li> <li><a style="color: green;" onclick="$('body').style.background=' green'" href="#"><span style="background: green;">ver</span></a></li> <li><a style="color: yellow;" onclick="$('body').style.background=' yellow'" href="#"><span style="background: yellow;">jau</span></a></li> </ul> <br /> <p>header en:</p> <ul id="choix-couleur"> <li><a style="color: red;" onclick="$('header').style.background=' red'" href="#"><span style="background: red;">rou</span></a></li> <li><a style="color: green;" onclick="$('header').style.background=' green'" href="#"><span style="background: green;">ver</span></a></li> <li><a style="color: yellow;" onclick="$('header').style.background=' yellow'" href="#"><span style="background: yellow;">jau</span></a></li> </ul> <br /> <p>menu1 en:</p> <ul id="choix-couleur"> <li><a style="color: red;" onclick="$('menu1').style.background=' red'" href="#"><span style="background: red;">rou</span></a></li> <li><a style="color: green;" onclick="$('menu1').style.background=' green'" href="#"><span style="background: green;">ver</span></a></li> <li><a style="color: yellow;" onclick="$('menu1').style.background=' yellow'" href="#"><span style="background: yellow;">jau</span></a></li> </ul> </div>
-
Commentaires
Bonjour Mike,
Super tuto et quelle bonne idée ! A partir de tes codes, que j'ai un peu bidouillés, car je ne connais absolument pas le javascript, j'ai réussi à installer cette fonction et je trouve cela très sympa et plutôt confortable pour le visiteur qui a du mal à supporter les fonds de couleur claire. Maintenant il n'a plus qu'à choisir !...
Merci beaucoup pour ce partage !