Farbpalette als Demo und zum Einbinden in Webseiten

JavaScript: Eine Farbpalette für HTML-Seiten

Übersicht / Seite:

1. Wysiwyg-Editor (Ein kleines Tutorial, Einleitung)
2. Erster Beispiel (mit einem Listing für einen kleinen Wysiwyg-Editor)
3. Auswahllisten (für Schriftfamilie, Schriftgröße, Schriftfarbe und H...)
4. Einfügen von Hyperlinks (und Einfügen von Listen)
5. Einfügen von Fotos (und sonstigen Grafiken)
6. Inhalt verarbeiten (Quelltext ausgeben oder senden und speichern)
7. Fertiger Editor (Ansicht, Funktionen und Hinweise zum Download)
8. HTML speichern (Beispiel-Listing zum Speichern von Hypertext)
9. Farbpalette (nur als Demo oder zum Einbinden in Webseiten)
10. Farbtabelle (wie Anmerkung zu Punkt 9)

Prinzipielle Funktionsweise

Ob Editoren, grafische Anwendungen oder sonstige Programme, alle Anwendungen und Programme, mit denen sich Seiten, Bilder oder Texte gestalten lassen, verfügen über unterschiedliche Tools zur Auswahl geeigneter Farben. Auf dieser Seite möchten wird Ihnen eine auf JavaScript-Methoden und Funktionen beruhende Farbpalette zum Einbinden in Webseiten vorstellen. Die Funktionsweise der Farbpalette in allen Einzelheiten erläutern zu wollen, würde den Umfang des bisherigen Tutorials über Wysiwyg-Editoren sprengen, deshalb nur eine kurze Zusammenfassung des Prinzips.

Wer mit Hilfe der Farbpalette eine Farbe auswählen möchte, kann dies per Mauszeiger und per Klick, ebenso kann per Klick der Hell-Dunkel-Verlauf abgestimmt werden. Doch weder die Maus noch der Computer weiß, welche Farben zu welchem Pixel der auf dem Display sichtbaren Grafiken gehört. Ein Browser, der ein Bild rendern muss um es darzustellen, weiß da schon etwas mehr, doch ohne einer Interaktion mit dem Betriebssystem eines Computers, wäre auch ein Browser aufgeschmissen. Hier hilft ein Koordinatensystem mit X und Y Koordinaten weiter, welches an der linken oberen Ecke des jeweiligen Displays bei null oder eins beginnt. Eigentlich wohl bei eins, da 0px nicht sichtbar wäre, auch wenn 0 den Ausgangspunkt darstellt. Ähnlich wie bei Navigationssystemen, meldet nun das Betriebssystem des Computers dem Browser, bei welchen Koordinaten ein Mausklick erfolgte.

Ein Mausklick ist ein Ereignis, zwar nur ein sehr kleines im Leben eines Menschen, dennoch ein Ereignis. Im nächsten Schritt fragt nun JavaScript die Koordinaten des Events vom Browser ab, wobei eine Überprüfung erfolgt, welches Element sich bei den Koordinaten befindet. Besitzt dieses Element einen Event-Handler, können mit JavaScript diverse Funktionen aufgerufen werden. Bis hierhin ist es noch einfach, da das Betriebssystem und der Browser den größten Teil der Rechenarbeit übernehmen, doch nun kommt der Programmierer ins Spiel. Der Programmierer muss ein Script programmieren, welches die X- und Y-Koordinaten mit geeigneten Formeln, die der verwendeten Script- oder Programmiersprache angepasst werden müssen, umrechnet in Farbwerte.

Diese Arbeiten können Sie sich jedoch ersparen, in dem Sie einfach das nachfolgende Tool in eine Ihrer HTML-Seiten einbinden. Den HTML-Code zum einbinden finden Sie ebenfalls auf dieser Seite. Den Rahmen und die Hintergrundfarbe der Palette können Sie Ihren bestehenden Seiten anpassen.

Bei der Benutzung müssen Sie zuerst eine Farbe in der oberen Grafik per Klick auswählen. Anschließend können Sie dann den Hell-Dunkel-Verlauf verändern. Ein Klick auf die Grafik des Hell-Dunkel-Verlaufs startet die Funktion zum Abgleich, ein zweiter Klick stoppt die Funktion.

HTML-Code zum Einbinden in statische Webseiten

Um dieses Tool in eine Ihrer Webseiten einzubinden, kopieren Sie einfach den nachfolgenden HTML-Code und fügen diesen in den Quelltext ihrer Webseite. Sie können die Farbwerte für den Rahmen und der Hintergrundfarbe ändern, in dem Sie den Variablen fcborder und fcolorbg neue Werte ohne vorangestellte # Raute zuweisen.

<!-- Dieser HTML-Code darf nicht verändert werden! -->
<div style="text-align:center; width:404; height:340px; margin-top:0px; margin-bottom:24px; margin-left:auto; margin-right:auto">
<p id="color01" style="margin: 2px"></p>
<p style="margin: 2px"><a id="color02" href="http://www.seo-welten.de/" target="_blank" style="text-decoration:none; font-size:80%; color:#654d1f">Farbpalette von www.seo-welten.de</a></p>
<script type="text/javascript"><!--
var fcborder = "ffffff";
var fcolorbg = "f1edda";
//--></script>
<script type="text/javascript" src="http://www.seo-welten.de/tools/color/userinpalette.js"></script>
</div>
<!-- Ende des HTML-Codes -->

HTML-Code zum Einbinden in WP / CMS

Der obige HTML-Code eignet sich für die Einbindung der Colorpalette mit Hilfe eines HTML-Editors in statische Webseiten. Sollte die Einbindung hingegen mit Hilfe von Bordmitteln eines CMS erfolgen, so könnten Probleme auftauchen. Bei einem Test warf zum Beispiel WordPress leere p-Tags bei neu angelegten Seiten einfach hinaus, schloss HTML-Kommentare hingegen in p-Tags ein. Nachfolgender HTML-Code erwies sich bei WP als besser geeignet, wobei die Farbewerte wie bereits weiter oben beschrieben sowie die Werte für margin bei Bedarf anzupassend sind:

<div style="text-align:center; width:404; height:340px; margin-top:0px; margin-bottom:24px; margin-left:auto; margin-right:auto">
<p id="color01" style="margin:2px">Platzhalter für Colorpalette</p>
<p style="margin:2px"><a id="color02" href="http://www.seo-welten.de" target="_blank" style="text-decoration:none; font-size:80%; color:#654d1f">Farbpalette von www.seo-welten.de</a></p>
<p style="margin:2px"><script type="text/javascript">// <![CDATA[
var fcborder = "ffffff"; var fcolorbg = "f1edda";
// ]]></script>
<script type="text/javascript" src="http://www.seo-welten.de/tools/color/userinpalette.js"></script></p>
</div>

Hinweis: Die Farbpalette wurde im Internet Explorer 9.0, im Firefox 11.0 und im Google Chrome 18.0 getestet. Gerundete Ecken werden nur angezeigt, wenn die das Tool einbettende Seite nicht im Kompatibilitätsmodus von den Browsern geladen wird. Sollte es Probleme mit der Ausrichtung der Farbpalette innerhalb ihrer Webseite geben, so besteht die Möglichkeit, in der Zeile mit dem erst Div die Angabe auto für die CCS-Eigenschaft margin gegen entsprechende Prozent- oder Pixel-Angaben auszutauschen. Den restlichen HTML-Code sollten Sie hingegen nicht verändern, da ansonsten eine Anzeige der Farbpalette verhindert wird.

» Anfang des Tutorials » Wysiwyg-Editor