Bildvorschau bei mouseover
    


HOME

 DOWNLOAD  BEISPIEL  HTMLCode ZURÜCK SITEMAP  

 Vorschau

Wird der Mauszeiger über den Beschreibungstext bewegt, wird die Vorschau angezeigt, klicken auf den Beschreibungstext öffnet eine HTML-Datei mit der Grossansicht!

Fotovorschau

Vorschau Foto 1
Vorschau Foto 2
Vorschau Foto 3

Sobald der Mauszeiger über dem Verweis ist, wird eine Vorschau angezeigt. Erst durch Klicken wird die Großansicht geöffnet. So ersparen Sie dem Besucher unnötige Ladezeiten.

siehe auch: mehrere Links tauschen ein Objekt (JavaScript)


   Aufwand

  • JavaScript im HEAD-Bereich notieren
  • Pfad und Dateiname der Vorschaubilder eintragen
  • Bild im Body-Bereich mit dem Attribut "name" versehen
  • Links mit MouseOver-Attributen versehen
  • Pfad und Dateiname für verlinkte HTML-Seiten eintragen



   Script im Head

<script language="JavaScript">
<!-- begin
var bild1 = new Image();
var bild2 = new Image();
var bild3 = new Image();
bild1.src = "bild1.gif";
bild2.src = "bild2.gif";
bild2.src = "bild3.gif";

function Vorschau(NeuesBild)
{
eval("document['picture'].src = " + NeuesBild + ".src");
}
// end -->
</script>



   Notierungen im BODY-Bereich

<a href="gross1.htm" onmouseover="Vorschau('bild1')">Foto 1<a>
<a href="gross2.htm" onmouseover="Vorschau('bild2')">Foto 2<a>
<a href="gross3.htm" onmouseover="Vorschau('bild3')">Foto 3<a>

<img name=picture src="startbild.gif" width=128 height=128 border=0>


Die HTML-Dateien können natürlich auch in einem Frameset oder in einem neuen Browserfenster geöffnet werden. Dazu versehen sie den Link mit einem Target-Attribut:

<a target="name" href=" ...  (im Frame)

<a target="_blank" href=" ... (im neuen Fenster)




Zur Anpassung (mögliche) Änderungen im Script:

Element    hier im Beispiel   ersetzen mit  
Variablenname 1 bild1 Text 
Variablenname 2 bild2 Text 
Variablenname 3 bild3 Text 
(analog für weitere Vorschaubilder)
Vorschaubild 1 bild1.gif Dateiname 
Vorschaubild 2 bild2.gif Dateiname
Vorschaubild 3 bild3.gif Dateiname
(analog für weitere Vorschaubilder)
Bildname (nicht erforderlich) picture Text




Zur Anpassung (mögliche) Änderungen im Aufruf:

Element    hier im Beispiel   ersetzen mit  
Dateiaufruf 1 gross1.htm dateiname
Variablenname 1 bild1 Dateiname 
(analog für weitere Vorschaubilder)
Bildname (nicht erforderlich) picture Text





NACH OBEN