Imageviewer


Image-Shows sind im Internet sehr weit verbreitet. Das Script erzeugt eine Endlos-Schleife in der Grafiken nur bei Bedarf nachgeladen werden. Somit läßt sich die Ladezeit trotz umfangreichen Bildmaterials erheblich einschränken.

Das Script funktioniert im Internet-Explorer bzw. Netscape-Navigator ab Version 4. Nachfolgend finden Sie eine ausführliche Erklärung.




Die unterschiedliche Interpretation des Scripts im Explorer und Navigator erfordert vor der Verwendung des Scripts eine Angleichung der Bildgröße in Höhe und Breite. Netscape übernimmt in diesem Script die Objektparameter der festgelegten Startgrafik. Dies führt bei unterschiedlichen Bildgrößen zu Verzerrungen. Der Scriptblock wird in den Head der Html-Datei eingefügt.



<head>
<script language="JavaScript">
<!--
zaehler=1
images=new Array
images[1]="IhreGrafik02.jpg"
images[2]="IhreGrafik03.jpg"
images[3]="IhreGrafik04.jpg"
images[4]="IhreGrafik05.jpg"
images[5]="IhreGrafik06.jpg"
images[6]="IhreGrafik07.jpg"
images[7]="IhreGrafik08.jpg"
images[8]="IhreGrafik09.jpg"
images[9]="IhreGrafik10.jpg"


In der Variable "zaehler" wird der Zustand beim Laden der Seite durch Zuweisung der Zahl 1 festgehalten. Der Zähler wird in den späteren Script-Funktionen verwendet um Rechenoperationen durchzuführen.

Die Variablen "images" definieren Folge und URL der Bild-Dateien die bei Mouse-Click oder anderen Aktionen geladen werden sollen.

Es können beliebig viele Grafiken in das Script eingebunden werden.



   Die Funktion "bild_zurueck"   

Die Argumente(größer/gleich 1) der Variable "zaehler" werden geprüft. Der gespeicherte Wert wird mit 1 subtrahiert. Die im Variablen-Block festgelegte Grafik-Datei wird geladen.

Ist der Wert gleich 1 wird die Variable auf 10 zurückgesetzt. Auf diese Weise wird eine Endlosschleife erzeugt.


function bild_zurueck()
{
if(zaehler>=1)
{
if(zaehler==1)
{
zaehler=10
}
zaehler=zaehler-1;
document.bild.src=images[zaehler];
}
}



function bild_vor()
{
if(zaehler<=9)
{
if(zaehler==9)
{
zaehler=0
}
zaehler=zaehler+1;
document.bild.src=images[zaehler];
}
}
//-->
</script>
</head>


   Die Funktion "bild_vor"   

Die Argumente(kleiner/gleich 9) der Variable "zaehler" werden geprüft. Der gespeicherte Wert wird mit 1 addiert. Die im Variablen-Block festgelegte Grafik-Datei wird geladen.

Ist der Wert gleich 9 wird die Variable auf 0 zurückgesetzt. Auf diese Weise wird eine Endlosschleife erzeugt.

Am Ende der Anweisungen wird der Scriptblock geschlossen.



   Der Funktionsaufruf   

Der Aufruf erfolgt durch den Event-Handler "javascript" im Body der Datei. Beim Anklicken des Buttons oder des Verweises wird die entsprechende Scriptanweisung aufgerufen. Dies entspricht dem Event "onClick".

Der Startgrafik wurde der Name "Bild" zugewiesen. In der Funktion im Scriptblock wird der Grafik-Ausgabeort durch seinen Namen eindeutig definiert.


<body>
<table>
<tr><td width="250" height="200" align="center">
<img name="bild" src="IhreGrafik01.jpg">
</td></tr>
<tr><td height="50" align="center">
<a href=javascript:bild_zurueck()>
<img src="viewer/button_z.gif" border="0"></a>
<a href=javascript:bild_vor()>
<img src="viewer/button_v.gif" border="0"></a>
</td></tr>
</table>
</body>



Tutorial:  Html Script Grafik Zurück