FARBE Web-SgS

Script - 30

RGB-slider

<head> <script type="text/javascript"> //<![CDATA[ window.__CF=window.__CF||{};window.__CF.AJS={}; //]]> </script> <title> - colormatch redux</title> <link type="text/css" rel="StyleSheet" href="swing.css" /> <link type="text/css" rel="StyleSheet" href="cm.css" /> <script type="text/javascript" src="range.js"></script> <script type="text/javascript" src="timer.js"></script> <script type="text/javascript" src="slider.js"></script> <script type="text/javascript" src="colormatch.js"></script> </head> <BODY> <div id="sitewidth"> <br /> <h4 class="storytitle"><a href="javascript:self.close();">Закрыть?</a></h4> <br /> <div id="allsliders"> <div class="spacer"></div> <div id="slideleft"> <div class="row"> <label class="slider-caption" for="red-slider"><font color="red">Red</font>:</label> <div class="slider" id="red-slider"> <input class="slider-input" id="red-slider-input" /> </div> <input class="sl-input" id="red-input" maxlength="3" tabindex="1" /> </div> <div class="spacer"></div> <div class="row"> <label class="slider-caption" for="green-slider"><font color="lime">Green</font>:</label> <div class="slider" id="green-slider"> <input class="slider-input" id="green-slider-input" /> </div> <input class="sl-input" id="green-input" maxlength="3" tabindex="2" /> </div> <div class="spacer"></div> <div class="row"> <label class="slider-caption" for="blue-slider"><font color="blue">Blue</font>:</label> <div class="slider" id="blue-slider"> <input class="slider-input" id="blue-slider-input" /> </div> <input class="sl-input" id="blue-input" maxlength="3" tabindex="3" /> </div> </div> <div id="slideright"> <div id="color-result"></div> </div> <div class="spacer"></div> </div> <div id="collist"> <div class="spacer"></div> <div class="s" id="sw0" onclick="c2r('sw0')" title="Click to promote to primary color">1</div> <div class="s" id="sw1" onclick="c2r('sw1')" title="Click to promote to primary color">2</div> <div class="s" id="sw2" onclick="c2r('sw2')" title="Click to promote to primary color">3</div> <div class="s" id="sw3" onclick="c2r('sw3')" title="Click to promote to primary color">4</div> <div class="s" id="sw4" onclick="c2r('sw4')" title="Click to promote to primary color">5</div> <div class="s" id="sw5" onclick="c2r('sw5')" title="Click to promote to primary color">6</div> <div class="s" id="sw6" onclick="c2r('sw6')" title="Click to promote to primary color">7</div> <div class="s" id="sw7" onclick="c2r('sw7')" title="Click to promote to primary color">8</div> <div class="s" id="sw8" onclick="c2r('sw8')" title="Click to promote to primary color">9</div> <div class="spacer"></div> </div> <div> <div class="spacer"></div> <div class="t" id="hc0">000000<br /> </div> <div class="t" id="hc1">000000<br /> </div> <div class="t" id="hc2">000000<br /> </div> <div class="t" id="hc3">000000<br /> </div> <div class="t" id="hc4">000000<br /> </div> <div class="t" id="hc5">000000<br /> </div> <div class="t" id="hc6">000000<br /> </div> <div class="t" id="hc7">000000<br /> </div> <div class="t" id="hc8">000000<br /> </div> <div class="spacer"></div> </div> <div id="row2"> <div class="spacer"></div> <div id="forms"> <form action="colormatch/export.php" method="post"> <fieldset style="margin:0;padding:0;width:400px;border:0;"> <input type="hidden" id="col0" name="col0" value="#000000" /> <input type="hidden" id="col1" name="col1" value="#000000" /> <input type="hidden" id="col2" name="col2" value="#000000" /> <input type="hidden" id="col3" name="col3" value="#000000" /> <input type="hidden" id="col4" name="col4" value="#000000" /> <input type="hidden" id="col5" name="col5" value="#000000" /> <input type="hidden" id="col6" name="col6" value="#000000" /> <input type="hidden" id="col7" name="col7" value="#000000" /> <input type="hidden" id="col8" name="col8" value="#000000" /> <label for="html">Hex:</label> <br /> <input type="text" id="html" size="15" maxlength="7" /> <input class="submit" type="button" name="go" id="go" value="Use it" onclick="htmlgo();" /> <br /> <br /> <script type="text/javascript">// init code var r = new Slider(document.getElementById("red-slider"), document.getElementById("red-slider-input")); r.setMaximum(255); var g = new Slider(document.getElementById("green-slider"), document.getElementById("green-slider-input")); g.setMaximum(255); var b = new Slider(document.getElementById("blue-slider"), document.getElementById("blue-slider-input")); b.setMaximum(255); var ri = document.getElementById("red-input"); ri.onchange = function () { r.setValue(parseInt(this.value)); }; var gi = document.getElementById("green-input"); gi.onchange = function () { g.setValue(parseInt(this.value)); }; var bi = document.getElementById("blue-input"); bi.onchange = function () { b.setValue(parseInt(this.value)); }; r.onchange = g.onchange = b.onchange = function () { var cr = document.getElementById("color-result"); cr.style.backgroundColor = "rgb(" + r.getValue() + "," + g.getValue() + "," + b.getValue() + ")"; rg.r = ri.value = r.getValue(); rg.g = gi.value = g.getValue(); rg.b = bi.value = b.getValue(); rg2hs(rg); ud("0",rg); dom(); if (typeof window.onchange == "function") window.onchange(); }; r.setValue(128); g.setValue(128); b.setValue(128); // end init function setRgb(nRed, nGreen, nBlue) { r.setValue(nRed); g.setValue(nGreen); b.setValue(nBlue); } function getRgb() { return { r: r.getValue(), g: g.getValue(), b: b.getValue() }; } function fixSize() { r.recalculate(); g.recalculate(); b.recalculate(); } window.onresize = fixSize; fixSize(); </script> </p> </div> <script type="text/javascript" src="apps1.min.js"></script><script type="text/javascript">__CF.AJS.init1();</script> <div align="center"><a href="http://www.ucoz.ru/" title="Создать сайт бесплатно"><img style="margin:0;padding:0;border:0;" alt="Hosted by uCoz" src="http://s201.ucoz.net/img/cp/8.gif" width="80" height="15" title="Hosted by uCoz" /></a><br /></div> </body>

Закрыть?

Red:

Green:

Blue:

000000

на верх