|
Multimediakurs Leinfelder: Inhalt/Modul 7 "JavaScript in Handarbeit"/Modul 7.4 "JavaScript-Level 3/7.4.5 weitere JavaScript-Beispiele mit Erläuterung Level 3, Teil Arbeiten mit Bildern |
| (© copyright) Letzte Änderungen: |
Auf den nachfolgenden Seiten finden Sie weitere, nun stärker anwenderorientierte JavaScript-Beispiele zur Veranschaulichung des in Level 3 erarbeiteten Wissens. Sie sind ausführlich kommentiert, jedoch nur, was das in Level 3 vermittelte Wissen angeht. Ich setze das Wissen aus Level 1 und 2 überwiegend voraus. Sie können die Skripte bei Bedarf anpassen und weiterverwenden.
Arbeiten mit Bildern | Arbeiten mit Formularen | Passwortschutz |
Arbeiten mit Bildern (Bilderschau | Animierte Buttons)
Beispiel: Kleine JavaScript-Bilderschau
Tauscht nach definierter Zeit vorgegebene Bilder aus. Beispiel zur Verwendung von Arrays, setTimeOut()-Methode, Neudefinition von Objekten zum Vorabladen von Bildern. Im Unterschied zu animierten Gifs können hier auch jpg-Formate für selbstablaufende "Daumenkino-Animationen" verwendet werden. sie müssen nur die entsprechenden Dateinamen austauschen.
Skriptcode mit Erläuterungen
<script language="JavaScript">
<!--
/*nachfolgend wird ein neues Array angelegt, bestehend aus drei
Inhalten und zugeordneten Namen (in diesem Fall sind es Bildnamen)
Wollen Sie mehrere Bilder zeigen, müssen Sie alle hier benannt werden.
Sie müssen alle die gleiche Größe haben.*/
var fotos=new Array ("bild1.gif", "bild2.gif", "bild3.gif", "bild4.gif");
/* hier wird ein neues Imageobjekt angelegt, die Bilder können
damit vorgeladen werden*/
var bilder=new Image();
/* die nachfolgende function bilderschau() wird mehrmals durchlaufen
bis alle Bilder gezeigt wurden, dann geht es von vorne los.
die Variable Zahl steuert dies, sie wird vorab auf -1 gesetzt
da sie über die Indexnummern des fotos-Array die Bilder ansprechen
soll. Bei jedem Durchlauf wird die Variable hochgezählt, d.h.
beim ersten Aufruf in der Funktion muss sie auf 0 gezählt werden*/
var zahl=-1;
function bilderschau()
{
/*zahl wird bei jedem Durchlauf hochgezählt, mit dem ersten Durchlauf
steht sie damit auf 0 und spricht dadurch im image-Array das erste Bild,
also das mit der Indexnr 0 an*/
zahl++;
/* dies ist der komplette Ansprechpart für das Image-Array. Angesprochen
wird das erste Bild, mehr sind auch gar nicht auf der Webseite.
diesem ersten Bild wird aus source-Wert der Wert des Arrays fotos
für den jeweiligen Durchlauf zugeordnet. Beim ersten Durchlauf
hat zahl den Wert 0, so dass der erste Arrayeintrag angesprochen
wird und src den wert bild1.gig erhält und damit aufgerufen wird.
Wenn Sie mehrere Bilder auf Ihrer Webseite haben und z.B. die 4.
Bildposition die Bilderschau-Animation erhalten soll, müssen Sie
images[3] eintragen*/
window.document.images[0].src=fotos[zahl];
/* in der nachfolgenden kleinen if-Abfrage wird für den Fall, dass der Wert von
Zahl dem Wert 3 entspricht, der Variablen zahl wieder ein neuer Wert zugeordnet,
nämlich -1, damit dann das obige Spiel von neuem beginnen kann. Hat nämlich
zahl den Wert von drei erreicht, wurden nämlich alle vier Bilder gezeigt. Sie
müssen 3 austauschen, falls Sie mehr Bilder zeigen wollen (z.B. 5 wenn Sie sechs
Bilder zeigen wollen. Alternativ können Sie auch verwenden if(zahl==fotos.lenght-1)
dann wird bei der Indexzahl des letzten Fotos wieder neu gestartet. Lesen Sie bei der Methode
array für weitere Erklärungen nach)*/
if (zahl==3)
{
zahl=-1;
}
/* hier wird mit der setTimeOut-Methode definiert, dass nach der vordefinierten
Zeit von 3000 Millisekunden, d.h. 3 Sek. die Funktion bilderschau erneut
aufgerufen wird und aufgrund des obigen Codes eben das nächste Bild angezeigt
wird. Wenn Sie die Standzeit der Bilder erhöhen wollen, müssen Sie die Zahl 3000
entsprechend ändern. Beachten Sie, dass bilderschau() hier zu einer
selbstdefinierten Methode geworden ist, dabei aber der Semikolon wegbleibt, da
diese Methode der setTimeOut(); -Methode untergeordnet ist.
window.setTimeout ('bilderschau()', 3000);
}
-->
</script>
</head>
/*die Bilderschau wird durch das Laden gestartet.
Sie könnten aber auch einen onclick-Handler verwenden, so dass
der Benutzer entscheiden kann, wann er die Bilder aufruft*/
<body onload="bilderschau()">
Hinweis: es gibt viele, im Detail etwas unterschiedliche Lösungen zu selbstlaufenden Bildershows mit JavaScript im Netz. Die Anregung zum vorliegenden Beispiel stammt aus M.Seeboergers JS-Buch. Ich habe jedoch einige Änderungen (u.a. auch Vereinfachungen, um das Skript besser erklären zu können) vorgenommen.
Beispiele: Animierte Bilderknöpfe ("Rollover-Buttons")
Rollover-Buttons sind die Bildchen, die bei Berührung mit der Maus ihr Aussehen wechseln. Meist sind sie als Linkknöpfe gestaltet. Bei Linkklick erscheint eine weitere Version des Bildes. Voraussetzung zur Erstellung von Rollover-Buttons für eine Webseite gibt es zwei:
Es gibt verschieden komplexe Möglichkeiten, Java-Scripte für Rollover-Buttons zu programmieren. In unserem GoLive-Tutorial hatten wir bereits gelernt, wie wir die Bilder zu Rollover-Buttons zusammenfügen (in Modul 6.3.2: GoLive-ScriptAktions). Hier hat uns GoLive die Programmierung abgenommen, allerdings dafür extrem komplexe Skripte erstellt (wir werden in Level 4 darauf zurückkommen).
Nachfolgend diskutieren wir ein "klassisches" Skriptbeispiel für Rollover-Buttons. Es befindet sich auch in M.Seeboergers JavaScript-Buch . Ich habe es für unsere Zwecke nur mit neuen Variablen- und Bildnamen versehen.
Beispiel : Rollover-Buttons
Kommentare zum Skript:
Sinnvoll ist die Verwendung von Rollover-Buttons in einem Steuerframe eines Framesets (index.html). Das komplette Scripting spielt sich in diesem Frame in der Datei animbutt.html ab. Der Code der Seite ist nachstehend, mit den in üblicher Weise in Blau vorgenommenen Kommentaren dargestellt:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Animierte Buttons-Beispiel 1</title>
<script language="JavaScript"><!--
//* Erlaeuterungen zu diesem Beispiel im R.Leinfelders Multimediakurs, www.palaeo.de/multimediakurs, Kursmodul 7.4.5
/*für jedes Bild wird ein neues Image-Objekt als globale Variable angelegt, damit die Bilder vorgeladen werden können, pro button als 3 Variablen. Die Variablen sind nun gleichsam neue Image-Objekte, die die
Eigenschaften von Image-Objekten haben. So wird der Objektvariableneigenschaft src jeweils als Wert der Bildateiname zugeordnet. Insgesamt verwenden wir drei mal 3 Bilder*/
var inhalt1=new Image();
inhalt1.src="kursinhalt.gif";
var inhalt2=new Image();
inhalt2.src="kursinhalt_over.gif";
var inhalt3=new Image();
inhalt3.src="kursinhalt_down.gif";
var on1=new Image();
on1.src="online.gif";
var on2=new Image();
on2.src="online_over.gif";
var on3=new Image();
on3.src="online_down.gif";
var optik1=new Image();
optik1.src="opt.gif";
var optik2=new Image();
optik2.src="opt_over.gif";
var optik3=new Image();
optik3.src="opt_down.gif";
/*die nachfolgenden beiden Variablen benötigen wir, um das image-Array anzusprechen und die Bilder mit
einer Codezeile auszutauschen. Sie haben noch keine Wertzuordnung erhalten.*/
var a, Bild;
/*die nachstehende Kurzfunktion nimmt den Austausch bei Aufruf vor. Ihr werden die beiden gerade
definierten Variablen als Parameter übergeben. Diese Variablen erhalten bei Funktionsaufruf den bei den
onclick, onmouseover bzw. onmouseout definierten Wert, siehe unten. In der einzigen Codezeile der
Funktion wird dieser Wert der Eigenschaft src der Objektvariablen Bild zugeordnet, welches im Arraywert angesprochen wird.
Wenn also die Variable Bild später z.B. den Wert inhalt3 erhält, so wird die Eigenschaft src von inhalt3 eben den Wert kursinhalt_down.gif annehmen
annehmen. Nähere Erläuterungen zuArrays etc. finden Sie in den Level 3-Kursinhalten*/
function tauschen (a, Bild)
{
window.document.images[a].src=Bild.src;
}
// -->
</script>
</head>
<body bgcolor="#cccccc">
<p><br><br></p>
<!-- der unten stehende Imagetag lädt das Bild, welches beim Aufruf der Seite
dargestellt wird, er ist also ganz normal gestaltet. Der <a> tag beinhaltet die zu
verlinkende Seite, das Frameziel, sowie die eventhandler. Die eventhandler rufen jeweils
die selbe Funktion, nämlich tauschen() auf. Es werden aber immer andere Variablenwerte
mitgegeben, die die Funktion verwenden soll. Die function tauschen() "weiß" dabei,
um welche Variablen es sich handelt, da diese ja bei der function-Definition im Skript als Parameter
angegeben wurden: function tauschen(a, Bild). Der erste Variablenwert steuert, welches Bild angesprochen werden soll (Indexzahl 0 bedeutet das erste Bild), der zweite Variablenwert, welches Bild verwendet werden soll.-->
<p><a href="inhalt.html" target="main" onmouseover="tauschen(0, inhalt2)" onmouseout="tauschen(0, inhalt1)" onclick="tauschen(0, inhalt3)"><img src="kursinhalt.gif" border="0"></a></p>
<!-- für diesen und den nachfolgenden Imagetag gehen Sie genauso vor -->
<p><a href="online.html" target="main" onmouseover="tauschen(1, on2)" onmouseout="tauschen(1, on1)" onclick="tauschen(1, on3)"><img src="online.gif" border="0"> </a></p>
<p><a href="optik.html" target="main" onmouseover="tauschen(2, optik2)" onmouseout="tauschen(2, optik1)" onclick="tauschen(2, optik3)"> <img src="opt.gif" border="0"></a></p>
<hr>
<!-- die nachfolgende Zeile löschen Sie bei Verwendung dieses Skripts lieber. Sie dient nur dazu, in unserem Kurs den gesamten Beispielframe zu schließen, da dieser ja in einem extra Fenster aufgegangen ist. Ansonsten wird bei Aufruf das Hauptbrowserfenster des Benutzers geschlossen-->
<p>Dieses Browserfenster <a href="javascript:parent.close();">schließen</a>? (Nur, falls dieses Beispiel in einem Zusatzfenster geöffnet wurde!)</p>
</body>
</html>
Hinweis: wenn Sie mehr animierte Buttons auf Ihrer Seite haben wollen, müssen Sie für jeden neuen Button drei entsprechende zusätzliche Variablen als new image()-Objekte anlegen und bei den Eventhandlern für die Buttons die entsprechenden Bildindexnummern bzw. Variablen angeben. Nochmals sei erwähnt. Indexnummer 0 bedeutet erstes Bild auf der Seite, Indexnummer 1 zweites Bild auf der Seite usw.
Wenn Sie die Bildgröße im <img>-Tag angeben, wird Ihre Seite noch schneller aufgebaut.
! In Level 4 werden wir noch zwei komplexere Skripte zur Rollover-Erstellung vorstellen und kurz erläutern. Aus dem Vergleich können Sie ablesen, welch verschiedene Möglichkeiten es gibt !
alle obigen Skriptbeispiele sowie frühere sind im Anhang zu Modul 7 aufgelistet.
>> Modul 7.4.5: Level 3-Beispiele, Fortsetzung (Formulare)
<< Modul 7.4.4: Level 3-Zusammenfassung