overLIB in NetObjects Fusion integrieren/einbauen - Tutorial/Anleitung


overLIB (copyright Erik Bosrup) basiert auf JavaScript und ermöglicht Euch, Eure Website mit kleinen Popup-Info-Boxen (wie Tooltips) zu spicken. overLIB lässt sich relativ einfach in NOF integrieren und kann auf vielfältige Weise eine Bereicherung für Eure Website darstellen.

Für den Einbau von overLIB in NetObjects Fusion benötigen wir zu allererst die overLIB-Scripte. Diese könnt Ihr Euch unter folgendem Link downloaden. http://www.bosrup.com/web/overlib/

 

Screen10




Die heruntergeladene zip-Datei muss zunächst entpackt werden. Den Inhalt des entpackten Ordners kopieren wir in einen neuen Ordner mit dem Namen “overlibscripts”. Oder aber Ihr benennt den entpackten Ordner einfach in “overlibscripts” um.

Der Inhalt des Ordners sollte dann (Stand 22.Juni 2012) in etwa wie im folgenden Screen aussehen, wobei ich nicht ausschließe dass irgendwann vielleicht auch Dateien mit anderem Namen hinzukommen können.

 

Screen1.1



Damit die overLIB-Scripte später dann auch ihre Funktion erfüllen können, müssen wir den Ordner “overlibscripts” nun noch im richtigen Verzeichnis platzieren.
Wollt Ihr overLIB auch offline, bei der lokalen Publizierung testen können, so muss der Ordner “overlibscripts” zunächst in den Ordner “lokale Publizierung” kopiert werden. Wenn Ihr euer Projekt bereits einmal lokal publiziert habt, solltet ihr im Ordner “lokale Publizierung” u.a. die Ordner “assets” und “html” sowie die index.html finden.  (bei Publizierung nach Assettyp-solltet Ihr bislang nicht nach Assettyp publizieren, so solltet Ihr das für die Anwendung dieses Tutorials an dieser Stelle ändern)
Neben diesen Dateien und Ordnern platziert Ihr den Ordner “overlibscripts”.

 

Screen1




Um overLIB später auch auf Eurer Website ausführen zu können, müsst Ihr den Ordner “overlibscripts” natürlich auch auf Eurem Webserver platzieren. Hierzu nutzt Ihr ein FTP-Programm wie FileZilla oder SpeedCommander, wählt Euch mit euren Zugangsdaten auf Euren Server auf und fügt den Ordner im Rootverzeichnis Eures Projektes ein. Der Ordner muss dort zu finden sein, wo auch die index.html und die Ordner “assets” und “html” zu sehen sind.

 

Screen2




Im nächsten Schritt tragen wir die Verlinkungen zu den overLIB-Scripten in unser Seiten-html ein, damit diese dann später auch gefunden werden.
Da die Startseite (index.html) als einzige Seite Eures Projekts im Rootverzeichnis liegt und nicht wie alle anderen Seiten im html-Ordner, muss die Pfadangabe für die Startseite auch minimal anders lauten als für die Unterseiten. Entscheidet also nun, welchen der beiden angegeben Codeschnipsel Ihr in Eurem Projekt benötigt und kopiert ihn in Eure Zwischenablage.

 

Code für die Startseite

<script type="text/javascript" src="./overlibscripts/overlib.js"><!-- overLIB (c) Erik Bosrup --></script>

 

Code für die Unterseiten

<script type="text/javascript" src="../overlibscripts/overlib.js"><!-- overLIB (c) Erik Bosrup --></script>




Wechselt nun zu NOF, öffnet die Seite eures Projekts, auf welcher overLIB laufen soll und klickt einmal ins Layout der Seite oder drückt auf der Tastatur die Taste F9.
Damit werden auf der Eigenschaftenpalette die Layouteigenschaften aufgerufen. Ihr klickt nun im nächsten Schritt den html-Button auf der Eigenschaftenpalette an und es öffnet sich ein Fenster. In diesem Fenster müssen die Verlinkungen zu den overLIB-Datein zwischen den Headtags eingetragen werden. Da sich die Ansicht dieses Fensters ab Version 11 gravierend verändert hat, werde ich im folgenden Screenshot beide Ansichten für diesen Arbeitschritt berücksichtigen.

