Full version: jsB@nk » Utility » Generator » Color-Picker 1.3
URL: https://www.javascriptbank.com/color-picker-13-script.html
Color-Picker 1.3 simplifies the color-selection for font-colors and background-colors. Use drag-technology, hexadecimal values or RGB-values to determine the most eyecatching color-combinations for your webpages.
Full version: jsB@nk » Utility » Generator » Color-Picker 1.3
URL: https://www.javascriptbank.com/color-picker-13-script.html
<script>// VISUAL COLOR-PICKER 1.3var selectedObj var scalaleft=10var scalaright=265var scalawidth=scalaright-scalaleftvar imgObjvar hexared="00"var hexagreen="00"var hexablue="00"var hexa="#000000"var selectedcolor="#000000"var coloridvar coloridshort="displaycolorFG"var browserinfos=navigator.userAgent var ie=document.all&&!browserinfos.match(/Opera/)var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/)var opera=browserinfos.match(/Opera/) function setZIndex(obj, zOrder) {obj.zIndex = zOrder}function makeHexa(thiscol) { var colhex_left = Math.floor(thiscol/16) var colhex_right= thiscol-(colhex_left*16) if (colhex_left == 10) {colhex_left="A"} if (colhex_left == 11) {colhex_left="B"} if (colhex_left == 12) {colhex_left="C"} if (colhex_left == 13) {colhex_left="D"} if (colhex_left == 14) {colhex_left="E"} if (colhex_left == 15) {colhex_left="F"} if (colhex_right == 10) {colhex_right="A"} if (colhex_right == 11) {colhex_right="B"} if (colhex_right == 12) {colhex_right="C"} if (colhex_right == 13) {colhex_right="D"} if (colhex_right == 14) {colhex_right="E"} if (colhex_right == 15) {colhex_right="F"} var colhex =""+colhex_left+colhex_right return colhex}function shiftTo(obj, x, y) {if (x<=scalaleft) {x=scalaleft}if (x>=scalaright) {x=scalaright}var colo=Math.floor((255/scalawidth*(x-scalaleft)))var hexacolo=makeHexa(colo)obj.pixelLeft=x-7obj.pixelTop=selectedObj.posTopif (imgObj.parentElement.id=="spanschienebuttonred") {hexared=hexacolodocument.colorwizard.rgbred.value=colohexagreen=makeHexa(parseInt(document.colorwizard.rgbgreen.value))hexablue=makeHexa(parseInt(document.colorwizard.rgbblue.value))}if (imgObj.parentElement.id=="spanschienebuttongreen") {hexagreen=hexacolodocument.colorwizard.rgbgreen.value=colohexared=makeHexa(parseInt(document.colorwizard.rgbred.value))hexablue=makeHexa(parseInt(document.colorwizard.rgbblue.value))}if (imgObj.parentElement.id=="spanschienebuttonblue") {hexablue=hexacolodocument.colorwizard.rgbblue.value=colohexared=makeHexa(parseInt(document.colorwizard.rgbred.value))hexagreen=makeHexa(parseInt(document.colorwizard.rgbgreen.value))}hexa="#"+hexared+hexagreen+hexablueif (coloridshort=="displaycolorFG") {document.all.displaycolorFG.style.backgroundColor=hexadocument.all.testdiv.style.color=hexastrkcolor=hexa}else if (coloridshort=="displaycolorBG") {document.all.displaycolorBG.style.backgroundColor=hexadocument.all.testdiv.style.backgroundColor=hexastrkweight=hexa}document.colorwizard.hexafield.value=hexa}function setSelectedElem(evt) {imgObj = window.event.srcElementif (imgObj.parentElement.id.indexOf("schienebutton") != -1) {selectedObj = imgObj.parentElement.stylesetZIndex(selectedObj,100)return } selectedObj=nullreturn}function dragIt(evt) {if (selectedObj) {shiftTo(selectedObj, (window.event.clientX-offsetX-document.all.colorwizarddiv.style.posLeft), (window.event.clientY - offsetY))return false }}function engage(evt) {setSelectedElem(evt)if (selectedObj) {offsetX = window.event.offsetXoffsetY = window.event.offsetY } return false}function release(evt) {if (selectedObj) {setZIndex(selectedObj, 0)selectedObj = null}}function translateintorgb() {var hexanew=document.colorwizard.hexafield.valueif (hexanew.indexOf("#") == -1) {hexanew="#"+hexanewdocument.colorwizard.hexafield.value=hexanew}var hexanewred=hexanew.substring(1,3)var hexanewgreen=hexanew.substring(3,5)var hexanewblue=hexanew.substring(5,7)document.colorwizard.rgbred.value=parseInt("0x"+hexanewred)document.colorwizard.rgbgreen.value=parseInt("0x"+hexanewgreen)document.colorwizard.rgbblue.value=parseInt("0x"+hexanewblue)document.all.spanschienebuttonred.style.posLeft=parseInt(document.colorwizard.rgbred.value)+3document.all.spanschienebuttongreen.style.posLeft=parseInt(document.colorwizard.rgbgreen.value)+3document.all.spanschienebuttonblue.style.posLeft=parseInt(document.colorwizard.rgbblue.value)+3if (coloridshort=="displaycolorFG") {document.all.displaycolorFG.style.backgroundColor=hexanewdocument.all.testdiv.style.color=hexanewstrkcolor=hexanew}else if (coloridshort=="displaycolorBG") {document.all.displaycolorBG.style.backgroundColor=hexanewdocument.all.testdiv.style.backgroundColor=hexanewstrkweight=hexanew}}function translateintohexa() {if (document.colorwizard.rgbred.value>255) {document.colorwizard.rgbred.value=255}if (document.colorwizard.rgbgreen.value>255) {document.colorwizard.rgbgreen.value=255}if (document.colorwizard.rgbblue.value>255) {document.colorwizard.rgbblue.value=255}var hexanewred=makeHexa(parseInt(document.colorwizard.rgbred.value))var hexanewgreen=makeHexa(parseInt(document.colorwizard.rgbgreen.value))var hexanewblue=makeHexa(parseInt(document.colorwizard.rgbblue.value))var hexanew="#"+hexanewred+hexanewgreen+hexanewbluedocument.colorwizard.hexafield.value="#"+hexanewred+hexanewgreen+hexanewbluedocument.all.spanschienebuttonred.style.posLeft=parseInt(document.colorwizard.rgbred.value)+3document.all.spanschienebuttongreen.style.posLeft=parseInt(document.colorwizard.rgbgreen.value)+3document.all.spanschienebuttonblue.style.posLeft=parseInt(document.colorwizard.rgbblue.value)+3if (coloridshort=="displaycolorFG") {document.all.displaycolorFG.style.backgroundColor=hexanewdocument.all.testdiv.style.color=hexanewstrkcolor=hexanew}else if (coloridshort=="displaycolorBG") {document.all.testdiv.style.backgroundColor=hexanewstrkweight=hexanew}}function launchcolorwizard(whatid) {coloridshort=whatidcolorid=eval("document.all."+whatid+".style")document.colorwizard.hexafield.value=colorid.backgroundColortranslateintorgb()}function initcolorpicker() {document.all.colorwizarddiv.style.posLeft=DL_GetElementLeft(document.all.marker);document.all.colorwizarddiv.style.posTop=DL_GetElementTop(document.all.marker);document.all.colorwizarddiv.style.visibility="visible"document.onmousedown=engagedocument.onmousemove=dragItdocument.onmouseup=release}function DL_GetElementLeft(eElement) { var nLeftPos = eElement.offsetLeft; var eParElement = eElement.offsetParent; while (eParElement != null) { nLeftPos += eParElement.offsetLeft; eParElement = eParElement.offsetParent; } return nLeftPos; }function DL_GetElementTop(eElement) { var nTopPos = eElement.offsetTop; var eParElement = eElement.offsetParent; while (eParElement != null) { nTopPos += eParElement.offsetTop; eParElement = eParElement.offsetParent; } return nTopPos; }if (ie) {window.onload=initcolorpicker}else {alert("Color-Picker requires Internet Explorer 5x/6x")}</SCRIPT><script>if (ie) {document.write('<form name="colorwizard">')document.write('<div id="marker" style="position:relative;overflow:hidden;width:310px;height:92px"></div>')document.write('<div id="colorwizarddiv" style="position:absolute;visibility:hidden;width:310px;height:92px;border-style:solid;border-color:#666666;border-width:1px;background-color:#dddddd">')}else {document.write('<div id="colorwizarddiv" style="position:absolute;visibility:hidden;width:0px;height:0px;">')}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><span id="spanschienered" style="position:absolute;top:8px;left:3px;background-color:#FF0000;width:255px;height:5px"><img src="onepixel.gif" width="1" height="1"></span><span id="spanschienebuttonred" style="position:absolute;top:5px;left:3px;background-color:#444444;border:1 solid black;"><IMG NAME="schienebuttonred" SRC="onepixel.gif" width=8 height=8></span><span id="spanschienegreen" style="position:absolute;top:25px;left:3px;background-color:#00ff00;width:255px;height:5px"><img src="onepixel.gif" width="1" height="1"></span><span id="spanschienebuttongreen" style="position:absolute;top:22px;left:3px;background-color:#444444;border:1 solid black;"><IMG NAME="schienebuttongreen" SRC="onepixel.gif" width=8 height=8></span><span id="spanschieneblue" style="position:absolute;top:42px;left:3px;background-color:#0000FF;width:255px;height:5px"><img src="onepixel.gif" width="1" height="1"></span><span id="spanschienebuttonblue" style="position:absolute;top:39px;left:3px;background-color:#444444;border:1 solid black;"><IMG NAME="schienebuttonblue" SRC="onepixel.gif" width=8 height=8></span><div id="displayrgbfield" style="position:absolute;top:55px;left:3px;background-color:#CCCCCC;border:1px solid black"><table cellpadding=2 cellspacing=0><tr><td align=right><table cellpadding=0 cellspacing=0><tr><td align=right><font size=1 face=Arial> R </font></td><td><input type="text" name="rgbred" size=1 value=0 style="font-size:7pt;color:black;font-family:Arial;"></td><td></td><td align=right><font size=1 face=Arial> G </font></td><td><input type="text" name="rgbgreen" size=1 value=0 style="font-size:7pt;color:black;font-family:Arial;"></td><td align=right><font size=1 face=Arial> B </font></td><td><input type="text" name="rgbblue" size=1 value=0 style="font-size:7pt;color:black;font-family:Arial;"></td><td colspan=2 align=center><input type="button" size=1 value="go" onClick="translateintohexa()" style="font-size:8pt;color:black;font-family:Arial;"></td></tr></table></td></tr></table></div><div id="displayhexafield" style="position:absolute;top:55px;left:200px;background-color:#CCCCCC;border:1px solid black"><table cellpadding=2 cellspacing=0><tr><td align=right><table cellpadding=0 cellspacing=0><tr><td align=right></td><td><input type="text" name="hexafield" size=7 value="#000000" style="font-size:7pt;color:black;font-family:Arial;"></td><td></td><td align=center><input type="button" size=1 value="go" onClick="translateintorgb()" style="font-size:8pt;color:black;font-family:Arial;"></td></tr></table></td></tr></table></div><span id="displaycolorBG" style="position:absolute;top:15px;left:284px;width:16px;height:16px;border:1px solid black;background-color:#FF0000;"><a href="javascript:launchcolorwizard('displaycolorBG')"><img src="onepixel.gif" width=16 height=16 border=0></a></span><span id="displaycolorFG" style="position:absolute;top:7px;left:276px;width:16px;height:16px;border:1px solid black;background-color:#000000;"><a href="javascript:launchcolorwizard('displaycolorFG')"><img src="onepixel.gif" width=16 height=16 border=0></a></span></div><br><script>if (ie) {document.write('<div id="testdiv" style="position:relative;visibility:visible;width:310px;border-style:solid;border-color:#666666;border-width:1px;background-color:#FF0000;font-family:Verdana;font-size:16pt;color:#000000;padding:5px">')document.write('Do you like this color?')document.write('</div>')document.write('</form>')}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->