 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Mouseover Aktionen mit “Overlib Script” ( von: © Erik Bosrup )
Bitte hier mit Maus über um eine Liste der Beispiele zu sehen
Zunächst bitte auf den Link (unten) klicken um zu der Vorlagen-Datei mit den Skripten und einer detaillierten Beschreibung zu kommen:
http://www.digital-panda.com/overlib/
nach dem Download dieser ZIP-Datei (Vorlage_Overlib.zip) macht Ihr folgendes:
|
|
|
|
1.
|
Bitte entpackt (extrahiert) diese ZIP-Datei (Vorlage_Overlib.zip) in irgend einen Ordner. Ihr werdet 2 ZIP-Dateien vorfinden:
1. scripte.zip
2. tut_overlib.zip
|
|
2.
|
Bitte entpackt (extrahiert) ebenfalls die ZIP-Datei (scripte.zip) in irgend einen Ordner.
Jetzt erhaltet Ihr einen Ordner, der scripte heißt.
1.) kopiert diesen (gesamten Ordner scripte) in Eure lokale Publizierung in den Ordner assets.
2.) kopiert diesen (gesamten Ordner scripte) mittels FTP-Programm auf Euren Server ebenfalls in den Ordner assets.
|
|
3.
|
Die Datei tut_overlib.zip ist eine “Vorlage” für eine neue Seite, die zum besseren Verständnis von Euch als NOF-Projekt geöffnet werden sollte. Dies macht Ihr
“wie gewohnt”. Bitte hier gucken.
|
|
|
|
|
Jetzt macht Ihr folgendes:
In dem Skript (unten) müsst Ihr auf die richtige relative Pfad-Angabe zu dem Ordner “scripte” achten, den Ihr ja bereits mittels FTP-Programm aus der Vorlagen-Datei auf Eurem Server kopiert habt, und zwar in den Ordner “assets”, also:
../assets/scripte/overlib.js
Solltet Ihr das auf der “Home-Seite” machen wollen, müsste es dann heißen:
assets/scripte/overlib.js
da diese sich ja im Stammverzeichnis befindet.
Um das auch bei der lokalen Publizierung sehen zu können, müsst Ihr diesen Ordner “scripte” auch dort in den Ordner “assets” kopieren (wie oben bereits beschrieben).
Zunächst klickt Ihr auf der Seite, wo Ihr diesen Effekt anwenden wollt, auf:
>Layout > HTML > Reiter “Zwischen Head-Tags” > und fügt das Skript (unten) ein.
|
|
|
<script type="text/javascript" src="../assets/scripte/overlib.js"><!-- overLIB (c) Erik Bosrup --></script>
|
|
|
|
... dann klickt Ihr auf:
>Layout > HTML > Reiter “Beginn des Haupttextes” > und fügt das Skript (unten) ein.
|
|
|
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
|
|
|
|
... solltet Ihr das auf mehreren oder auch allen Seiten verwenden wollen, müsst Ihr die Skripte oben eben nicht in die Layout-HTML sondern in die Master-Rahmen-HTML
einfügen.
|
|
|
|
|
|
|
... und nun einige Beispiele von mir:
“Text über einem Link”
|
|
|
Gehe mit der Maus über diesen Text, hier geht es zu einem ähnlichen Thema.
|
|
|
 |
