NOF-Forum  |  Referenzen  |  Kontakt  |  Impressum  |  Sitemap

NetObjects Fusion - Tutorials
NOF Tutorials und Hilfe von Thomas Frei-Herrmann

Mouseover Aktionen mit “Overlib Script”  ( von: © Erik Bosrup ) - Alternativen: Infobox und PowerTip

Bitte hier mit Maus über um eine Liste der Beispiele zu sehen und einem Vorlagen-Download von mir.

Zunächst bitte auf den Link (unten) klicken um zu der Vorlagen-Datei mit den Skripten und einer detaillierten Beschreibung zu kommen:

zu den Skripten - die Skripte habe ich am 12.06.2013 für den IE 10 angepasst, siehe Bemerkung unten.


nach dem Download dieser ZIP-Datei (002-Vorlage_Overlib.zip) macht Ihr folgendes:

1.

Bitte entpackt (extrahiert) diese ZIP-Datei (002-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”

Overlib Beispiele

Gehe mit der Maus über diesen Text, hier geht es zu einem ähnlichen Thema und Ihr könnt natürlich so eine Box an weiteren Stellen des Textes, mit oder ohne Link einfügen.

... 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”

Overlib Beispiele

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.

Overlib Beispiele

... 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” - guckt auch hier für ein Bild ohne Rahmen als Hintergrund

Wenn Ihr mit der Maus über dieses Bild geht, dann öffnet sich ein größeres Bild von diesem Bild.

Overlib Beispiele

... 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.

Overlib Beispiele

... 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 Beispiele

 

“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 mit Klick schließen    mit MouseOver Link schließen    mit MouseOut schließen

Overlib Beispiele

... 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-schule.de/forum/\' 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 MouseOver Link 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();"

Wenn Ihr dem Link im Overlib-Fenster eine andere CSS-Class geben wollt oder auch den Link “Schließen” nicht verwenden wollt, sondern das Fenster bei Mouseout schließen soll, dann guckt auch hier.

 

“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.

Overlib Beispiele

... 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-schule.de/forum/\' 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.

Overlib Beispiele

... 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” und “Multimedia”

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”.

1. Radio hören

Overlib Beispiele

2. Eigene Musik in Lytebox mit Textlink

3. Multimedia in Lytebox mit Skript

1. Für das obige Beispiel “Radio hören” 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();"

2. Für das obige Beispiel “Eigene Musik in Lytebox mit Textlink” müsst Ihr folgenden Code verwenden:

Die Texte, die angezeigt werden sollen, müsst Ihr natürlich im Skript in Eure eigenen Texte abändern und den Link zu Eurer Seite eintragen sowie die Lytebox-Skripte auf der Seite einbauen.

rel="lyteframe" rev="width: 450px; height: 240px;" onmouseover="return overlib('<br>Mit Klick auf diesen Link öffnet sich ein Lyteframe der Lytebox.<br><br>Eine Verlinkung innerhalb dieser Overlib-Box ist nicht möglich, da das rel Attribut der Lytebox sich nicht auf die Mutterseite beziehen kann<br><br>', CAPTION, ' Eigene Musik hören ', FGCOLOR, '#edf1cc', BGCOLOR, '#00547a', BORDER, 3, CAPTIONFONT, 'verdana', CAPTIONSIZE, 2, WIDTH, '300',  TEXTFONT, 'verdana', TEXTSIZE, 1, HPOS=RIGHT);" onmouseout="return nd();"

3. Für das obige Beispiel “Multimedia in Lytebox mit Skript” müsst Ihr folgenden tun:

Zunächst vielen Dank an Klaus2, der dieses Skript für mich entwickelt hat. Hut ab :-)

Das Skript (unten) gehört in die HTML des Layouts.

> Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen

Die Texte, die angezeigt werden sollen, müsst Ihr natürlich im Skript in Eure
eigenen Texte und eigenen Links abändern sowie die Lytebox-Skripte auf der Seite einbauen.

<!-- Skript von Klaus für Thomas für einen Link in Overlib-Box der in der Lytebox angezeigt wird -->
<script type="text/javascript">

function doLyteframe()
{

returncode = overlib('<br>Mit Klick auf einen Link öffnet sich ein Lyteframe der Lytebox.<br><br>Vielen Dank <i>Klaus2</i><br><br><a href=\'./MP3-Lyteframe.html\' rel=\'lyteframe\' title=\'Eigene Musik hören\' rev=\' width: 450px; height: 240px; scrolling: auto; \' >Eigene Musik im Lyteframe</a><br><br><a href=\'./Video-Lyteframe.html\' rel=\'lyteframe\' title=\'Eigenes Video sehen\' rev=\' width: 550px; height: 400px; scrolling: auto; \' >Eigenes Video im Lyteframe</a><br><br>', CAPTION, ' Multimedia ', 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, VAUTO, LEFT);

initLytebox();
return returncode;

}

