Aktuell zu
diesem Tutorial hier habe ich einen Farb-Picker erstellt. Dieser ist voll kompatibel mit dem hier verlinkten Tutorial. Das heißt also, es muss nichts weiter gemacht werden, als diesen Code, in ein vorhandenes Script einzubauen, welches mit oben genannten Tutorial erweitert wurde.
Und so sieht er aus:
Der Picker erscheint sobald man mit der Maus über den Button, in diesem Fall hier über den Button "Color" drüber fährt. Dafür habe ich mich dem Tooltip Script von Walterzorn bedient, welches eines der umfangreichsten Tooltip Scripte überhaupt ist. So nebenbei hat man damit auch gleich ein vollständiges Tooltip Script auf seiner Homepage, das nicht nur für den Picker eingesetzt werden kann.
Installation:Wie bereits erwähnt, funktioniert der Picker nur in Verbindung mit meinem
BBCode Tutorial, bzw. mit dem dort vorhandenen JavaScript.
Als erstes holt ihr euch das Tooltip-Script auf
Walterzorn's Homepage, und bindet dieses in eure Seite ein. Das Script muss unbedingt in den BODY Tag eingebunden werden!! Was wir brauchen ist nur die "wz_tooltip.js"!
Der Code der jetzt folgt, beinhaltet den gesamten Picker. Dieser muss nur noch an der richtigen Stelle auf eurer Homepage platziert werden, und das wars dann auch schon.
<!-- Color-Picker by www.dug-portal.com -->
<img src="
button.gif" alt="COLOR" onmouseover="Tip('<div style="border:1px solid #333333; background-color: #cdcdcd; cursor:url(cur_pipet.cur),pointer; height:72px; width:114px;"><img src="palette.gif" width="114" height="72" border="0" alt="" usemap="#picker"><map name="picker"><area shape="rect" onClick="insert(\'[color=#000000]\', \'[/color]\')" coords="2,2,13,13"><area shape="rect" onClick="insert(\'[color=#993300]\', \'[/color]\')" coords="16,2,27,13"><area shape="rect" onClick="insert(\'[color=#333300]\', \'[/color]\')" coords="30,2,41,13"><area shape="rect" onClick="insert(\'[color=#003300]\', \'[/color]\')" coords="44,2,55,13"><area shape="rect" onClick="insert(\'[color=#003366]\', \'[/color]\')" coords="58,2,69,13"><area shape="rect" onClick="insert(\'[color=#000080]\', \'[/color]\')" coords="72,2,83,13"><area shape="rect" onClick="insert(\'[color=#333399]\', \'[/color]\')" coords="86,2,97,13"><area shape="rect" onClick="insert(\'[color=#333333]\', \'[/color]\')" coords="100,2,111,13"><area shape="rect" onClick="insert(\'[color=#800000]\', \'[/color]\')" coords="2,16,13,27"><area shape="rect" onClick="insert(\'[color=#FF6600]\', \'[/color]\')" coords="16,16,27,27"><area shape="rect" onClick="insert(\'[color=#808000]\', \'[/color]\')" coords="30,16,41,27"><area shape="rect" onClick="insert(\'[color=#008000]\', \'[/color]\')" coords="44,16,55,27"><area shape="rect" onClick="insert(\'[color=#008080]\', \'[/color]\')" coords="58,16,69,27"><area shape="rect" onClick="insert(\'[color=#0000FF]\', \'[/color]\')" coords="72,16,83,27"><area shape="rect" onClick="insert(\'[color=#666699]\', \'[/color]\')" coords="86,16,97,27"><area shape="rect" onClick="insert(\'[color=#808080]\', \'[/color]\')" coords="100,17,111,27"><area shape="rect" onClick="insert(\'[color=#FF0000]\', \'[/color]\')" coords="2,30,13,41"><area shape="rect" onClick="insert(\'[color=#FF9900]\', \'[/color]\')" coords="16,30,27,41"><area shape="rect" onClick="insert(\'[color=#99CC00]\', \'[/color]\')" coords="30,30,41,41"><area shape="rect" onClick="insert(\'[color=#339966]\', \'[/color]\')" coords="44,30,55,41"><area shape="rect" onClick="insert(\'[color=#33CCCC]\', \'[/color]\')" coords="58,30,69,41"><area shape="rect" onClick="insert(\'[color=#3366FF]\', \'[/color]\')" coords="72,30,83,41"><area shape="rect" onClick="insert(\'[color=#800080]\', \'[/color]\')" coords="86,30,97,41"><area shape="rect" onClick="insert(\'[color=#969696]\', \'[/color]\')" coords="100,30,111,41"><area shape="rect" onClick="insert(\'[color=#FF00FF]\', \'[/color]\')" coords="2,44,13,55"><area shape="rect" onClick="insert(\'[color=#FFCC00]\', \'[/color]\')" coords="16,44,27,55"><area shape="rect" onClick="insert(\'[color=#FFFF00]\', \'[/color]\')" coords="30,44,41,55"><area shape="rect" onClick="insert(\'[color=#00FF00]\', \'[/color]\')" coords="44,44,55,55"><area shape="rect" onClick="insert(\'[color=#00FFFF]\', \'[/color]\')" coords="58,44,69,55"><area shape="rect" onClick="insert(\'[color=#00CCFF]\', \'[/color]\')" coords="72,44,83,55"><area shape="rect" onClick="insert(\'[color=#993366]\', \'[/color]\')" coords="86,44,97,55"><area shape="rect" onClick="insert(\'[color=#C0C0C0]\', \'[/color]\')" coords="100,44,111,55"><area shape="rect" onClick="insert(\'[color=#FF99CC]\', \'[/color]\')" coords="2,58,13,69"><area shape="rect" onClick="insert(\'[color=#FFCC99]\', \'[/color]\')" coords="16,58,27,69"><area shape="rect" onClick="insert(\'[color=#FFFF99]\', \'[/color]\')" coords="30,58,41,69"><area shape="rect" onClick="insert(\'[color=#CCFFCC]\', \'[/color]\')" coords="44,58,55,69"><area shape="rect" onClick="insert(\'[color=#CCFFFF]\', \'[/color]\')" coords="58,58,69,69"><area shape="rect" onClick="insert(\'[color=#99CCFF]\', \'[/color]\')" coords="72,58,83,69"><area shape="rect" onClick="insert(\'[color=#CC99FF]\', \'[/color]\')" coords="86,58,97,69"><area shape="rect" onClick="insert(\'[color=#FFFFFF]\', \'[/color]\')" coords="100,58,111,69"></map></div>', WIDTH, 116, TITLE, 'Color-Picker', CENTERMOUSE, true, FADEIN, 300, FADEOUT, 300, STICKY, 1, CLOSEBTN, true, CLICKCLOSE, true, SHADOW, true, SHADOWCOLOR, '
#525252')" onmouseout="UnTip()">
Zugegeben sieht der Code aus wie ein Haufen durcheinandergewürfelter Tags. Das hat aber durchaus seinen Grund! Es ist zwingend erforderlich das der Code hintereinander hergeschrieben wird, ohne Leerzeichen ect. Auch müssen gewisse Zeichen maskiert werden, ansonsten funktioniert es nicht. Gut so viel dazu... Ach ja noch was am Rande, auch wenn der Code aussieht wie hingerotzt, ist dieser dennoch valide!
Wie ihr sehen könnt, habe ich Zwei Sachen Rot hervorgehoben. Ich werde hier kurz erklären was dies zu bedeuten hat.
button.gif = Das Bild zu eurem BBCode Button!
#525252 = Die Farbe für den Picker Schatten kann hier angepasst werden!
Mehr muss nicht gemacht werden. Wer aber will, der kann das Design vom Picker auch komplett ändern! Dazu schaut euch auf Walterzorn's Homepage unten die Befehle an.
Dazu kommt noch ein Bild für die Farbpalette, und eine .cur Datei (die Pipette), welche beide in das gleiche Verzeichnis müssen, wo sich auch der Picker Code befindet.
Cursor Datei:
http://raschedv.net/tem/img/cur_pipet.curImage für die Farbpalette:
Einfach "Grafik speichern unter..." wählen! Der Namen des Bildes, sowie der Namen des Cursors dürfen nicht geändert werden! Der Picker sollte eigentlich unter allen gängigen Browsern einwandfrei funktionieren!
Ps: Bezüglich Bugs oder eventuelle Fehlerquellen könnt ihr gerne ein Kommentar dazu schreiben!
Tags: bbcode farbpicker, javascript farbpalette, bbcode farbauswahl, bbcode farbpicker mouseover
Clues of DUG
DUG Partner
Stream Panel
IMDB bzw. OFDB Link: 
Suche auf 
Download: 
Alles wirkt irgendwie fad und farblos, die Buttons passen überhaupt nicht zum Design, und die Struktur der Seite ist total fürn Arsch.
Gut, sie ist zwar immer noch da, aber alle alten Einträge wurden einfach "gekickt", und mit lächerlichen Blog-Seiten ersetzt. Man möchte ab sofort scheinbar nur noch eine seriöse Topliste betreiben.
Loading engine...