Bei den älteren NOF-Versionen ist das Fenster zweigeteilt. Wählt in der Mitte des Fensters mit einem Klick den Reiter “Zwischen Head-Tags”  an und fügt im unteren Teil des Fensters den Code aus Eurer Zwischenablage ein.

Bei den neueren NOF-Versionen findet Ihr am oberen Fensterrand eine Reihe kleiner Symbole. Klickt bitte das zweite Symbol an (Zwischen Head Tags) und fügt dort, wo nun der Cursor blinkt, den Code aus Eurer Zwischenablage ein.

 

Screen3




Nachdem wir den Link zu den overLIB-Scripten zwischen den Head-Tags eingefügt haben, ist noch eine zweite Einfügung notwendig. Der Code für diese Einfügung ist für Startseite und Unterseiten identisch und sieht wie folgt aus.

Code für Einfügung - Beginn des Haupttextes

<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>



Kopiert Euch diesen Code in eure Zwischenablage und wechselt nun bei den älteren NOF-Versionen mit einem Klick zum Reiter “Beginn des Haupttextes”. Fügt im unteren Teil des Fensters den Code aus Eurer Zwischenablage ein und bestätigt Eure Einfügung mit einem Klick auf den OK-Button.

Bei den neueren NOF-Versionen klickt Ihr am oberen Fensterrand bitte das vierte Symbol an (Beginn des Haupttextes) und fügt dort, wo nun der Cursor blinkt, den Code aus Eurer Zwischenablage ein. Eure Einfügung bestätigt Ihr wieder indem Ihr den OK-Button am unteren Fensterrand anklickt.

Screen3a




Damit wären auch schon alle Vorbereitungen getroffen, um overLIB in unserer Seite zu nutzen und wir können beginnen, einige Anwendungsmöglichkeiten auszuprobieren.
 

Textbox über Text


Ich werde im weiteren Tutorial Textabschnitte die zur Demo dienen farbig hervorheben, damit Ihr sofort erkennt, wo Ihr mit der Mouse die overLIB-Funktion testen könnt.
Wie Ihr  eine Textbox über einfachem Text einblenden lassen könnt, zeigt der folgende Screenshot Schritt für Schritt.
Ich schildere den Vorgang dennoch kurz mit ein paar Sätzen. Zunächst markiert Ihr den Textabschnitt, über welchem die Textbox aufgehen soll und klickt auf der Eigenschaftenpalette den Button “Link”. Es öffnet sich ein Fenster, in welchem Ihr im oberen Pulldownmenü die Auswahl “externer Link” trefft. Darunter findet Ihr ein weiteres Pulldownmenü welches Ihr auf javascript: stellt.
Im daneben befindlichen Eingabefeld tragt Ihr bitte folgenden Code ein und bestätigt die Eingabe rechts daneben mit einem Klick auf den Button “speichern”.

Code zur Eingabe neben der Auswahl “javascript:”

void(0);



Im Anschluss daran klickt Ihr unten rechts am Fensterrand den html-Button. Es öffnet sich erneut ein Fenster, welches sich wieder in den neueren NOF-Versionen deutlich von den älteren Versionen unterscheidet. Deshalb beinhaltet der nächste Screenshot auch wieder beide Ansichten. Kopiert Euch nun in Vorbereitung auf den nächsten Schritt den folgenden Code in eure Zwischenablage.

Der Code muss in allen vorgeführten Varianten auf Eure individuellen Bedürfnisse angepasst werden, dies gilt insbesondere für die Texte, die in der Box angezeigt werden. Aber auch das Aussehen der Box lässt sich beeinflussen. Ich werde im gesamten Tutorial die Bereiche im Code, die geändert werden müssen rot hervorheben und alle die Bereiche die zur optischen Anpassung geändert werden können grün hervorheben. (Die Zeichenfolge <br> erzeugt einen Zeilenumbruch.)

