Über Bubbles, Kalender und Texte, die auf der Seite erscheinen

Das heutige Thema  soll unsere Seite oder unseren Blog mal so richtig aufpeppen können. Fahren Sie doch mal mit der Maus über den untenstehenden Link (aber nicht klicken, der Link ist tot!) :

hier ist was

Oder fahren Sie mal mit der Maus über den nächsten Link:

hier ist was

Wie macht man das???

Das Zauberwort ist:  OVERLIBMWS !

Vielleicht haben ja einige diese – ich nenne es mal – andere Sprache ja schon einmal im Internet gefunden! Letztlich ist das eine Sammelung von Javascript-Programmen, die es kostenlos im Internet gibt.

Ich möchte Ihnen nun hier zeigen, wie Sie overlibmws auf einer Seite und im Blog (wie ich hier 🙂 ) benutzen können.

Tja zunächst müssen Sie mal wissen, wo sie overlibmws eigentlich herbekommen: Entwickelt hat sich overlibmws aus dem Produkt overlib;  es kann halt nur einige Dinge mehr! Das Copyright hält Foteos Macrides und Sie können overlibmws von seiner Seite http://www.macridesweb.com/oltest/ herunterladen.

Auf diesen Seiten ist das – ich sag mal – System, denn das ist es eigentlich schon, auch erklärt.

Wie Sie oben gesehen haben reagiert das Öffnen von Bubbles oder Kästchen sofort. Das ist immer ein Indiz für Javascript. Es läuft also auf Ihrem Browser und nicht im Web! Damit ist es natürlich schnell, und der Benutzer der Seite braucht nicht erst die Seite zu übertragen, um im Webspace eine Funktion auszuführen.

overlibmvs zeichnet sich dadurch aus, dass man mit ihm im Gegensatz zu Title=““ oder alt=““  Attributen, formatierte Texte ausgeben kann. (Wie Sie sehen konnten, geht bei den obigen Links Fettdruck und Kursiv) Damit kann man sich bei seiner Seite von anderen abheben!

Kommen wir also zum Doing: Was muss auf der Seite respektive dem Blog unternommen werden, damit overlibmws funktioniert?

Man erhält ein zip.-Archiv, das man entpacken muss. Bei einer Seite (nicht Blog) kann man alle Dateien am besten in ein Verzeichnis …/javascript/overlib/ legen.  Jetzt muss aber der HTML-Seite noch klargemacht werden, wo sie die Javascripts findet. Dies können Sie im Header der Seite machen. Sie haben je nach Funktion in overlibmws die Wahl welche Skriptverweise Sie einstellen.

<script  src=“…/overlibmws.js“ type=“text/javascript“></script>

<script  src=“…/overlibmws_bubble.js type=“text/javascript“></script>

Diese Angaben kommen in den HTML-Header [<head>…</head>] Ihrer Seite.

Für Blogs habe ich keinen plugin gefunden, deshalb habe ich in meinem Blogverzeichnis im sog. root-Verzeichnis meines Blogs gelegt:

http://marketer.blog.sybeklue.de/overlib/

Damit funktioniert es dann auch! Ok eine Kleinigkeit musste ich noch anpassen: In der Datei overlibmws_bubbles.js musste ich die Zeile

if(OLund(‚OLbubbleImageDir‘))var OLbubbleImageDir=‘./‘;

in

if(OLund(‚OLbubbleImageDir‘))var OLbubbleImageDir=’http://marketer.blog.sybeklue.de/overlib/‘;

ersetzen.

Kommen wir nun zum Aufruf: Den ersten Link von oben habe ich folgendermaßen gebaut:

<a onmouseover=“return overlib(‚Dieses &lt;b&gt;Kästchen&lt;/b&gt; können Sie immer einblenden‘, FGCOLOR,’#ffffcc‘,      WRAP, BASE,2, OFFSETX,-10, OFFSETY,20, TEXTPADDING,4 ,TEXTSIZE,’13px‘);“ onmouseout=“nd();“ href=“./“>hier ist was</a>

Hier sehen Sie, dass man bei overlibmws fast eine Sprache hat: Mit dem onmouseover gibt man an, was geschehen soll, wenn man mit der Maus über einen Link fährt.  Mit onmouseout nimmt man das ganze wieder zurück. Jetzt erfolgt die Anweisung mit return overlib(‚text der zu schreiben ist‘, <Parameter>);“.

Passen Sie aber auf, dass Sie mit den Zeichen “ und ‚ nicht durcheinander kommen, da onmouseover=“ den Beginn der Zeichenkette bestimmt und )“ das Ende, dazwischen dürfen Sie nur mit dem Hochkomma ‚ arbeiten.

Der Aufruf onmouseout=“nd();“ ist immer Standard und beendet die overlibmws-funktion. Die Parameter wie TEXTSIZE,’13px‘, etc. sind meist „Pärchen“ mit Variable und Wert, die mit Kommta getrennt werden. Ja es geht sogar soweit, dass Sie Variablen haben, die Sie in CSS-Klassen ablegen können und hier angeben können.

Vergleichen Sie zu den einzelnen Angaben bitte die overlibmws-Seite http://www.macridesweb.com/oltest/!

Man kann sogar für Datumseingaben einen Kalender einblenden, und mit einem Klick auf einen Tag, hat man in einem Eingabefeld das ausgewählte Datum stehen. Vgl. http://www.macridesweb.com/oltest/calendarmws.html

Da ich nun die overlibmws-Seiten nun mal eingebunden habe, kann ich es mir eigentlich sparen, hier noch mehr Beispiele zu geben! Sie können ja im Quelltext einer Seite, wie dieser hier, alles nachvollziehen.

Ein Rat zum Schluss: Bitte übertreiben Sie es nicht mit den Bubbles oder popup-Texten. Es könnte sein, dass Sie es toll finden, andere sich aber gestört fühlen, wenn Sie mit der Maus über den Text fahren und andauernd diese Popups hochkommen. Verwenden Sie diese Dinge nur, wenn Sie wirklich was zu erklären haben, beispielsweise bei Bildern.

Ja und wegen des SEO’s, vergessen Sie trotzdem nicht bei Links das Title-Attribut und bei Bildern das Alt-Attribut einzustellen, denn Google sieht Ihre Bubbles nicht, da der Crawler kein Javascript versteht!

Gruß

Bernd Klüppelberg

Bisher gibt es keinen Kommentar. Schreiben Sie einen Kommentar!

Schreibe einen Kommentar