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

Rubrique Développement Web

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.

Publié il y a déjà trop longtemps…

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>

Article rédigé par Samuel Le Morvan.

Ce que nos lecteurs en disent :

FREUD

Version Pink Paradise R:255; V:0; B:201 :)
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
bactisme

la vache, ca claque vraiment ;)
LuciferX

Vraiment génial ce code, ca donne grave :-)
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
Virginie

J’adore. Le principe est génial.
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
artotal

Tu sais pourquoi sa ne fonctionne pas avec IE ?
Thom

Salut à tous, dites moi le code js, je le met dans la partie head ?
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 !
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.