Code zur Einfügung im Link-html

onmouseover="return overlib('<br>Dieser Text könnte eine Beschreibung zu einem Stichwort sein.<br><br>Wenn der Seitenbesucher mit seiner Maus über einzelne Stichworte fährt, bekommt er zusätzliche Informationen eingeblendet.<br><br> ', CAPTION, ' overLIB / Text über Text ', FGCOLOR, '#FFFFFF', BGCOLOR, '#656565', BORDER, 2, CAPTIONFONT, 'verdana', CAPTIONSIZE, 2, WIDTH, '300',  TEXTFONT, 'verdana', TEXTSIZE, 1, HPOS=RIGHT);" onmouseout="return nd();"



Bei den älteren NOF-Versionen ist das Fenster wieder zweigeteilt. Wählt in der Mitte des Fensters mit einem Klick den Reiter “In dem Link”  an und fügt im unteren Teil des Fensters den Code aus Eurer Zwischenablage ein.

Bei den neueren NOF-Versionen klickt Ihr bitte das zweite Symbol am oberen Fensterrand an (Innen) und fügt dort, wo nun der Cursor blinkt, den Code aus Eurer Zwischenablage ein. Eure Eingabe bestätigt Ihr mit einem Klick auf den OK-Button und schließt den Vorgang mit einem Klick auf den Button “Link” im noch geöffneten Fenster ab.

Screen4




Text über Link


Um eine Textbox über einem Link einblenden zu lassen, geht Ihr wie folgt vor. Markiert zunächst den Textabschnitt den Ihr verlinken wollt und klickt auf der Eigenschaftenpalette auf Link. Im sich öffnenden Fenster wählt Ihr zunächst im oberen Pulldownmenü, ob Ihr intern, extern oder zu einer Datei verlinken wollt. Für mein Beispiel habe ich mich für einen externen Link entschieden. Deshalb habe ich im Anschluss an meine Auswahl im darunter liegenden Eingabefeld den Link eingetragen und auf speichern geklickt. Alle folgenden Schritte sind gleich, egal für welche Art Link Ihr euch entschieden habt. Ihr klickt nun als nächstes den html-Button am unteren Fensterrand und fügt den folgenden Code im Link-html ein.

Hierzu wird, iwe schon im letzten beispiel erwähnt, in den älteren NOF-Versionen der Reiter “in dem Link” aktiviert um den Code im darunter liegenden Teil des Fensters einzufügen. In den neueren NOF-Versionen klickt Ihr das zweite Icon am oberen Fensterrand “Innen” und fügt den Code dort ein, wo der Cursor nun blinkt. In beiden Varianten wir der Vorgang mit einem Klick auf “OK” gefolgt von einem Klick auf “Link” abgeschlossen.


Code zur Einfügung im Link-html

onmouseover="return overlib('<br>Dieser Text könnte eine Beschreibung zu dem sein, was den Seitenbesucher bei Klick auf den Link erwartet. Also z.B.:<br><br>Lieber Seitenbesucher, wenn Sie auf diesen Link klicken, gelangen Sie zur NOF-Academy.<br><br>', CAPTION, ' overLIB / Text über einem Link ', FGCOLOR, '#FFFFFF', BGCOLOR, '#656565', BORDER, 2, CAPTIONFONT, 'verdana', CAPTIONSIZE, 2, WIDTH, '300',  TEXTFONT, 'verdana', TEXTSIZE, 1, HPOS=RIGHT);" onmouseout="return nd();"



Zu erwähnen wäre ncoh, dass Ihr bei der Wahl “externer Link” nicht versäumen solltet am unteren Fensterrand das Link-Ziel auf “bestehend” zu stellen, damit der Seitenbesucher bei Klick auf den Link nicht Eure Seite verlässt, sondern der Link in einem neuen Tab/Fenster öffnet.

