JavaScript-Farbtabelle zum Einbinden in HTML-Seiten

Eine Farbtabelle für Webseiten

Ü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)

Funktionsweise

Etwas einfacher als eine Farbpalette mit fließender Abstimmung von Farb- und Grauwerten lässt sich eine Farbtabelle mit einer Auswahlmöglichkeit von vordefinierten Farbwerten realisieren. Jedem einzelnen Feld einer Tabelle wird dabei ein festgelegter Farbwert aus dem RGB-Farbraum zugewiesen. Zusätzlich werden den Feldern die hexadezimalen Entsprechungen und/oder die Namen der Farben zugeteilt. Bei einem Klick auf ein farbiges Feld werden diese Werte mit Hilfe von JavaScript ausgegeben.

Bei der Benutzung müssen Sie lediglich das Feld mit der von Ihnen gewünschten Farbe in der Tabelle anklicken.

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 ftborder und tcolorbg neue Werte ohne vorangestellte # Raute zuweisen.

<!-- Dieser HTML-Code darf nicht verändert werden! -->
<div style="text-align:center; width:394; height:294px; margin-top:0px; margin-bottom:38px; margin-left:auto; margin-right:auto">
<p id="ftoene01" style="margin: 2px"></p>
<p style="margin: 2px"><a id="ftoene02" href="http://www.seo-welten.de/" target="_blank" style="text-decoration:none; font-size:80%; color:#654d1f">www.seo-welten.de</a></p>
<script type="text/javascript"><!--
var ftborder = "ffffff";
var tcolorbg = "eae1c2";
//--></script>
<script type="text/javascript" src="http://www.seo-welten.de/tools/farbe/userinfarbe.js"></script>
</div>
<!-- Ende des HTML-Codes -->

HTML-Code zum Einbinden in WP / CMS

Der obige HTML-Code ist für die Einbindung der Farbtabelle mit Hilfe eines HTML-Editors in statische Webseiten gedacht. Etwas anders verhält sich die Angelegenheit, wenn die Einbindung in WP oder in einem CMS über Bordmittel erfolgt. Auch hier kann ein Code-Schnipsel in der HTML-Ansicht eingefügt werden, doch warf bei einem Test WordPress den leeren p-Tag bei neu angelegten Seiten einfach hinaus, schloss aber zugleich die Kommentare mit p-Tags ein. Der HTML-Code wurde daraufhin wie folgt abgeändert, wobei die Werte für margin sowie die Farbwerte, wie bereits weiter oben beschrieben, bei Bedarf anzupassen sind:

<div style="text-align:center; width:394; height:294px; margin-top:0px; margin-bottom:38px; margin-left:auto; margin-right:auto">
<p id="ftoene01" style="margin:2px">Platzhalter für Farbtabelle</p>
<p style="margin:2px"><a id="ftoene02" href="http://www.seo-welten.de/" target="_blank" style="text-decoration:none; font-size:80%; color:#654d1f">www.seo-welten.de</a></p>
<p style="margin:2px"><script type="text/javascript">// <![CDATA[
var ftborder = "ffffff"; var tcolorbg = "eae1c2";
// ]]></script>
<script type="text/javascript" src="http://www.seo-welten.de/tools/farbe/userinfarbe.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