Babylon Design

par Samuel Le Morvan

Chez vous aussi, utilisez un Web de qualité

Rubrique Développement Web

Profitez des astuces en tous genres portant sur le développement en général !

Rubrique Développement Web

Vous ai-je déjà dit que j’adorais le PNG ?

Pour réaliser le graphisme du site, j’ai opté pour des images PNG que cela ne plaise à Internet Explorer. En utilisant les jauges de Script.aculo.us, je me suis amusé à faire un petit sélecteur de couleur de fond pour le site.

Ce test fonctionne principalement sous Firefox et je m’aperçois d’ailleurs que mon logo a un petit problème de transparence !

R: ; V: ; B:

Et vous, quelle est votre couleur préférée ?

Si le code vous interesse, le voici :

[html] <div style="width:200px; margin:auto"> <div id="track0" style="width:200px;background-color:#aaa;height:10px; margin-bottom:10px;"> <div id="handle0" style="width:5px;height:10px;background-color:#F00;"> </div> </div> <div id="track1" style="width:200px;background-color:#aaa;height:10px; margin-bottom:10px"> <div id="handle1" style="width:5px;height:10px;background-color:#0F0;"> </div> </div> <div id="track2" style="width:200px;background-color:#aaa;height:10px; margin-bottom:10px"> <div id="handle2" style="width:5px;height:10px;background-color:#00F;"> </div> </div> </div> <div style="width:200px; margin:auto; text-align:center"> R:<span id="debug0"> </span>; V:<span id="debug1"> </span>; B:<span id="debug2"> </span> </div> 
[javascript] <script type="text/javascript" src="/lib/prototype.js"></script> <script type="text/javascript" src="/src/scriptaculous.js"></script>   <script type="text/javascript">       var RGBdf = new Array(238, 238, 238);       $('debug0').innerHTML=RGBdf[0];       $('debug1').innerHTML=RGBdf[1];       $('debug2').innerHTML=RGBdf[2];       // <![CDATA[       new Control.Slider('handle0','track0',{       range:$R(0,255),       sliderValue:RGBdf[0],       onChange:function(v){       RGBdf[0] = Math.round(v);       document.getElementsByTagName('body')[0].style.backgroundColor = "rgb("+RGBdf[0]+", "+RGBdf[1]+", "+RGBdf[2]+")";       $('debug0').innerHTML=RGBdf[0];       }});       new Control.Slider('handle1','track1',{       range:$R(0,255),       sliderValue:RGBdf[1],       onChange:function(v){       RGBdf[1] = Math.round(v);       document.getElementsByTagName('body')[0].style.backgroundColor = "rgb("+RGBdf[0]+", "+RGBdf[1]+", "+RGBdf[2]+")";       $('debug1').innerHTML=RGBdf[1];       }});       new Control.Slider('handle2','track2',{       range:$R(0,255),       sliderValue:RGBdf[2],       onChange:function(v){       RGBdf[2] = Math.round(v);       document.getElementsByTagName('body')[0].style.backgroundColor = "rgb("+RGBdf[0]+", "+RGBdf[1]+", "+RGBdf[2]+")";       $('debug2').innerHTML=RGBdf[2];       }});       // ]]>   </script>

Ce que nos lecteurs en disent :

  1. FREUD

    Version Pink Paradise R:255; V:0; B:201 :)

  2. Monique

    Bonjour,

    J’aime bien les tons jaune/ocre dans la gamme R:255; V:217; B:56 :-)

    J’ai testé avec Opera 8.5, curieusement il faut jouer de l’ascenseur pour que la couleur choisie soit prise en compte pour tous les blocs de la page.

    Amicalement,
    Monique

  3. bactisme

    la vache, ca claque vraiment ;)

  4. LuciferX

    Vraiment génial ce code, ca donne grave :-)

  5. superbedon

    j’adore ce script :)
    jaimerais bien le mettre sur mon site, mais jarrive a rien :p
    encore qu’un débutant lol… si vous pouriez m’aider

  6. Virginie

    J’adore. Le principe est génial.

  7. BumBo

    Je viens souvent ici pour les tutos depuis peu (ils sont bien expliquer il faut dire), et je n’avait pas vu cette section , et la je reste clouer , je ne savait pas que cela etait possible et etant adorateur du changement graphique j’aplaudit bien fort ^^.

    je pense que j essayerai :). merci

  8. artotal

    Tu sais pourquoi sa ne fonctionne pas avec IE ?

  9. Thom

    Salut à tous, dites moi le code js, je le met dans la partie head ?

  10. f@kE

    J’ai essayé de le mettre sur mon site mais ça marche pas, je vois juste le block apparaître mais je peux pas deplacer les batonts colorés…
    Pourtant j’ai bien mis le code html et le code java script !

  11. Manou

    bonjour, je trouve sa génial, cependant j’ai le memm probleme que f@ke, quelqu’un à une idée? merci!

Les commentaires sont clos.