Den gesamten Vorgang könnt Ihr auch wieder über den folgenden Screenshot anschaulich nachvollziehen.

Screen5




Text über einem Bild

Mit einem Klick auf das kleine Bildsymbol gefolgt von einem Klick ins Layout öffnen wir ein kleines Fenster in welchem wir in den Assetordner unseres Projekts navigieren. Ich bevorzuge es alle verwendeten Dateien zunächst von Hand in den Assetordner zu kopieren und von dort aus darauf zuzugreifen. So vermeidet man Probleme die ggf. auftreten könnten, wenn wir irgendwann mal unsere Festplatte aufräumen und Pfade zu verwendeten Dateien dabei eventuell verändert werden.
Auch in diesem Fall habe ich das gewünschte Bild bereits im Assetordner platziert und wähle es nun aus, um es in mein Projekt einzufügen.
 

 



Die hierbei häufig eingeblendete Nachfrage von NOF bestätigt Ihr bitte immer wie folgt.
 

Meldung



Nachdem Ihr das Bild eingefügt habt, markiert Ihr es mit einem einfachen Klick auf das Bild und klickt im Anschluss den html-Button auf der Eigenschaftenpalette. Es öffnet sich ein Fenster, welches sich in den neueren NOF-Versionen wieder deutlich von dem Fenster der älteren NOF-Versionen unterscheidet.
Nutzer der älteren Versionen aktivieren in der Mitte des Fensters den Reiter “Im Tag” um darunter den folgenden Code einzufügen.
Nutzer neuerer NOF-Versionen klicken am oberen Fensterrand das zweite Icon an (Innen) um den Cursor an der passenden Stelle zu aktivieren und dort den kopierten Code einzufügen.
In beiden Varianten wird der Vorgang mit einem Klick auf den OK-Button am unteren Rand des jeweiligen Fensters abgeschlossen.


Code zur Einfügung im Bild-html

onmouseover="return overlib('<br>Auf diesem Bild sehen Sie eine junge Kohlmeise, die in einem Birnenbaum auf die Fütterung durch die Elternvögel wartet.<br><br> ', CAPTION, ' overLIB / Text über einem Bild ', FGCOLOR, '#FFFFFF', BGCOLOR, '#656565', BORDER, 2, CAPTIONFONT, 'verdana', CAPTIONSIZE, 2, WIDTH, '300',  TEXTFONT, 'verdana', TEXTSIZE, 1, HPOS=RIGHT);" onmouseout="return nd();"




clearpixel




Bild über Text

Zuerst markiert Ihr den Textabschnitt, über welchem sich die Box mit dem Bild öffnen soll und klickt auf der Eigenschaftenpalette den Button “Link”. Es öffnet sich ein Fenster, in welchem Ihr im oberen Pulldownmenü die Auswahl “externer Link” trefft. Darunter findet Ihr ein weiteres Pulldownmenü welches Ihr auf javascript: stellt.
Im daneben befindlichen Eingabefeld tragt Ihr bitte folgenden Code ein und bestätigt die Eingabe rechts daneben mit einem Klick auf den Button “speichern”.

Code zur Eingabe neben der Auswahl “javascript:”

void(0);



Im Anschluss daran klickt Ihr unten rechts am Fensterrand den html-Button. Es öffnet sich erneut ein Fenster, welches sich wieder in den neueren NOF-Versionen deutlich von den älteren Versionen unterscheidet. Deshalb beinhaltet der nächste Screenshot auch wieder beide Ansichten. Kopiert Euch nun in Vorbereitung auf den nächsten Schritt den folgenden Code in eure Zwischenablage.

Code zur Einfügung im Link-html

onmouseover="return overlib('<center><img src=\'./assets/images/frischling.png\'></center>',CAPTION,'Besuch im Wildgehege' , FGCOLOR, '#656565', BGCOLOR,'#656565', BORDER, 2, CAPTIONFONT, 'verdana', TEXTFONT, 'verdana', TEXTSIZE,1 ,HAUTO,VAUTO);" onmouseout="return nd();"