</script>

... dann geht Ihr auch hier wieder wie folgt vor:

> 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 den Code (unten) ein.

... hier gehört dann nur noch dieser Code, in dem die Funktion aus dem Skript oben, hier “doLyteframe” genannt, aufgerufen wird:

onmouseover="return doLyteframe();" 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”.

Overlib Beispiele

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
NOF-Forum verlinkt habe.

Hier geht es zum NetObjects Fusion Forum

Overlib Beispiele

... 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-schule.de/forum/\' target=\'_blank\'><center><img src=\'../assets/images/NOF-Forum.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();"

 

“Text mit CSS-Class formatiert”

Wenn Ihr mit der Maus über diesen Text geht, dann erscheint der Text in der Box formatiert.
Hier habe ich die Überschrift <center>zentriert</center> und den Text mittels Formatvorlage formatiert.
TEXTFONTCLASS, 'Blocksatz',

Dieser Text ist formatiert.

Overlib Beispiele

... dann geht Ihr auch hier wieder wie folgt vor:

> 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 den Code (unten) ein.

onmouseover="return overlib('<br>Hier könnt Ihr jetzt einen beliebigen Text rein schreiben. Dieser Text ist in einer CSS-Class formatiert und wird im <b>Blocksatz</b> angezeigt. Font ist Verdana in blau und in einer Größe von 16 Pixeln.<br><br>', CAPTION, '<center>Text mit CSS-Class</center>', FGCOLOR, '#edf1cc', BGCOLOR, '#00547a', BORDER, 3, CAPTIONFONT, 'verdana', CAPTIONSIZE, 2, WIDTH, '300', TEXTFONTCLASS, 'Blocksatz', HPOS=RIGHT) ;" onmouseout="return nd();"

Overlib Beispiele

 

“Bild/Text über einem Bild” - links Bild als Hintergrund und ohne Rahmen - rechts nur mit Schrift

In der Mitte ein transparentes Raster als Hintergrund.

Folgende Codes habe ich hier verwendet, wobei hier die exakte Bildgröße angegeben werden muss.

Linke Bild - nur Hintergrund-Bild (BACKGROUND):

onmouseover="return overlib('', BACKGROUND, '../assets/images/tigergross.jpg', FGCOLOR, '', WIDTH, 363, HEIGHT, 515, HAUTO, VAUTO);" onmouseout="return nd();"

Rechte Bild - nur Hintergrund-Bild (BACKGROUND) und Text auf dem Hintergrund:

onmouseover="return overlib('<br><b><center>Dies ist ein Design von uns</center></b>', BACKGROUND, '../assets/images/tigergross.jpg', FGCOLOR, '', WIDTH, 363, HEIGHT, 515, TEXTFONT, 'verdana', TEXTSIZE, 2 , TEXTCOLOR, '#FFFF00', VAUTO, LEFT);" onmouseout="return nd();"

Mittlere Bild - ohne Überschrift mit einem transparentem Raster im Hintergrund:

onmouseover="return overlib('<br><b>Hier könnt Ihr jetzt einen beliebigen Text rein schreiben.<br><br>Dies ist ein Design von uns ...</b><br><br> ', FGCOLOR, '', BGCOLOR, '', FGBACKGROUND, 'overlib-raster.gif', WIDTH, '300',  TEXTFONT, 'verdana', TEXTSIZE, 3, TEXTCOLOR, '#FFFFFF', HPOS=RIGHT);" onmouseout="return nd();"

Overlib Beispiele

 

Bemerkung zum Internet Explorer 10:

Für eine Funktion der Overlib-Skripte im IE 10 ist es notwendig folgende Zeile (216) der Datei “overlib.js” zu ändern:

var versNum = parseFloat(agent.match(/MSIE[ ](\d\.\d+)\.*/i)[1]);

Bitte ersetzt diese Zeile 216 in:

var versNum = parseFloat(agent.match(/MSIE[ ](\d{1,2}\.\d+)\.*/i)[1]);

sonst wird der IE 10 nicht vom Skript erkannt und Overlib wird im IE 10 nicht funktionieren. Ich habe das in meinem Download der Overlib-Skripte bereits geändert.

... 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.macridesweb.com/oltest/commandRef.html

Viel Erfolg!

zurück

 

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik