Webseiten mit Mehrwert

Das Prinzip des sensitiven Servicecenters ist simpel. Das Skript gibt Ihnen die Möglichkeit, jeden Link auf Ihrer Seite, aber auch jedes HTML-Element mit ganz speziellen Zusatzinformationen zu binden und diese in einem vorbereiteten Bereich der Seite einzublenden. Der vorbereitete Bereich besteht aus einem DIV-Element, das mit einer simplen CSS-Klasse an einer beliebigen Stelle der Seite eingeblendet werden kann.

Beliebige Daten zum Einblenden

Damit verschiedene Informationen zu einem Link oder einem HTML-Element zusammengestellt werden können, wird zunächst eine kleine Datenbank zusammengestellt. Die Datenbank schreiben Sie einfach als Inhalte eines Arrays in einen Skriptbereich in eine separate JS-Datei. Das Auslagern der Datei ist wichtig, damit Sie die Zusatzinfos auf jeder Seite Ihres Angebots nutzen können und bei Erweiterung oder Veränderung der Daten nicht alle Seiten manuell anpassen müssen. Benennen Sie die Datei mit "inhalte.js". Sie können sowohl die Datenbanken als auch das eigentliche Skript in dieser Datei unterbringen. Achten Sie aber darauf, dass Sie diese Datei erst hinter dem HTML-Code Ihrer Internetseiten einbinden.

Das Skript enthält Verweise auf HTML-Elemente, die zunächst definiert werden müssen. Wird das Skript vor dem eigentlichen HTML-Code geladen, kann es unter Umständen zu Fehlermeldungen vom Browser kommen, die unschön, überflüssig und vermeidbar sind. Das erste Array bekommt den Namen "inhalte". In unserem Beispiel besteht es aus 10 einzelnen Variablen.

Die Inhalte dieser Variablen können Sie nach Belieben vorgeben, indem Sie einfach einen vorbereiteten HTML-Code der Variablen zuweisen. Sie können dabei jeden verfügbaren Befehl einsetzen, um Verlinkungen, Bilder, Zusatzinfos und sonstige Elemente zu erzeugen. Achten Sie nur darauf, dass Sie den in der Variable befindlichen Quellcode ohne Anführungszeichen verfassen. Normalerweise können Sie die Wertezuweisungen in HTML ohne die "Gänsefüßchen" definieren. Sollten diese Zeichen einmal notwendig sein, etwa bei einem längeren Text mit Leerzeichen, den Sie einem ALT-Tag eines Bildes zuweisen, dann arbeiten Sie mit einem Apostroph anstelle des Anführungszeichens.

Sie brauchen sich nicht an die Größenbeschränkung des DIV-Elements halten, wenn Sie Ihre Zusatzinformationen generieren. Das DIV-Element wurde im CSS-Bereich mit dem Parameter "overflow : auto;" versehen und blendet bei Bedarf einfach die Bildlaufleisten am rechten Rand ein, mit denen Sie dann die Inhalte scrollen können.

Inhalte der Website einfach steuern

Damit Sie das Einblenden der Inhalte steuern können, werden die gewünschten HTML-Elemente mit einem MouseOver-Aufruf versehen. Der ruft die JavaScript-Funktion "sense" auf. Als Übergabeparameter wählen Sie einen String, der aus einer Ziffernkombination von Nullen und Einsen besteht. In unserem Beispiel werden genau zehn Ziffern gesetzt, die Anzahl entspricht der Anzahl der Elemente des Inhalts-Arrays. Eine "1" sorgt dafür, dass der Inhalt eines Array-Elements im Ausgabe-DIV angezeigt wird. Steht die 1 in der übergebenen Zeichenkette an erster Position, so wird das Array mit der Indexziffer 1 angezeigt, steht die 1 an Position 5, zeigt das Skript den Inhalt von Array-Element Nummer 5 an.

Dabei können Sie beliebig viele Einsen setzen. Es ist also Ihre Entscheidung, ob Sie nur einen Inhalt aus der Datenbank anzeigen lassen oder fünf oder alle. Setzen Sie nur Nullen in den Übergabestring, so wird kein Inhalt im DIV platziert.

Sie müssen übrigens nicht immer alle zehn Ziffern in den String eintragen. Eine durchgehende Folge von Nullen am Ende des Strings muss nicht notiert werden. Wenn Sie beispielsweise die Inhalte der Array-Elemente 1 und 4 ausgeben lassen wollen, dann notieren Sie statt "1001000000" einfach "1001".

Zusätzliche Zufallseinblendungen

Neben den gezielt ausgewählten Inhalten können Sie zusätzlich zufällige Inhalte einblenden lassen. Etwa Tipps oder kleine Werbungsblöcke. Dazu steht Ihnen ein weiteres Array namens "tipp" zur Verfügung. Das Array wird auf die Größe gebracht, die in der Variablen "tippanzahl" gespeichert wurde. Ändern Sie bei Erweiterung oder Kürzung der Anzahl der Tipps einfach die Wertzuweisung in dieser Variablen.

