• Modif couleurs par visiteur

    Un p'tit clavier ou zapette, pour modifier certaines couleurs du blog...!
    Quoi ...????? C'est juste pour le fun !!!!!!

    fond de page en:


    header en:


    menu1 en:

     

    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>
    
    « Liens retour top/footer en jsCode HTML5 chez Eklabog »

  • Commentaires

    4
    Jeudi 18 Août 2016 à 15:28

    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 ! 

    3
    Dimanche 24 Avril 2016 à 18:49

    Mike tu es fortiche !

    J'ai vu ton com. dans le forum.

    Bon dimanche. Dani

    2
    Mercredi 20 Avril 2016 à 11:22

    test com 001

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


Version standard

Poursuivre l'affichage en version standard (ordinateur),

cliquer ci-dessous

Clic ici

(Puis fermer cette fenêtre, en haut à droite)

Cet article vous a plu ?
Abonnez-vous !!!

Newsletter