Mouseover Aktionen mit “Overlib Script”

Die Download Vorlage für NOF 9 (.zip) enthält 2 Dateien. (Klick für Download)
Download Vorlage NOF NetObjects 7.5 (kann in NOF 8 importiert werden)

Ein Vorlage für für NOF 9, die auch in NOF 10 importiert werden kann, welche wie gewohnt über die Funktion
Online Ansicht-->Bestehende Site öffnen-->Aus Vorlage öffnen als neues Projekt abgespeichert wird.
Einen Ordner “scripte” welcher einfach in das Projektverzeichnis “Lokale Publizierung”-->”assets” kopiert wird, welches man aus der Vorlage erstellt hat. In diesem Ordner liegen die neuesten overlib Scripte, die zur Anzeige benötigt werden.

Vorbereitung zur Einfügung des “Overlib Scrips” in NOF NetObjects Fusion

Kopiere oder verschiebe den Ordner “scripte” aus dem Download in das Verzeichnis “assets” der Lokalen Publizierung deines Projektes, also dort wo auch der Ordner “html” liegt.

Die Einfügung des “Overlib Scripts” in NOF NetObjects Fusion

Wenn das overlib Script auf meheren Seiten deiner Website zum Einsatz kommen soll, dann füge das Script in das MASTERRAHMEN-HTML deiner Seite ein. Beachte aber dabei, dass du für die “Home” also deine index.html einen anderen Verzeichnispfad zum Script angeben musst als auf deinen Unterseiten.
Soll das Script nur auf einer bestimmten Seite deines NOF-Projektes laufen, dann fügt das Script in das LAYOUT-HTML deiner Seite ein.
Zur Erinnerung: Alles was ihr in das “Master-HTML” einfügt, steht euch auf allen Seiten eures Projektes auch zur Verfügung.

In der “Masterrahmen Eigenschaften” Palette mit einen Klick auf den Button “HTML” das Dialogfeld aufrufen, dort geben wir folgendes ein “zwischen den Head Tags”:

Overlib Script soll auf der HOME (index.html) laufen

<script type="text/javascript" src="assets/scripte/overlib.js"></script>

ACHTUNG (!)
Liegt die Seite auf welcher overlib laufen soll NICHT im Root Verzeichnis (dort wo die index.html liegt),
sondern ist eine Unterseite im Ordner “html”, dann muss die Pfadangabe zum Script entsprechend geändert werden!
Das bedeutet auch, dass Ihr der Seite “Home” (index.html) einen eigenen Master-Rahmen zuweisen müsst, da ansonsten
das Script auf den Unterseiten jedesmal überschrieben wird.
Master-Rahmen Eigenschaften-->Hinzufügen/Bearbeiten-->Hinzufügen-->Name vergeben-->bei “Basiert auf:”, wählt Ihr den Master-Rahmen den Ihr aktuell für Eure “Home” eingestellt habt.
Jetzt muss die Pfadangabe zum Script natürlich noch in den neuen Master-Rahmen eingetragen werden: Dazu verwendet Ihr das obere Script also das OHNE die ../

Overlib Script soll auf allen Unterseiten laufen:

<script type="text/javascript" src="../assets/scripte/overlib.js"></script>

Noch eine Einfügung ist notwendig:
“BEGINN DES HAUPTTEXTES”
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>

zum Seitenanfang

Einstellungen die veränderbar sind (betrifft die Einfügungen “Im-Tag” der gezeigten Beispiele):

onmouseover="return overlib('Hier könnt ihr natürlich auch bestimmen wie die overlib Box aussehen soll. Ihr könnt Farben, Font, Fontgröße, die Breite der Box, den Rahmen um die Box, <b>width (momentan 400)</b> völlig frei bestimmen.', CAPTION, '.:: Konfiguration des Erscheinungsbildes ::.', FGCOLOR, '#edf1cc', BGCOLOR, '#00547a', BORDER, 3, CAPTIONFONT, 'verdana', WIDTH, '400', TEXTFONT, 'verdana', TEXTSIZE, 1, HPOS=RIGHT)

;" onmouseout="return nd();"

Versucht euch ein wenig an den Einstellungen, bis ihr euren Stil gefunden habt.

FGCOLOR = die Farbe Hintergrunds auf dem der Fliesstext liegt
BGCOLOR = die Farbe des umgebenden Rahmens
BORDER = die Dicke des Rahmens in px
CAPTIONFONT = der Font welcher in der Überschrift verwendet wird
WIDTH = Die Breite der Box
TEXTFONT = der Font welcher im Fliesstext verwendet wird
TEXTSIZE = die Schriftgröße des Fliesstextes
HPOS = an welcher Stelle neben der Maus die Box erscheinen soll

Zusätzlich könnt Ihr natürlich noch eintragen:

CAPTIONSIZE = 1 (oder beliebige Größe - 2 entspricht ungefähr 12px)
CAPTIONCOLOR = #eureFarbe (Bestimmt die Farbe der Überschrift)
Achtet bei der Einfügung, auf die richtige Schreibweise! Orientiert euch an den anderen Angaben.

Es ist auch möglich Umbrüche im Fliesstext zu setzen mit: <br> Seht euch dazu das Beispiel “Text über Hotspot” an.

1) Text über Textlink der eine neues Fenster öffnet

Ich bin ein Link (Ein Link der ein neues Fenster öffnet)

Hier wird der Aufruf in das “Link-HTML” eingetragen.
Text markieren-->Link-->verlinken(Ziel: _blank öffnet ein neues Fenster)-->HTML...-->Im Tag

2) Text über Grafik ohne Link

Hier wird der Aufruf in das “Objekt-HTML” eingetragen.
Grafik markieren-->Eigenschaften Palette-->HTML-->Im Tag

3) Text über Grafik mit Link

Grafik markieren-->Link-->verlinken-->HTML...-->Im Tag

4) Text über Hotspot auf einer Grafik mit Bild im Tooltip

Hotspot Werzeug auswählen-->Hotspot auf der Grafik positionieren und verlinken-->Link schliessen-->Hotspot HTML-->Im Tag
Zusätzlich wird hier das <img> Tag eingefügt im oben gezeiten Beispiel folgendermassen:

“center” zentriert das Bild zusätzlich in der Tooltip Mitte.

5) Bild über Bild

Wenn Overlib Bilder anzeigen soll, dann müsst Ihr im Aufruf (das was “Im-Tag” eingetragen ist, auch auf den richtigen Pfad überprüfen.
Wenn Ihr eine andere Version eines Bildes anzeigen wollt, so bindet dies zuvor in der “Assets” bzw. “Verwalten” Ansicht von NOF mit ein. Dazu wechselt in die “Assets” bzw. “Verwalten” Ansicht und klickt mit der rechten Maustaste auf die weisse Fläche.
Neue Datei-->das Bild auswählen-->das Häkchen bei “Immer publizieren” setzen und bestätigen. Somit ist das Bild in euer Projekt eingebunden und kann vom Overlib Script in NOF NetObjects Fusion auch angezeigt werden.

Grafik oder Bild einfügen-->markieren-->Eigenschaftenpalette HTML-->Im Tag

6) Bild über Text

Ein Bild über Text mit overlib

Text markieren-->Eigenschaftenpalette Link-->externer Link-->javascript auswählen-->void(0); dort eintragen-->LinkHTML-->Im Tag

all images except Screenshots: www.istockphoto.com

zum Seitenanfang