Vorschau
Wird der Mauszeiger über den Beschreibungstext bewegt, wird die Vorschau angezeigt, klicken auf den Beschreibungstext öffnet eine HTML-Datei mit der Grossansicht!
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 |
|
|