|
|
|
... für das obige Beispiel müsst Ihr folgendes machen:
> Text markieren > im Fenster “Text-Eigenschaften” auf “Link” klicken
> Euren Link wählen
dann ...
> in diesem Fenster unten auf Button HTML klicken > Reiter “In dem Link”
> und fügt das Skript (unten) ein.
Die Texte, die angezeigt werden sollen, müsst Ihr natürlich im Skript in Eure eigenen Texte abändern.
|
|
|
onmouseover="return overlib('<br>Hier könnt Ihr jetzt einen beliebigen Text rein schreiben.<br><br>Wenn Ihr auf diesen Link klickt, dann öffnet sich hier eine Seite mit Erklärungen von <b>Aktionen</b> von NOF.<br><br> ', CAPTION, ' Overlib Skript für einen Text-Link ', FGCOLOR, '#edf1cc', BGCOLOR, '#00547a', BORDER, 3, CAPTIONFONT, 'verdana', CAPTIONSIZE, 2, WIDTH, '300', TEXTFONT, 'verdana', TEXTSIZE, 1, HPOS=RIGHT);" onmouseout="return nd();"
|
|
|
|
|
|
|
“Bild über einem Text”
|
|
|
Wenn Ihr mit der Maus über diesen Text geht, dann öffnet sich ein Bild.
|
|
|
|
|
|
|
... für das obige Beispiel müsst Ihr folgendes machen:
> Text markieren > im Fenster “Text-Eigenschaften” auf “Link” klicken
> Externen Link wählen > Neuer Link:
> (Drop Down Menü) javascript: wählen > und dann eingeben void(0);
dann ...
> in diesem Fenster unten auf Button HTML klicken > Reiter “In dem Link”
> und fügt das Skript (unten) ein.
Den Text, der angezeigt werden soll, müsst Ihr natürlich im Skript in Euren eigenen Text abändern, ebenso wie das Bild.
Dieses Bild (hier “tigerklein.jpg”) muss zuvor in die “Assets-Verwaltung” von NOF mit eingebunden werden, damit es überhaupt gefunden werden kann.
Dazu macht Ihr folgendes:
> “Verwalten-Ansicht” > rechte Maustaste > Neue Datei > sucht das Bild
> hakt Datei immer publizieren an.
|
|
|
onmouseover="return overlib('<center><img src=\'../assets/images/tigerklein.jpg\'></center>',CAPTION,'Dies ist ein Design von uns ...' , FGCOLOR, '#b8b8b8', BGCOLOR, '#bfbca5',BORDER, 5, CAPTIONFONT, 'verdana', TEXTFONT, 'verdana', TEXTSIZE,1 ,HAUTO,VAUTO);" onmouseout="return nd();"
|
|
|
|
|
|
|
“Text über einem Bild”
Wenn Ihr mit der Maus über das Bild geht, dann öffnet sich ein Text.
|
|
|
 |
|
|
|
|
|
|
|
... für das obige Beispiel müsst Ihr folgendes machen:
> Bild markieren > im Fenster “Bild-Eigenschaften” auf “HTML” klicken
> Reiter “Im Tag”
dann ...
> fügt das Skript (unten) ein.
Die Texte, die angezeigt werden sollen, müsst Ihr natürlich im Skript in Eure
eigenen Texte abändern.
|
|
|
onmouseover="return overlib('<br>Hier könnt Ihr jetzt einen beliebigen Text rein schreiben.<br><br>Dies ist ein <b>Design</b> von uns ...<br><br> ', CAPTION, ' Overlib Skript für ein Foto ', FGCOLOR, '#edf1cc', BGCOLOR, '#00547a', BORDER, 3, CAPTIONFONT, 'verdana', CAPTIONSIZE, 2, WIDTH, '300', TEXTFONT, 'verdana', TEXTSIZE, 1, HPOS=RIGHT);" onmouseout="return nd();"
|
|
|
|
|
|
|
“Bild über einem Bild”
Wenn Ihr mit der Maus über dieses Bild geht, dann öffnet sich ein größeres Bild von diesem Bild.
|
|
|
 |
