16.05.2016: Es gibt ein paar Aktualisierungen auf unserem Blog! Die Underground Suchmaschine mit welcher ihr Seiten wie die Boerse oder Mygully durchsuchen könnt, wurde komplett überarbeitet. Die XXX Stream Liste wurde aktualisiert, tote Links mit neuen ersetzt, das gleiche gilt für die MP3 Suchmaschinen und die Liste mit den Android Apps wurde ebenfalls erweitert.

BBCode Color-Picker

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:
Error: Image Not Found!

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.

<span 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()">COLOR</span>

Zugegeben sieht der Code aus wie ein Haufen durcheinandergewürfelter Tags. Das hat aber durchaus seinen Grund! Es ist zwingend erforderlich dass 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.cur

Image für die Farbpalette:
Error: Image Not

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

Kommentare:

  1. Ich habe das Script ein bisschen abgeändert, bzw. eine Map erstellt. Somit fallen ein paar Sachen weg, und der Code fällt auch kleiner aus.

    AntwortenLöschen
  2. Hab deinen Code eingebunden jedoch als Input vom type=button. Das ToolTip funkt auch aber er fügt den BBCode nicht ins Textfeld ein. An der Insert Funktion kann es eigentlich nicht liegen die wird auch von den Buttons Bold und Italic genutzt ohne Probeme genutzt. Vllt. Liegt es daran das ich PHP nutze aber ich bekomme keine Fehlermeldung.
    Vllt weist du woran es liegt?
    Das BBCode Tut war auf jedenfall super & verständlich aufgebaut

    AntwortenLöschen
  3. Um dir helfen zu können müsste ich schon deinen Code sehen. Du kannst mir gerne mal einen Link zur Seite über das Kontaktformular zukommen lassen, dann schau ich mir das an.

    AntwortenLöschen

ACHTUNG: Anonyme Kommentare werden nicht freigeschaltet! Bitte wählt aus der Dropdown-Liste "Name/URL" anstatt "Anonym". Mit "Name/URL" bleibt ihr ebenfalls anonym, jedoch kann so zwischen User A und User B unterschieden werden.

Gültige HTML-Tags: <a href="LINK">LINK TITEL</a> | <b>BOLD</b> | <i>KURSIV</i>