Visual Color-Picker

Durch das Schieben der Regler mit dem Mauszeiger wird
die Hintergrund- als auch die Vordergrund-Farbe eingestellt.
Außerdem ist eine separate Eingabe des Farbcodes im Format RGB sowie
HEX möglich. Dann kann der Farbwert in die Feineinstellung gehen.

Das Umschalten zwischen Vorder- und Hintergrundfarbe geschieht durch Klick
auf die kleinen Quadratischen Farbkästchen oben rechts.

Dieses GIF bitte noch downloaden:

HTML-Einbindung
    <script> // CREDITS: // VISUAL COLOR-PICKER 1.3 // By Peter Gehrig // Copyright (c) 2004 Peter Gehrig. All rights reserved. // Permission given to use the script provided that this notice remains as is. // Additional scripts can be found at http://www.24fun.com // info@24fun.com // 2/9/2004 // IMPORTANT: // If you add this script to a script-library or script-archive // you have to add a highly visible link to // http://www.24fun.com on the webpage // where this script will be featured var selectedObj var scalaleft=10 var scalaright=265 var scalawidth=scalaright-scalaleft var imgObj var hexared="00" var hexagreen="00" var hexablue="00" var hexa="#000000" var selectedcolor="#000000" var colorid var 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-7 obj.pixelTop=selectedObj.posTop if (imgObj.parentElement.id=="spanschienebuttonred") { hexared=hexacolo document.colorwizard.rgbred.value=colo hexagreen=makeHexa(parseInt(document.colorwizard.rgbgreen.value)) hexablue=makeHexa(parseInt(document.colorwizard.rgbblue.value)) } if (imgObj.parentElement.id=="spanschienebuttongreen") { hexagreen=hexacolo document.colorwizard.rgbgreen.value=colo hexared=makeHexa(parseInt(document.colorwizard.rgbred.value)) hexablue=makeHexa(parseInt(document.colorwizard.rgbblue.value)) } if (imgObj.parentElement.id=="spanschienebuttonblue") { hexablue=hexacolo document.colorwizard.rgbblue.value=colo hexared=makeHexa(parseInt(document.colorwizard.rgbred.value)) hexagreen=makeHexa(parseInt(document.colorwizard.rgbgreen.value)) } hexa="#"+hexared+hexagreen+hexablue if (coloridshort=="displaycolorFG") { document.all.displaycolorFG.style.backgroundColor=hexa document.all.testdiv.style.color=hexa strkcolor=hexa } else if (coloridshort=="displaycolorBG") { document.all.displaycolorBG.style.backgroundColor=hexa document.all.testdiv.style.backgroundColor=hexa strkweight=hexa } document.colorwizard.hexafield.value=hexa } function setSelectedElem(evt) { imgObj = window.event.srcElement if (imgObj.parentElement.id.indexOf("schienebutton") != -1) { selectedObj = imgObj.parentElement.style setZIndex(selectedObj,100) return } selectedObj=null return } 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.offsetX offsetY = window.event.offsetY } return false } function release(evt) { if (selectedObj) { setZIndex(selectedObj, 0) selectedObj = null } } function translateintorgb() { var hexanew=document.colorwizard.hexafield.value if (hexanew.indexOf("#") == -1) { hexanew="#"+hexanew document.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)+3 document.all.spanschienebuttongreen.style.posLeft=parseInt(document.colorwizard.rgbgreen.value)+3 document.all.spanschienebuttonblue.style.posLeft=parseInt(document.colorwizard.rgbblue.value)+3 if (coloridshort=="displaycolorFG") { document.all.displaycolorFG.style.backgroundColor=hexanew document.all.testdiv.style.color=hexanew strkcolor=hexanew } else if (coloridshort=="displaycolorBG") { document.all.displaycolorBG.style.backgroundColor=hexanew document.all.testdiv.style.backgroundColor=hexanew strkweight=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+hexanewblue document.colorwizard.hexafield.value="#"+hexanewred+hexanewgreen+hexanewblue document.all.spanschienebuttonred.style.posLeft=parseInt(document.colorwizard.rgbred.value)+3 document.all.spanschienebuttongreen.style.posLeft=parseInt(document.colorwizard.rgbgreen.value)+3 document.all.spanschienebuttonblue.style.posLeft=parseInt(document.colorwizard.rgbblue.value)+3 if (coloridshort=="displaycolorFG") { document.all.displaycolorFG.style.backgroundColor=hexanew document.all.testdiv.style.color=hexanew strkcolor=hexanew } else if (coloridshort=="displaycolorBG") { document.all.testdiv.style.backgroundColor=hexanew strkweight=hexanew } } function launchcolorwizard(whatid) { coloridshort=whatid colorid=eval("document.all."+whatid+".style") document.colorwizard.hexafield.value=colorid.backgroundColor translateintorgb() } 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=engage document.onmousemove=dragIt document.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> <span id="spanschienered" style="position:absolute;top:8px;left:3px;background-color:#FF0000;width:255px;height:5px"><img src="onepixel.gif"></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"></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"></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>

Hier kannst Du Dir das Javascript einfach per eMail zusenden lassen.

Mail:

Name:

Abo
Wenn Du den Newsletter beziehen möchtest, klicke bitte in das Feld "Abo"