Semplice:
un altro:codice:<body> <script> function copia(valore){ document.myForm.myText.value=valore; } var a = new Array("00","33","66","99","CC","FF") r=-1 g=0 b=0 document.write("<table border=0 cellspacing=1>") for (x=0;x<18;x++) { document.write("<tr>") for (y=0;y<12;y++) { if (r<5) { r++ } else { if (g<5) { g++ } else { if (b<5) { b++ } else { b=0 } g=0 } r=0 } rgb=a[r]+a[g]+a[b] document.write("<td bgcolor=#"+rgb); document.write("><a href='' onclick='copia(\""+rgb); document.write("\"); return false;' style=\"text-decoration:none\">"); document.write("<font size=1 color=black>"); document.write("</font></a></td>"); } document.write("</tr>") } document.write("</table>") </script> <form name=myForm> <input type=text name=myText> </form>
ciaocodice:<html> <head> <title>Slider</title> <meta name="Author" content="Ronald H. Jankowsky"> <meta name="Description" content="Slider-Script"> <style>.drag {position: relative; cursor: hand}</style> <SCRIPT LANGUAGE="JavaScript1.2"> // Slider script by Ronald H. Jankowsky (http://rj-edv-beratung.de), parts of code (draglayer, movelayer) by DynamicDrive.com // This script is free for use, please leave this notice intact var sPosition; var showPerc=100; document.onmousedown=dragLayer document.onmouseup=new Function("dragMe=false") var Color= new Array(); Color[0] = "00"; Color[1] = "11"; Color[2] = "22"; Color[3] = "33"; Color[4] = "44"; Color[5] = "55"; Color[6] = "66"; Color[7] = "77"; Color[8] = "88"; Color[9] = "99"; Color[10] = "AA"; Color[11] = "BB"; Color[12] = "CC"; Color[13] = "DD"; Color[14] = "EE"; Color[15] = "FF"; // Demofunction to change bg-color by moving slider var rVal,gVal,bVal, cCol cCol = document.bgColor; function chgBg() { // cCol = document.bgColor; rVal=cCol.substr(1,2); gVal=cCol.substr(3,2); bVal=cCol.substr(5,2); ind = Math.round(showPerc/16); if (ind < 0) ind = 0; if (ind > 15) ind=15; // If more sliders are used, each of them has to be handled separately if (kObj.id =="knobImg") cCol="#"+Color[ind]+gVal+bVal; if (kObj.id =="knobImg1") cCol="#"+rVal+Color[ind]+bVal; if (kObj.id =="knobImg2") cCol="#"+rVal+gVal+Color[ind]; document.bgColor=cCol; displayColor.value=document.bgColor; } // Drag and move engine (original code by DynamicDrive.com), don't change unless explicitely indicated var dragMe=false, kObj, yPos,direction function moveLayer() { if (event.button==1 && dragMe) { oldY = kObj.style.pixelTop; kObj.style.pixelTop=temp2+event.clientY-yPos; // Limit movement of knob to stay inside layer if (kObj.style.pixelTop > oldY) direction="dn"; else direction="up"; if (kObj.style.pixelTop < 2 && direction=="up") {kObj.style.pixelTop=2; direction="dn";} if (kObj.style.pixelTop > 102 && direction=="dn") {kObj.style.pixelTop=102; direction="up";} // Set working variable 'showPerc' depending on 100 or 250 scaling sPosition=kObj.style.pixelTop; showPerc = (perCent[0].checked) ? sPosition-2 : (sPosition-2)/2*5; // The following line should be replaced by the function-call with the actual task to perform chgBg(); return false; } } function dragLayer() { if (!document.all) return; if (event.srcElement.className=="drag") {dragMe=true; kObj=event.srcElement; temp2=kObj.style.pixelTop; yPos=event.clientY; document.onmousemove=moveLayer; } } </script> </head> <body bgcolor="#FFFFFF"> <!-- Each of the 'outerLyr#'-divs creates a slider element. There can be as much sliders as needed. Just make sure, they have different names, especially the img (knob is referred and acted on by name)--> This is an impressive demonstration of using DHTML to create adjust bars. Here in the demo, the bars function as color adjusters, though, through modification, can be set to do virtually anything. <div id="outerLyr" style="position:absolute; width:23px; height:120px; z-index:1; left: 155px; top: 111px; background-color: #000000"> [img]knob.jpg[/img] <div id="innerLyr" style="position:absolute; width:20px; height:117px; z-index:2; background-color: #FF0000; left: 2px; top: 2px"> <div id="barLyr" style="position:absolute; width:2px; height:110px; z-index:1; background-color: #000000; left: 9px; top: 5px"></div> </div> </div> <div id="outerLyr1" style="position:absolute; width:23px; height:120px; z-index:1; left: 185px; top: 111px; background-color: #000000"> [img]knob.jpg[/img] <div id="innerLyr1" style="position:absolute; width:20px; height:117px; z-index:2; background-color: #00FF00; left: 2px; top: 2px"> <div id="barLyr1" style="position:absolute; width:2px; height:110px; z-index:1; background-color: #000000; left: 9px; top: 5px"></div> </div> </div> <div id="outerLyr2" style="position:absolute; width:23px; height:120px; z-index:1; left: 215px; top: 111px; background-color: #000000"> [img]knob.jpg[/img] <div id="innerLyr2" style="position:absolute; width:20px; height:117px; z-index:2; background-color: #0000FF; left: 2px; top: 2px"> <div id="barLyr2" style="position:absolute; width:2px; height:110px; z-index:1; background-color: #000000; left: 9px; top: 5px"></div> </div> </div> <div style="position:absolute; width:83px; height:23px; z-index:1; left: 155px; top: 240px; background-color: #000000"> <input type=text name="displayColor" id="displayColor" style="text-align:center;font-size:16px;width: 83px; height: 23px; z-index:3; left: 0px; top: 0px"> </div> <input type="radio" name="perCent" value="false">Prozent <input type="radio" name="perCent" value="true" checked>255 </body> </html>

Rispondi quotando