Antworten zu häufig gestellten Homepage-Fragen
 Alle Anleitungen
Einige Anleitungen
Intern
Kostenl. Partnerlinks
[,__,] Druckversion

Die Website Homepage-FAQs.de befindet sich im Archivmodus.
FAQS zu HP&Co.
Javascript - bei Mouseover Hinweisfenster, auch mit Bildern oder als Bildervorschau

Inhalt:

- Das Javascript, Download und Einbauhinweise

- Position des Hinweisfenster in Bezug auf den Mauszeiger ändern

- Mouseoverbereich bei kleinen Bildern vergrößern


Das Javascript, Download und Einbauhinweise

Problem: ...ich hätte es, daß auf meiner Homepage beim Mouseover eines Thumbnails eine Art Vorschau erscheint. Hab dazu auch ein passendes Beispiel gefunden (...Link...) Wäre nett wenn mir jemand sagen könnte wie ich sowas umsetze oder wo ich so etwas herbekomme.

Hallo,

die Seite benutzt das Javascript von

http://www.bosrup.com/web/overlib/

und damit nicht nur Text im Fenster angezeigt wird, ist auch ein IMG-Tag mit im Text, siehe stark schematisierter Quelltext

HTML-Code:

<html>
<head> <script language="JavaScript" src="overlib.js" type="text/javascript"></script>
</head>
<body>
<a href="datei.html" target="_self" onmouseover="return overlib('<strong>Vorschau von Template 45:</strong><br><img src=bild.jpg width=450 height=500 border=0 class=name/>');" onmouseout="nd();" alt=""/> <img src="minibild.jpg" border="0" alt="" width="150" height="147"/> </a>
</body>
</html>
Habe den oberen Code im Browser mit aktivierten Javascript mit IE6 und Mozilla getestet, er funktioniert so.

daniel5959

User 2: ...genau das suche ich auch, aber es soll nur ein Name da stehen und wenn man darüber fährt soll das Bild kommen.

Hallo,

im Code statt des Bildes (IMG-Tag) den Namen (Text) als Link verwenden, ganz einfach.

<html>
<head>
<script language="JavaScript" src="overlib.js" type="text/javascript"></script>
</head>
<body>
Hier steht der Text und hier der Name <a href="#" target="_self" onmouseover="return overlib('<img src=bild.jpg width=450 height=500 border=0 class=name/>');" onmouseout="nd();" alt=""/>Rudi</a>, der ein Link ist, um bei Mouseover auch ein Bild anzuzeigen.
</body>
</html>

Hinweise:

A) Verlinkung oder keine

href="#" (wenn keine Verlinkung zu einer Seite benötigt wird)

href="datei.html" (Dateiname oder Adresse wenn Verlinkung gewünscht)

B) Bei overlib('...') wird der Inhalt des Anzeigefensters festgelegt (Text, Html-Tags und/oder Bild(er))

 a) Text, HTML und Bild

 overlib('<strong>Vorschau von Template 45:</strong><br><img src=bild.jpg width=450 height=500 border=0 class=name/>')

 b) Nur Bild, evtl. Angabe class=name für CSS-Formatierung

 overlib('<img src=bild.jpg width=450 height=500 border=0 class=name/>')

Wichtig:

Die Javascriptdatei overlib.js muss mit hochgeladen werden, holen kann man sie sich bei

http://www.bosrup.com/web/overlib/

daniel5959


Position des Hinweisfenster in Bezug auf den Mauszeiger ändern

User 3: ...an welcher stelle innerhalb von overlib wird die pos des hoverbildes angegeben jetzt pop es direckt mit der linken ecke am mauszeiger ich will das ändern.

Hallo,

in der overlib.js diese Stelle suchen

Zitat:
////////
// DEFAULT CONFIGURATION
// Settings you want everywhere are set here. All of this can also be
// changed on your html page or through an overLIB call.
////////
...
...von mit gekürzt fürs Forum...
...
if (typeof ol_offsetx=='undefined') var ol_offsetx=
10;
if (typeof ol_offsety=='undefined') var ol_offsety=
10;

an den rotmarkierten Stellen die Zahlen ändern, auch negative Werte erlaubt

Zitat:
if (typeof ol_offsetx=='undefined') var ol_offsetx=-50;
if (typeof ol_offsety=='undefined') var ol_offsety=
-50;

daniel5959


Mouseoverbereich bei kleinen Bildern vergrößern

User 3: ...wo kann man den Bereich des mouseovers einstellen also den bereich wo die maus dann das andere bild zeigt .

Ich arbeite mit Bildern da kommt es vor das sehr kleine Bilder als Vorschau sind und dann der reaktionsbereich sehr klein ist.

Hallo,

da der Linkbereich auch der Mouseoverbereich ist müsste der Linkbereich vergrössert werden, also wohl größere Bildchen verwenden oder die Leerzeichen vor und nach den Bildern in den Linkbereich mit übernehmen bzw. größere Bilder erstellen, das kleine Bildchen in die Mitte und als transparentes Gif speichern, die Bilder nun eng an eng plazieren, dann sieht das Bild klein aus, aber der Linkbereich beginnt bereits aussenherum im transparenten Bildbereich.

daniel5959

Anleitung (C) 2006 Daniel Wurst - http://www.homepage-faqs.de