Das Skript ermittelt anhand des Inhalts in "tippanzahl" einen Zufallswert und blendet den Inhalt des Array-Elements mit dem Zufallswert nach den ausgesuchten Inhalten in das DIV-Element ein. Die Tipps werden unabhängig von der Anzahl der Inhalte ausgesucht und im DIV platziert. Auch wenn Sie keine sensitiven Inhalte ausgesucht haben, wird der Tipp sich bei Berührung eines der vorbereiteten HTML-Elemente neu generieren. Statten Sie sehr viele HTML-Elemente mit einem Sprung zur Funktion "sense" aus, so wird dem Besucher sehr häufig ein neuer Tipp präsentiert.

Das bedeutet aber nicht, dass die eigentlichen Inhalte aus dem DIV verschwinden. Wenn Sie z.B. ein Element mit dem Übergabewert "01" ausgestattet haben, so erscheint Inhalt Nummer 2 und ein zufälliger Tipp. Haben Sie ein anderes Element mit dem Inhalt "0" versehen und fahren mit der Maus darüber, bleibt der ursprüngliche Inhalt im Fenster, der Tipp wird aber zufällig neu generiert.

Dieses Verfahren macht Sinn, damit eventuelle Links, die Sie in der Inhaltsdatenbank gesetzt haben, nicht verschwinden, sobald der Besucher auf dem Weg zum Link ein HTML-Element berührt, das eigentlich nur einen Tipp zeigen soll.

Eine einfache Funktion

Verantwortlich für den sauberen Ablauf aller Einblendungen ist die Funktion "sense". Sie ist kurz und leicht zu verstehen (siehe Kasten). Zunächst prüft die Funktion in Zeile 3, ob innerhalb des übergebenen Steuercodes eine "1" enthalten ist. Ist das der Fall, muss der Inhalt des DIV verändert werden.

Deshalb wird genau dann die globale Variable "ausgabe" geleert. Ist keine "1" vorhanden, soll kein Inhalt ausgetauscht werden, in diesem Fall bleibt der Wert von "ausgabe" unverändert. In Zeile 5 ermittelt die Funktion die Anzahl der Nullen und Einsen im Übergabestring. Diese Anzahl ist dann verantwortlich für die Durchläufe der Laufanweisung, die in Zeile 6 beginnt. Sie prüft einfach Zeichen für Zeichen des Übergabestrings. Wird eine "1" gefunden, wird die Variable "ausgabe" um den Inhalt des entprechenden Array-Elements ergänzt.

Nach Beendigung der Schleife sind alle Inhalte, die im DIV-Element ausgegeben werden sollen, gesammelt und stehen für die weitere Verarbeitung zur Verfügung. Es folgt in Zeile 12 die Ermittlung des zufällig eingeblendeten Tipps. Die Funktion ermittelt eine Zahl zwischen 1 und der Anzahl der festgelegten Tipps, die in der Variablen "tippanzahl" gespeichert ist.

Schließlich muss der Inhalt des DIV-Elements neu angepasst werden. Das DIV wurde mit der ID "sensitiveinhalte" benannt. In Zeile 13 wird nun der auszugebene HTML-Code in der Variablen "ausgabeelement" abgelegt. Diese zusätzliche Variable ist notwendig, damit die Inhalte in "ausgabe" im Falle eines Übergabe-Strings aus lauter Nullen nicht überschrieben werden. Der gesamte HTML-Code wird dann in Zeile 14 mit der innerHTML-Methode des Objektes "getElementByID" in das DIV-Element geschrieben.

Zusammenstellen der Inhalte

Viel zu beachten bei der Zusammenstellung der Inhalte und Tipps gibt es nicht. Das Wichtigste ist das Vermeiden von Anführungszeichen, das bereits oben beschrieben wurde. Damit aber die Darstellung der Inhalte wohl geordnet und hübsch aussieht, sollten Sie beispielsweise hinter jeden Inhalts- oder Tippcode einige <br>-Tags setzen oder die Inhalte oder Tipps gleich in allumschließende <p>-Tags setzen. So erscheint ein wenig Abstand zwischen den einzelnen Informationen im DIV. Wenn Sie mit Bildern arbeiten, achten Sie darauf, dass die Breite der Bilder nicht die Breite des DIVs überschreitet. Die Folge sind in solchen Fällen ein horizontaler Rollbalken an der unteren Kante des DIVs. Besser ist es, die Größenjustierung von DIV und möglichen Bildern im Vorfeld sauber abzustimmen.

Wenn Sie mehr oder weniger Inhaltsvariablen im Array einsetzen wollen, so können Sie das nach Belieben tun. Das Skript muss deshalb nicht verändert werden. Einzig die Stringkette, die mit dem MouseOver-Befehl an die Funktion übergeben wird, muss ggf. erweitert werden. Achten Sie bei dieser Kette darauf, dass Sie in der Summe niemals mehr Nullen und Einsen setzen, als Inhaltsvariablen vorhanden sind, sonst kommt es zu einem Fehler, der zwar das Design nicht durcheinander bringt, aber eine unschöne Meldung im DIV-Element zur Folge hat.

DIE FUNKTION "SENSE"