|
|
|
|
|
|
|
|
... für das obige Beispiel müsst Ihr folgendes machen:
> Bild markieren > im Fenster “Bild-Eigenschaften” auf “HTML” klicken
> Reiter “Im Tag”
dann ...
> fügt das Skript (unten) ein.
Den Text, der angezeigt werden soll, müsst Ihr natürlich im Skript in Euren eigenen Text abändern ebenso wie das Bild.
Dieses Bild (hier “tigergross.jpg”) muss zuvor in die “Assets-Verwaltung” von NOF mit eingebunden werden, damit es überhaupt gefunden werden kann. Dazu macht Ihr folgendes:
> “Verwalten-Ansicht” > rechte Maustaste > Neue Datei > sucht das Bild
> hakt Datei immer publizieren an.
... das linke Bild HAUTO und VAUTO, automatische Position Horizontal und Vertikal
|
|
|
onmouseover="return overlib('<center><img src=\'../assets/images/tigergross.jpg\'></center>',CAPTION,'<center>Dies ist ein Design von uns</center>' , FGCOLOR, '#b8b8b8', BGCOLOR, '#bfbca5',BORDER, 5, CAPTIONFONT, 'verdana', TEXTFONT, 'verdana', TEXTSIZE, 1 , HAUTO, VAUTO );"
onmouseout="return nd();"
|
|
|
... das rechte Bild die Breite des Bildes (363px) + Rahmenbreite (2 x 5px) links vom Cursor positioniert
|
|
|
onmouseover="return overlib('<center><img src=\'../assets/images/tigergross.jpg\'></center>',CAPTION,'<center>Dies ist ein Design von uns</center>' , FGCOLOR, '#b8b8b8', BGCOLOR, '#bfbca5',BORDER, 5, CAPTIONFONT, 'verdana', TEXTFONT, 'verdana', TEXTSIZE, 1 , WIDTH, 373, VAUTO, LEFT );" onmouseout="return nd();"
|
|
|
|
|
|
|
“Bild über einem Hotspot”
Wenn Ihr mit der Maus über die Köpfe der Tiger geht, dann öffnet sich jeweils ein größeres Bild vom Kopf.
|
|
|
|
|
|
|
|
|
|
|
... für das obige Beispiel müsst Ihr es genauso machen wie bei dem Bild darüber, nur eben in die HTML vom Hotspot schreiben mit den richtigen Bildangaben.
> Hotspot aufziehen >Externer Link > Neuer Link: > javascript: (wählen)
> void(0); (hinschreiben) >Button “Link” klicken
Falls Ihr irgendwo hin verlinken wollt, dann eben den entsprechenden Link wählen.
|
|
|
Hier geht es zum Download meiner Vorlage ab NOF 10 mit Beispielen für Links im Overlib
|
|
|
|
|
|
|
|
|
|
|
“Overlib-Fenster nicht schließen und mit Links versehen”
Wenn Ihr mit der Maus über diese Texte geht, dann öffnet sich ein Fenster mit Links.
|
|
|
Overlib-Fenster Links mittels Klick schließen mittels Mouse-Over schließen
|
|
|
|
|
|
|
... für das obige Beispiel müsst Ihr folgendes machen:
> Textfeld aufziehen und Euren zu verlinkenden Text markieren.
> Externen Link wählen > unter “Neuer Link:” > javascript: wählen und
> void(0);
hinschreiben.
> in diesem Fenster unten auf Button HTML klicken > Reiter “In dem Link”
> und fügt das Skript (unten) ein.
Die Texte und Links, die angezeigt werden sollen, müsst Ihr natürlich im Skript in Eure
eigenen Texte und eigenen Links abändern.
|
|
|
1) für das Beispiel mittels Klick schließen:
|
|
|
onmouseover="return overlib('<br>Klicke auf einen Link ... <br><br><a href=\'http://www.nof-forum.de/\' target=\'_blank\'>NOF-Forum in eigenem Fenster</a><br><a href=\'http://www.tommyherrmanndesign.com/nof/html/themen-liste.html\'>Themen-Liste</a><br><a href=\'http://www.tommyherrmanndesign.com/nof/html/nof-gast.php\'>Gästebuch</a><br><a href=\'http://www.tommyherrmanndesign.com/nof/html/kontakt.php\'>Kontakt-Formular</a><br><br>', CAPTION, ' Overlib Skript für Links ', STICKY , FGCOLOR, '#edf1cc', BGCOLOR, '#00547a','A STICKY', CLOSECLICK, 'Caption string', CLOSETITLE, 'Fenster schließen', CLOSETEXT, 'Schließen', CLOSECOLOR, '#00FFFF', BORDER, 3, CAPTIONFONT, 'verdana', CAPTIONSIZE, 2, WIDTH, '300', TEXTFONT, 'verdana', TEXTSIZE, 1, HPOS=RIGHT);" onmouseout="return nd();"
|
|
|
2) für das Beispiel mittels Mouse-Over schließen:
|
|
|
onmouseover="return overlib('<br>Klicke auf einen Link ... <br><br><a href=\'http://www.tommyherrmanndesign.com/nof/html/themen-liste.html\'>Themen-Liste</a><br><a href=\'http://www.tommyherrmanndesign.com/nof/html/nof-gast.php\'>Gästebuch</a><br><a href=\'http://www.tommyherrmanndesign.com/nof/html/kontakt.php\'>Kontakt-Formular</a><br><br>', CAPTION, ' Overlib Skript für Links ', STICKY , FGCOLOR, '#edf1cc', BGCOLOR, '#00547a', CLOSETEXT, 'Schließen', CLOSECOLOR, '#00FFFF', BORDER, 3, CAPTIONFONT, 'verdana', CAPTIONSIZE, 2, WIDTH, '300', TEXTFONT, 'verdana', TEXTSIZE, 1, HPOS=RIGHT);" onmouseout="return nd();"
|
|
|
|
|
|
|
“Overlib-Fenster nicht schließen und mit Links versehen”
Wenn Ihr mit der Maus über die Köpfe der Tiger geht, dann öffnet sich jeweils ein größeres Bild vom Kopf, über dem rechten Kopf mit eingebauten Links.
|
|
|
|
|
|
|
|
|
|
|
... für das obige Beispiel müsst Ihr folgendes machen:
... für das obige Beispiel (linker Tigerkopf) müsst Ihr es genauso machen wie bei dem Bild über Bild, nur eben in die HTML vom Hotspot schreiben mit den richtigen Bildangaben.
... für das obige Beispiel (rechter Tigerkopf) macht Ihr folgendes:
> Hotspot über den Tigerkopf ziehen
> Hotspot markieren > im Fenster “Rechteck-Hotspot-Eigenschaften” auf “HTML” klicken
> Reiter “Im Tag”
dann ...
> fügt das Skript (unten) für die Links mit Hotspot-Bild ein.
Die Links, der angezeigt werden soll, müsst Ihr natürlich im Skript in Euren eigenen Links abändern ebenso wie das Bild.
Dieses Bild (hier “tigerkopfpapa.jpg”) muss zuvor in die “Assets-Verwaltung” von NOF mit eingebunden werden, damit es überhaupt gefunden werden kann. Dazu macht Ihr folgendes:
> “Verwalten-Ansicht” > rechte Maustaste > Neue Datei > sucht das Bild
> hakt Datei immer publizieren an.
|
|
|
onmouseover="return overlib('<center><img src=\'../assets/images/tigerkopfpapa.jpg\'></center>',CAPTION,'Klicke auf einen Link ... <br><br><a href=\'http://www.nof-forum.de/\' target=\'_blank\'>NOF-Forum in eigenem Fenster</a><br><a href=\'http://www.tommyherrmanndesign.com/nof/html/themen-liste.html\'>Themen-Liste</a><br><a href=\'http://www.tommyherrmanndesign.com/nof/html/nof-gast.php\'>Gästebuch</a><br><a href=\'http://www.tommyherrmanndesign.com/nof/html/kontakt.php\'>Kontakt-Formular</a>', STICKY , FGCOLOR, '#b8b8b8', BGCOLOR, '#bfbca5','A STICKY', CLOSECLICK, 'Caption string', CLOSETITLE, 'Fenster schließen', CLOSETEXT, 'Schließen', CLOSECOLOR, '#0000FF',BORDER, 5, CAPTIONFONT, 'verdana', TEXTFONT, 'verdana', TEXTSIZE,1 ,HAUTO,VAUTO);" onmouseout="return nd();"
|
|
|
|
|
|
|
“Overlib-Fenster nicht schließen und mit Anker-Links versehen”
Wenn Ihr mit der Maus über dieses kleine Icon unten geht, dann öffnet sich mein Übersichts-Fenster für die Beispiele auf dieser Seite.
|
|
|
|
|
|
|
... für das obige Beispiel müsst Ihr folgenden Code verwenden:
Die Texte und Links, die angezeigt werden sollen, müsst Ihr natürlich im Skript in Eure
eigenen Texte und eigenen Links abändern.
|
|
|
onmouseover="return overlib('<br>Klicke auf einen Link zum Beispiel ... <br><br><b>Dieses Fenster folgt dem Scroll</b><br><br><a href=\'http://www.tommyherrmanndesign.com/nof/html/mouse-overlib.html#Beispiele\'>Text über Link</a><br><a href=\'http://www.tommyherrmanndesign.com/nof/html/mouse-overlib.html#OverlibImageOnText\'>Bild über Text</a><br><a href=\'http://www.tommyherrmanndesign.com/nof/html/mouse-overlib.html#OverlibTextOnImage\'>Text über Bild</a><br><a href=\'http://www.tommyherrmanndesign.com/nof/html/mouse-overlib.html#OverlibImageOnImage\'>Bild über Bild</a><br><a href=\'http://www.tommyherrmanndesign.com/nof/html/mouse-overlib.html#OverlibImageOnHotspot\'>Bild über Hotspot</a><br><a href=\'http://www.tommyherrmanndesign.com/nof/html/mouse-overlib.html#OverlibLinkOnText\'>Text mit Link</a><br><a href=\'http://www.tommyherrmanndesign.com/nof/html/mouse-overlib.html#OverlibImageOnHotspotLink\'>Bild über Hotspot mit Link</a><br><a href=\'http://www.tommyherrmanndesign.com/nof/html/mouse-overlib.html#OverlibAnkerLink\'>Text mit Anker-Links</a><br><br><a href=\'http://www.tommyherrmanndesign.com/nof/html/mouse-overlib.html#\'>nach oben</a><br><br>', CAPTION, ' Overlib Skript für Links ', FOLLOWSCROLL, STICKY , RELX, 600, RELY, 150, FGBACKGROUND, 'OverlibBgDot.gif', FGCOLOR,'','A STICKY', CLOSECLICK, 'Caption string', CLOSETITLE, 'Fenster schließen', CLOSETEXT, 'Schließen', CLOSECOLOR, '#00FFFF', TEXTCOLOR, '#FFFF80', BORDER, 3, CAPTIONFONT, 'verdana', CAPTIONSIZE, 2, WIDTH, '300', TEXTFONT, 'verdana', TEXTSIZE, 1, HPOS=RIGHT);" onmouseout="return nd();"
|
|
|
|
|
|
|
“Overlib-Fenster nicht schließen und mit Radio-Links versehen”
Wenn Ihr mit der Maus über den Text geht, dann öffnet sich ein Overlib-Fenster mit eingebauten Links zu einigen Radio-Sendern in einem zusätzlichen Fenster, sodass Ihr dann im Hintergrund weiter Radio hören könnt.
... aus rechtlichen Gründen verlinke ich hier lediglich auf die jeweilige Homepage der Sender, da ein direkter Link zum Live-Stream des Radiosenders laut Gema gebührenpflichtig ist. Ihr müsst Euch dann also selbst “durcharbeiten”.
|
|
|
Radio hören
|
|
|
|
|
|
|
... für das obige Beispiel müsst Ihr folgenden Code verwenden:
Die Texte und Links, die angezeigt werden sollen, müsst Ihr natürlich im Skript in Eure
eigenen Texte und eigenen Links abändern.
|
|
|
onmouseover="return overlib('<br>Klicke auf einen Link ... <br><br><a href=\'http://www.rs2.de/index.html\' target=\'_blank\'>Berlin RS2</a><br><a href=\'http://www.br-online.de/bayern3/index.xml\' target=\'_blank\'>Bayern 3</a><br><a href=\'http://www.rtlradio.de/index.php\' target=\'_blank\'>RTL</a><br><a href=\'http://www.wdr.de/radio/wdr2/index.html\' target=\'_blank\'>WDR 2</a><br><br><a href=\'http://www.tommyherrmanndesign.com/nof/html/radio.html\'>zu anderen Radio-Alternativen</a><br><br>', CAPTION, ' Radio hören ... ', STICKY , FGCOLOR, '#D0C6C6', BGCOLOR, '#687796','A STICKY', CLOSECLICK, 'Caption string', CLOSETITLE, 'Fenster schließen', CLOSETEXT, 'Schließen', CLOSECOLOR, '#00FFFF', BORDER, 3, CAPTIONFONT, 'verdana', CAPTIONSIZE, 2, WIDTH, '300', TEXTFONT, 'verdana', TEXTSIZE, 1, HPOS=RIGHT);" onmouseout="return nd();"
|
|
|
|
|
|
|
“Bild über einem Hotspot und Cursor mit Lupe ersetzen”
Wenn Ihr mit der Maus über die Nase des rechten Tigers geht, dann öffnet sich ein größeres Bild von diesem Bereich und der Mauszeiger wechselt in eine Lupe.
Achtung: diese Option funktioniert nur im “Internet Explorer” korrekt, dagegen z.B. nicht in allen Fällen im “Firefox”. Beim “Internet Explorer” kann man die Lupe in allen diesen Beispielen auf dieser Seite verwenden, im “Firefox” dagegen nur in der HTML der “Bild-Eigenschaften” und nicht in der HTML des “Hotspots” oder eines “Links”.
|
|
|
|
|
|
|
|
|
|
|
Für die Lupe, die nichts mit “Overlib” zu tun hat, müsst Ihr Euch eine Datei erstellen (hier: lupe1.cur, es könnte auch eine .gif Datei sein) und diese in meinem Beispiel in den Ordner “HTML” Eures Projektes kopieren.
Hier könnt Ihr Euch meine Datei “lupe1.cur” herunter laden, so sieht die Lupe aus
Dann fügt Ihr den Code (unten) im Fenster “Bild Eigenschaften” (auf “HTML”) klicken ein:
|
|
|
vor dem Tag:
|
|
|
|
<p style="cursor:url(lupe1.cur), auto;">
|
|
|
|
nach dem Tag:
|
|
|
|
</p>
|
|
|
|
|
|
|
|
“Bild über einem Text verlinken”
Wenn Ihr mit der Maus über diesen Text geht, dann öffnet sich das Forum-Logo, das ich mit dem forum.de verlinkt habe.
|
|
|
Hier geht es zum NetObjects Fusion Forum
|
|
|
|
|
|
|
... für das obige Beispiel müsst Ihr folgenden Code verwenden:
Das Bild und den Link, das angezeigt werden soll, müsst Ihr natürlich im Skript in Euren eigenen Text und eigenen Link abändern.
|
|
|
onmouseover="return overlib('<a href=\'http://www.nof-forum.de/\' target=\'_blank\'><center><img src=\'../assets/images/NOF-FORUM-DE.jpg\'></center>',CAPTION,'Klicke auf das Bild ... </a>', STICKY , FGCOLOR, '#0000FF', BGCOLOR, '#0099FF','A STICKY', CLOSECLICK, 'Caption string', CLOSETITLE, 'Fenster schließen', CAPCOLOR, '#FFFF00', CLOSETEXT, 'Schließen', CLOSECOLOR, '#00FFFF', BORDER, 5, CAPTIONFONT, 'verdana', TEXTFONT, 'verdana', TEXTSIZE,1 ,HAUTO,VAUTO);" onmouseout="return nd();"
|
|
|
... es gibt noch eine Vielzahl anderer Befehle, die ich hier nicht alle aufführen kann.
Bitte guckt Euch die möglichen Befehle hier an:
http://www.bosrup.com/web/overlib/?Command_Reference
oder z.B. hier:
http://www.macridesweb.com/oltest/commandRef.html
|
|
|
|
|
|
|
Viel Erfolg!
|
|
|
|
zurück
|
|
|
|
|
|
|
|
