Tip: you can modify some code before running
<style>.drag {CURSOR: hand; POSITION: relative}</style>Js color regulator<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 intactvar sPosition; var showPerc = 100; document. onmousedown = dragLayerdocument. onmouseup = new Function ("dragMe = false") var Color = new Array (); Color [0] = "00"; Color [1] = "11 "; color [2] = "22"; Color [3] = "33"; Color [4] = "4 4 "; 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 function chgBg () {cCol = document. bgColor; rVal = cCol. substr (1, 2); gVal = cCol. substr (3, 2); bVal = cCol. substr (5, 2); ind = Math. rou Nd (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") document. bgColor = "#" + Color [ind] + gVal + bVal; if (kObj. id = "knobImg1") document. bgColor = "#" + rVal + Color [ind] + bVal; if (kObj. id = "knobImg2") document. bgColor = "#" + rVal + gVal + Color [ind];} // 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; d Irection = "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 shocould 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>Tip: This is a color regulator. In this example, only the background color is changed. You can apply this method to a program such as the font color of a chat room, you can add colors to your applications.</p> <div id=outerLyr style="Z-INDEX: 1; LEFT: 233px; WIDTH: 23px; POSITION: absolute; TOP: 111px; HEIGHT: 120px; BACKGROUND-COLOR: #000000"> <div id=innerLyr style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #777777"> <div id=barLyr style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></div> </div> </div> <div id=outerLyr1 style="Z-INDEX: 1; LEFT: 268px; WIDTH: 23px; POSITION: absolute; TOP: 111px; HEIGHT: 120px; BACKGROUND-COLOR: #000000"> <div id=innerLyr1 style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #777777"> <div id=barLyr1 style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></div> </div> </div> <div id=outerLyr2 style="Z-INDEX: 1; LEFT: 300px; WIDTH: 23px; POSITION: absolute; TOP: 111px; HEIGHT: 120px; BACKGROUND-COLOR: #000000"> <div id=innerLyr2 style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px; HEIGHT: 117px; BACKGROUND-COLOR: #777777"> <div id=barLyr2 style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px; HEIGHT: 110px; BACKGROUND-COLOR: #000000"></div> </div> <!-- This would be a way to configure if slider range is 0-100 or 0-255 --> </div> <p> <input type=radio value=false name=perCent>Prozent<input type=radio CHECKED value=true name=perCent>255
Tip: you can modify some code before running
