Начало
Калькуляторы
Ползунок RGB
Простой RGB, чтобы ОКОЛДОВАТЬ цветной конвертер, использующий ползунки DHTML. отличный скрипт
Click to
JavaScript Calculators: ползунок RGB
<!-- SIX STEPS TO INSTALL RGB SLIDER: 1. Open a new HTML document, save it as rgb-slider.html 2. Copy the coding into the HEAD of rgb-slider.html 3. Add the onLoad event handler into the BODY tag 4. Put the last coding into the BODY of rgb-slider.html 5. Put the demo button in our HTML page 6. Save all the RGB Slider images to your web site --> <!-- STEP ONE: Create a new document, save it as rgb-slider.html --> <!-- STEP TWO: Put this code in the HEAD of your HTML document --> <HEAD> <style type="text/css"> <!-- #subtext { font-family:helvetica,arial; font-size:8pt; background-color:#CCCCCC; layer-background-color:#CCCCCC;} #title { font-family:helvetica,arial; font-size:13pt; font-weight:bold; } #red { position:absolute; left:54; top:100; width:256; height:10; z-index:1; visibility:visible; background-image:url(redback.gif); layer-background-image:url(redback.gif); clip:rect(0px 256px 10px 0px);} #green { position:absolute; left:54; top:120; width:256; height:10; z-index:1; visibility:visible; background-image:url(greenback.gif); layer-background-image:url(greenback.gif); clip:rect(0px 256px 10px 0px);} #blue { position:absolute; left:54; top:140; width:256; height:10; z-index:1; visibility:visible; background-image:url(blueback.gif); layer-background-image:url(blueback.gif); clip:rect(0px 256px 10px 0px);} #redSlider { position:absolute; left:50; top:98; width:8; height:14; z-index:2; visibility:visible; background-image:url(scroll-boxh.gif); layer-background-image:url(scroll-boxh.gif); clip:rect(0px 8px 14px 0px);} #greenSlider { position:absolute; left:50; top:118; width:8; height:14; z-index:2; visibility:visible; background-image:url(scroll-boxh.gif); layer-background-image:url(scroll-boxh.gif); clip:rect(0px 8px 14px 0px);} #blueSlider { position:absolute; left:50; top:138; width:8; height:14; z-index:2; visibility:visible; background-image:url(scroll-boxh.gif); layer-background-image:url(scroll-boxh.gif); clip:rect(0px 8px 14px 0px);} #display { position:absolute; left:320; top:100; width:50px; height:50px; z-index:1; visibility:visible; background-color:#000000; layer-background-color:#000000; } #hexValue { position:absolute; left:54; top:160; width:320; height:20; z-index:1; visibility:visible;} #titleBar { position:absolute; left:54; top:70; width:320; height:20; z-index:1; background-color:#DDDDDD; layer-background-color:#DDDDDD;} #colorTable { position:absolute; left:380; top:70; width:320; height:200; z-index:1; visibility:visible;} //--> </style> <SCRIPT LANGUAGE="JavaScript"> <! > <! > <!-- Begin function init() { ns4 = (document.layers)?true:false; ie4 = (document.all)?true:false; sliderMin = 50; sliderMax = 306; rValue=0; gValue=0; bValue=0; r1 = '0'; r2 = '0'; g1 = '0'; g2 = '0'; b1 = '0'; b2 = '0'; Rgb = '0'; rGb = '0'; rgB = '0'; rActive = false; gActive = false; bActive = false; document.onmousedown = mouseDown document.onmousemove = mouseMove document.onmouseup = mouseUp if (ns4) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP); if (ns4) { domRed = document.redSlider; domRed.xpos = parseInt(domRed.left); domRed.ypos = parseInt(domRed.top); domRed.w = domRed.clip.width; domRed.h = domRed.clip.height; domGreen = document.greenSlider; domGreen.xpos = parseInt(domGreen.left); domGreen.ypos = parseInt(domGreen.top); domGreen.w = domGreen.clip.width; domGreen.h = domGreen.clip.height; domBlue = document.blueSlider; domBlue.xpos = parseInt(domBlue.left); domBlue.ypos = parseInt(domBlue.top); domBlue.w = domBlue.clip.width; domBlue.h = domBlue.clip.height; domDisplay = document.display; domValue = document.hexValue.document.frmValue.valueDisp; domredValue = document.hexValue.document.frmValue.RgbDisp; domgreenValue = document.hexValue.document.frmValue.rGbDisp; domblueValue = document.hexValue.document.frmValue.rgBDisp; } else { domRed = redSlider.style; domRed.xpos = redSlider.offsetLeft; domRed.ypos = redSlider.offsetTop; domRed.w = redSlider.clientWidth; domRed.h = redSlider.clientHeight; domGreen = greenSlider.style; domGreen.xpos = greenSlider.offsetLeft; domGreen.ypos = greenSlider.offsetTop; domGreen.w = greenSlider.clientWidth; domGreen.h = greenSlider.clientHeight; domBlue = blueSlider.style; domBlue.xpos = blueSlider.offsetLeft; domBlue.ypos = blueSlider.offsetTop; domBlue.w = blueSlider.clientWidth; domBlue.h = blueSlider.clientHeight; domDisplay = display; domValue = frmValue.valueDisp; domredValue = frmValue.RgbDisp; domgreenValue = frmValue.rGbDisp; domblueValue = frmValue.rgBDisp; } hexArray = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'); } function mouseDown(e) { if ((ns4 && e.which!=1) || (ie4 && event.button!=1)) return true; var x = (ns4)? e.pageX : event.x+document.body.scrollLeft; var y = (ns4)? e.pageY : event.y+document.body.scrollTop; if (x > domRed.xpos && x < domRed.xpos+domRed.w && y > domRed.ypos && y < domRed.ypos+domRed.h){ rActive = true; dragObject = domRed; } if (x > domGreen.xpos && x < domGreen.xpos+domGreen.w && y > domGreen.ypos && y < domGreen.ypos+domGreen.h){ gActive = true; dragObject = domGreen; } if (x > domBlue.xpos && x < domBlue.xpos+domBlue.w && y > domBlue.ypos && y < domBlue.ypos+domBlue.h){ bActive = true; dragObject = domBlue; } if (rActive==true || gActive==true || bActive==true){ if (x>=dragObject.xpos && x<=dragObject.xpos+dragObject.w) { dragObject.dragOffsetX = x-dragObject.xpos } return false } else { return true } } function mouseMove(e) { var x = (ns4)? e.pageX : event.x+document.body.scrollLeft; var y = (ns4)? e.pageY : event.y+document.body.scrollTop; if (rActive) { rMoveTo = x-dragObject.dragOffsetX; if (rMoveTo > sliderMax) rMoveTo = 306; if (rMoveTo < sliderMin) rMoveTo = 50; domRed.xpos = rMoveTo; domRed.left = domRed.xpos; rValue = (domRed.xpos+4)-50; calcValue(rMoveTo-50, 'red'); } if (gActive) { gMoveTo = x-dragObject.dragOffsetX; if (gMoveTo > sliderMax) gMoveTo = sliderMax; if (gMoveTo < sliderMin) gMoveTo = sliderMin; domGreen.xpos = gMoveTo; domGreen.left = domGreen.xpos; gValue = (domGreen.xpos+4)-50; calcValue(gMoveTo-50, 'green'); } if (bActive) { bMoveTo = x-dragObject.dragOffsetX; if (bMoveTo > sliderMax) bMoveTo = sliderMax; if (bMoveTo < sliderMin) bMoveTo = sliderMin; domBlue.xpos = bMoveTo; domBlue.left = domBlue.xpos; bValue = (domBlue.xpos+4)-50; calcValue(bMoveTo-50, 'blue'); } return true } function mouseUp(e) { var x = (ns4)? e.pageX : event.x+document.body.scrollLeft var y = (ns4)? e.pageY : event.y+document.body.scrollTop rActive = false; gActive = false; bActive = false; return true } function calcValue(base, color) { base -= 1; if (base < 16) { first = 0; } else { first = parseInt(base/16); } if (base < 0 ) { second = 0; base = 0; } else { second = parseInt(base%16); } c1=hexArray[first]; c2=hexArray[second]; if (color == 'red') { r1 = c1; r2 = c2; Rgb=base; } else if (color == 'green') { g1 = c1; g2 = c2; rGb=base; } else { b1 = c1; b2 = c2; rgB=base; } domValue.value = eval('"'+r1+r2+g1+g2+b1+b2+'"'); domredValue.value = eval('"'+Rgb+'"'); domgreenValue.value = eval('"'+rGb+'"'); domblueValue.value = eval('"'+rgB+'"'); if (ns4) { domDisplay.bgColor = eval('"#'+r1+r2+g1+g2+b1+b2+'"'); } else { domDisplay.style.backgroundColor = eval('"#'+r1+r2+g1+g2+b1+b2+'"'); } return true; } function manualSet(value,color) { if (value < 0) value=0; if (value > 255) value=255; ++value; calcValue(value,color); if (color == 'red'){ domRed.xpos = value+sliderMin-4; domRed.left = domRed.xpos; } else if (color == 'green'){ domGreen.xpos = value+sliderMin-4; domGreen.left = domGreen.xpos; } else { domBlue.xpos = value+sliderMin-4; domBlue.left = domBlue.xpos; } } function convertHex(hexString) { if(hexString == null) hexString = domValue.value; inputHexArray = new Array(6); for(i=0;i<=5;++i) { inputHexArray[i] = hexString.charAt(i); } for(i=0;i<=5;++i) { tempHexVal = inputHexArray[i]; for(j=0;j<=15;++j) { if(tempHexVal == hexArray[j]) tempHexVal = j; } inputHexArray[i] = tempHexVal; } Rgb = (inputHexArray[0]*16)+inputHexArray[1]+1; calcValue(Rgb,'red'); manualSet(Rgb,'red'); rGb = (inputHexArray[2]*16)+inputHexArray[3]+1; calcValue(rGb,'green'); manualSet(rGb,'green'); rgB = (inputHexArray[4]*16)+inputHexArray[5]+1; calcValue(rgB,'blue'); manualSet(rgB,'blue'); } // End --> </script> </HEAD> <!-- STEP THREE: Insert the onLoad event handler into your BODY tag --> <BODY OnLoad="init()"> <!-- STEP FOUR: Copy this code into the BODY of your HTML document --> <div id="red"></div> <div id="green"></div> <div id="blue"></div> <div id="redSlider"></div> <div id="greenSlider"></div> <div id="blueSlider"></div> <div id="colorTable"> <table border=0 cellpadding=0 cellspacing=1> <tr><td colspan=18 align=center id="subtext">Standard 216 Color Palette</td></tr> <script> <!-- clr = new Array('00','33','66','99','CC','FF'); for(k=0;k<6;++k){ for(j=0;j<6;){ document.write('<tr>\n'); for(m=0;m<3;++m){ for(i=0;i<6;++i){ document.write('<td bgcolor=#'+clr[k]+clr[j+m]+clr[i]+'>'); document.write('<a href="javascript:void(null)" '); document.write('onClick="convertHex(\''+clr[k]+clr[j+m]+clr[i]+'\')\;">'); document.write('<img src=blankgif width=10 height=10 border=0></a></td>\n'); } } j+=3; document.write('</tr>\n'); } } //--> </script> </table> </div> <div id="display"><img src="blank.gif" width=50 height=50 border=0></div> <div id="titleBar"> <table border=0 cellpadding=2 cellspacing=0 width=320> <tr> <td id="title">Houser's RGB2HEX DHTML App</td> </tr> </table> </div> <div id="hexValue"><form name="frmValue"> <table border=0 cellpadding=2 cellspacing=0 width=320 bgcolor=#EEEEEE> <tr> <td align=center> <table border=0 cellpadding=2 cellspacing=0> <tr> <td id="subtext">Red</td> <td id="subtext">Green</td> <td id="subtext">Blue</td> </tr> <tr> <td><input type=text size=3 maxlength=3 name="RgbDisp" value="0" onBlur="manualSet(this.value,'red');"></td> <td><input type=text size=3 maxlength=3 name="rGbDisp" value="0" onBlur="manualSet(this.value,'green');"></td> <td><input type=text size=3 maxlength=3 name="rgBDisp" value="0" onBlur="manualSet(this.value,'blue');"></td> </tr> </table> </td> <td align=center> <table border=0 cellpadding=2 cellspacing=0> <tr> <td id="subtext">Hexdecimal</td> </tr> <tr> <td><input type=text size=6 maxlength=6 name="valueDisp" value="000000" onBlur="convertHex();"></td> </tr> </table> </td> </tr> </table></form> </div> <!-- STEP FIVE: Put this code on the page where you want to open the RGB Slider script --> <form> <input type=button value="Open RGB Slider" onClick="window.open('rgb-slider.html','sliderdemo', 'width=600,height=300,left=150,top=150');"></form><P> <!-- STEP SIX: Save all the RGB Slider images to your web site --> <!-- All the images are included in the ZIP file at: ../img/rgb-slider/rgb-slider.zip Upload all the images to the same directory where you will use the RGB Slider script. --> <!-- Script Size: 10.47 KB -->