 |
Submit Your Code | |
 |
SEO Monitor | |
 |
UpTime Monitor | |
 |
PHP Code Contest | |
 |
My Favorite Examples | |
|
My Favorite Articles | |
 |
Update Your Profile | |
|
|
| More Weber Sites | ||
| PHP Code Search | ||
| Web Development Forums | ||
| Learn MySQL Playing Trivia | ||
| PHPBB2 Templates | ||
| Web Development Index | ||
| PHP Web Logs (BLogs) | ||
| Web Development Resources | ||
| Web Development Content | ||
| Recommended Links | ||
| PHPClasses | ||
| PHP Editor | ||
| PHP Jobs | ||
| Vision.To Design | ||
| Ajax Tutorials | ||
| PHP Programming Help | ||
| PHP/MySQL Programming | ||
| Webmaster Resources | ||
| Webmaster Forum | ||
| XML meta language | ||
| website builder | ||
| Recommended | ||
| Submit Site | ||
| Forex Trading Online forex trading platform | ||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Code | |||||
You can find the example at http://alti.free.fr/test/move.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Comment choisir une couleur / how to choose a color</title> <style type="text/css"> <!-- #drag{position:absolute;top:15;left:24px;cursor:hand;float:left;width:40px;z- index:10;} .color{position:absolute;top:20px;left:30px;z-index:0;background:url (color.jpg);width:28px;height:306px;} .autre {position:absolute;top:406px;z-index:1;} table {border:solid black 1px;cursor:hand;} #regle {position:absolute;left:150px;top:100px;width:300px;} #ind {position:absolute;top:306px;left:100px;} #indice {width:40px;height:20px;background-color:#FF0000;float:left;} td {font-size:2px;} //--> </style> <script type="text/javaScript"> <!-- /******************************************************************** ************Script cree par Alti / Script created by Alti************ ********************************************************************* Ce script marche bien sous IE 5+ , / this script works fine with IE5+ il fonctionne sous NN6 et Mozilla / it works with NN6 and Mozilla mais est beaucoup plus long! / but is very longer ********************************************************************* *********************************************************************/ var dragapproved=false var z,x,y; var gg="00",hh="00",jj="00"; postop=321; if (document.all) { IE=1; NN=0 } else if (document.getElementById) { NN=1; IE=0; } else { IE=0;NN=0}; function drags(event){ if (!IE && !NN) return if ((IE && event.srcElement.id=="drag") || (NN && event.target.id=="drag")){ dragapproved=true z=IE?document.all('drag'):document.getElementById('drag'); if (IE) { document.attachEvent("onmousedown", drags); document.attachEvent("onmousemove", move); document.attachEvent("onmouseup", lach); window.event.cancelBubble = true; window.event.returnValue = false; } if (NN) { document.addEventListener("mousedown", drags, true); document.addEventListener("mousemove", move, true); document.addEventListener("mouseup", lach, true); event.preventDefault(); } } } function move(event){ if (dragapproved){ if (event.clientY<=postop && event.clientY>=15) { z.style.top=event.clientY;z.style.pixelTop=event.clientY; } return false } } function lach() { if (dragapproved==true) draw(2); dragapproved=false } function coul() { ll=0 pos=z.style.pixelTop; if(pos>=postop-306 && pos<postop-255) { ll="#FF00"+hex((z.style.pixelTop-postop-306)*5); } else if(pos>=postop-255 && pos<postop-204) { ll="#"+hex((postop-z.style.pixelTop)*5)+"00FF"; } else if(pos>=postop-204 && pos<postop-153) { ll="#00"+hex((z.style.pixelTop-postop+204)*5)+"FF"; } else if(pos>=postop-153 && pos<postop-102) { ll="#00FF"+hex((postop-z.style.pixelTop)*5); } else if(pos>=postop-102 && pos<postop-51) { ll="#"+hex((z.style.pixelTop-postop+102)*5)+"FF00"; } else if (pos>=postop-51) { ll="#FF"+hex((postop-z.style.pixelTop)*5)+"00"; } if (document.all) document.all.indice.style.backgroundColor=ll; else document.getElementById('indice').style.backgroundColor=ll; return ll; } function hex(q) { hexa="0123456789ABCDEF"; return hexa.charAt(q >> 4 & 0xf)+ hexa.charAt(q & 0xf); } function Chex(q) { zz=""; var A=10, B=11 ,C=12,D=13,E=14,F=15; var a=10, b=11 ,c=12,d=13,e=14,f=15; ar= new Array(); for (i=0;i<8;i++) { ar[i]=q.substring(i,i+1); } zz=(eval(ar[1])*16+eval(ar[2]))+"."+(eval(ar[3])*16+eval(ar[4]))+"."+(eval(ar[5]) *16+eval(ar [6])); return zz } function rend(n,v) { n=parseFloat(n); if (isNaN(n)) n=0; b=(v==0)?255/(255-n):255/n; re=/\./g gg=new String(b); dd=gg.search(re); if (dd!=0) { tj=gg.split('.'); return tj[0]; } else { return b } } function check(va,g) { k=(Math.round(255-va)==0)?1:rend(va,g); return k; } function draw(kkk) { if (kkk==2) { fff=new String(coul()); } else { fff=new String("#FF0000"); } vv=Chex(fff); tab=vv.split('.'); mo0=check(tab[0],0); mo1=check(tab[1],0); mo2=check(tab[2],0); var red=255,ver=255,ble=255; for (i=0;i<256;i++) { if (document.all) document.all['bg'+i].style.backgroundColor="#"+hex(red)+""+hex(ver) +""+hex(ble); else document.getElementById('bg'+i).style.backgroundColor="#"+hex(red)+""+hex(ver) +""+hex(ble); if (Math.abs(tab[0])!=255 && red>tab[0] && i%mo0==0) red--; if (Math.abs(tab[1])!=255 && ver>tab[1] && i%mo1==0) ver--; if (Math.abs(tab[2])!=255 && ble>tab[2] && i%mo2==0) ble--; } red1=tab[0]; ver1=tab[1]; ble1=tab[2]; mo0=check(tab[0],1); mo1=check(tab[1],1); mo2=check(tab[2],1); for (j=0;j<256;j++) { if (tab[0]!=0 && red1!=0 && j%mo0==0) red1--; if (tab[1]!=0 && ver1!=0 && j%mo1==0) ver1--; if (tab[2]!=0 && ble1!=0 && j%mo2==0) ble1--; if (document.all) document.all['bgn'+j].style.backgroundColor="#"+hex(red1)+""+hex (ver1) +""+hex(ble1); else document.getElementById('bgn'+j).style.backgroundColor="#"+hex(red1)+""+hex (ver1) +""+hex(ble1); } } function aff(ob) { if (document.all) { va=Chex(ob); tob=va.split('.'); } else if (document.getElementById) { jj=new String(ob); va=jj.substring(4,jj.length-1); tob=va.split(','); } document.fo.tt.value="#"+hex(tob[0])+""+hex(tob[1])+""+hex(tob[2]); document.fo.rouge.value=tob[0]; document.fo.vert.value=tob[1]; document.fo.bleu.value=tob[2]; } //--> </script> </head> <body> <div class="color"></div> <span id="ind"><div id="indice" onClick="aff (this.style.backgroundColor)"></div>Couleur indicée/Indiced color</span> <div class=autre> <form name="fo"> Code Hexa <input type="text" name="tt" size=20 > Rouge/Red <input type="texte" name="rouge" size="3"> Vert/Green <input type="texte" name="vert" size="3">Bleu/Blue <input type="texte" name="bleu" size="3"> </form> <script type="text/javascript"> document.write("<table border='0' width='510' cellpadding='0' cellspacing='0'><tr>\n"); for (i=0;i<256;i++) { document.write("<td width='1' height='15' id='bg"+i+"' bgcolor='#FFFFFF' onClick=aff (this.style.backgroundColor)> </td>\n"); } for (i=0;i<256;i++) { document.write("<td width='1' height='15' id='bgn"+i+"' bgcolor='#FFFFFF' onClick=aff (this.style.backgroundColor)> </td>\n"); } document.write("</tr></table>"); if (document.all) { document.all.indice.style.backgroundColor="#FF0000"; draw(1);} else if (document.getElementById) { document.getElementById ('indice').style.backgroundColor="#FF0000"; draw(1);} </script> </div> <img src="regle.gif" width="40" height="11"name="toto" id="drag" onmousedown="drags (event)" > <div id="regle">D'abord descendre la règle sur la couleur de base choisie, puis cliquer dans le bandeau du bas sur la couleur finale voulue.<br><br> First, move the ruler to the base color, then click on the bottom table to have your final color </div> </body> </html> | |||||
| Related Code Examples | |||||
