Gernot Back: mit Kanonen auf Spatzen schießen

Beitrag lesen

SELF-Forum

mit Kanonen auf Spatzen schießen

Gernot Back Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo Merle,

Ich hab die Bilderbuch-Funktion aus SelfHTML genommen, sie um die Aufblätter-Funktion erleichtert (brauch ich nicht) und lasse mein Bilder aus einem Array auslesen. Das klappt soweit auch alles wunderbar in Safari, Mozilla und Netscape. Nur der Internet Explorer will die Bilder nicht darstellen. Hat jemand ne Idee, warum?

Ich glaube, du schießt mit Kanonen auf Spatzen. Kann es sein, dass du nichts weiter willst, als eine gewöhnliche Endlosdiaschow, nur anders als BastiNRW, noch nicht einmal mit einer TimeOut-Funktion?

Nun, wenn ihr euch beide so schwer tut, dann will ich mich doch mal erbarmen:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Endlosdiashow</title>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<link [link:view-source:http://www.sprachlernspiele.de/selftests/dia/style.css@title=href="style.css"] rel="stylesheet" type="text/css">  
<script type="text/javascript">  
[code lang=javascript]  
var idx=0;  
  
var bilder = new Array('abb1.gif', 'abb3.jpg', 'abb10.gif');  
  
function weiter (zahl) {  
  var max = bilder.length;  
  idx = (idx + zahl + max) % max;  
  with (document.images['bild']) {  
    alt = bilder[idx];  
    title = alt;  
    src = alt;  
  }  
  return false;  
}

</script>
</head>
<body>
  <div id="schalt">
    <a title="zurück" href="#" id="bwd" onclick="return weiter(-1)"></a>
    <a title="vorwärts" href="#" id="fwd" onclick="return weiter(1)"></a>
  </div>
  <div id="centr">
    <img name="bild" src="abb1.gif" border="0" alt="abb1.gif" title="abb1.gif">
  </div>
</body>
</html>
[/code]

Am Anfang wird als Bild das im Array bilder verzeichnete erste Element angezeigt. Das spiegelt sich auch in der global deklarierten Indexvariablen idx wider, die zunächst auf Null gesetzt wird. Der Funktion weiter() wird als Parameter entweder die Zahl +1 oder -1 übergeben. Die Variable max berechnet sich aus der Anzahl der Bilder (bilder.length).

Über den Divisionsrest- oder Modulo-Operator (%) wird bewirkt, dass wenn das letzte Element des beliebig langen Arrays erreicht wird, als nächstes wieder auf das erste Element des Arrays zurückgesprungen wird.

Wenn man zurückschaltet, ist das im Prinzip genauso. Damit aber beim Subtrahieren (oder besser gesagt: Addieren der Zahl -1) keine negativen Indexnummern für das Array generiert werden, muss vor der Modulo-Operation die Gesamtanzahl der Bilder im Array noch einmal hinzuaddiert werden. Auf diese Weise springt beim Zurückblättern im Array der Index als nächstes auf das letzte Array-Element zurück, wenn zuvor das erste Element mit dem Index 0 erreicht wurde.

Wenn die Funktion weiter() ihre Schuldigkeit getan und sie das Bild über das Images-Objekt ausgetauscht hat, reicht sie zum Schluss noch den booleschen Wert false über den Eventhandler onclick zurück, damit der Browser weiß, dass es über diese beiden Schalter-Links sonst nichts zu laden gibt.

In Aktion ist das zu sehen unter:
http://www.sprachlernspiele.de/selftests/dia/index.html

Für die, deren Herz noch so sehr an älteren Browsern wie Netscape4 hängt, dass sie auch nicht davor zurückschrecken, Riesen-DHTML-Bibliotheken einzubinden, habe ich auch mal was gebastelt, zu dem ich mir aber die Erklärungen spare:
http://www.sprachlernspiele.de/selftests/dia/altbrowser.html

Gruß Gernot

Beitrag melden
–
Informationen zu den Bewertungsregeln