Bei den älteren NOF-Versionen ist das Fenster wieder zweigeteilt. Wählt in der Mitte des Fensters mit einem Klick den Reiter “In dem Link”  an und fügt im unteren Teil des Fensters den Code aus Eurer Zwischenablage ein.

Bei den neueren NOF-Versionen klickt Ihr bitte das zweite Symbol am oberen Fensterrand an (Innen) und fügt dort, wo nun der Cursor blinkt, den Code aus Eurer Zwischenablage ein. Eure Eingabe bestätigt Ihr mit einem Klick auf den OK-Button und schließt den Vorgang mit einem Klick auf den Button “Link” im noch geöffneten Fenster ab.

Das im Code angegebene Bild existiert im eigentlichen Sinne in euerem NOF-Projekt nicht und muss deshalb als zusätzliches Asset ins Projekt eingebunden werden. Wie Ihr das macht, könnt Ihr hier nachlesen.

Screen7







Bild über Bild



 






Bild über Bild






Code zur Einfügung im Bild-html

onmouseover="return overlib('<center><img src=\'./assets/images/C012g.jpg\'></center>',CAPTION,'<center>Besuch im Wildgehege</center>' , FGCOLOR, '#656565', BGCOLOR,'#656565',BORDER, 2, CAPTIONFONT, 'verdana', TEXTFONT, 'verdana', TEXTSIZE, 1 , HAUTO, VAUTO );"onmouseout="return nd();"

 

clearpixel

 




Zu erwähnen bleibt noch folgendes: Da bei der letzten Version die Verlinkung zu den zusätzlichen Bildern nicht direkt über NOF, sondern viel mehr von Hand erfolgt, befinden sich die Bilder auch nicht automatisch in unserem Projekt und müssen deshalb ebenso wie die Lyteboxscripte von Hand auf den Server und in den Ordner lokale Publizierung kopiert werden. In beiden Fällen gehören die Bilder in den Ordner assets > images

Viel Spaß! :-)

 


Projekt Vorlage- NOF9     - overLIB in NOF    ZIP/1,97 MB

Projekt Vorlage- NOF10   - overLIB in NOF    ZIP/1,98 MB

Projekt Vorlage- NOF11   - overLIB in NOF    ZIP/1,98 MB

Projekt Vorlage- NOF12   - overLIB in NOF    ZIP/1,99 MB                                  Wie öffne ich die Vorlage richtig und verlustfrei?
 

 

Die Seite ist zwar nicht extrem groß, aber ich habe bei den Screenshots sehr großen Wert auf Qualität gelegt und somit kann der Seitenaufbau je nach Verbindung schonmal recht zähflüssig laufen.

 


>>  NOF-Academy - Anleitungen, Tutorials, Templates, Vorlagen, Workshops, Online-Support & Hotline für NetObjects Fusion  <<

Das könnte dich auch interessieren:

Die Lytebox-Galerie in NetObjects Fusion einbinden
Informationen und Demos zu SwissKnife for NOF - Gratis Komponenten für NetObjects Fusion
Eine horizontale CSS-Navigation mit NetObjects Fusion erstellen
Eine vertikale CSS-Navigation mit NetObjects Fusion erstellen
Eine einfache CSS-Klapp-Navigation in NetObjects Fusion
Eine Homepage für mobile Geräte mit NetObjects Fusion
Zusätzliche Assets in NetObjects Fusion (NOF) einbinden
Bildbearbeitung mit GIMP für Anfänger - Schritt für Schritt erklärt
Die Assetverwaltung in NetObjects Fusion aufräumen
WOW-Slider in NetObjects Fusion einbinden - Schritt für Schritt erklärt
Ein spamsicheres Formular für deine Website mit NetObjects Fusion
Google-WebFonts in deine NetObjects Fusion Website einbinden
Ein fixierter Hover-Button am Bildschirmrand
CSS Sticky Footer in NetObjects Fusion