• Zeitgesteuerte Diashow
• Bildergalerie mit Maussteuerung
• Image-Wechsel bei Mausberührung

Zeitgesteuerte Diashow

Wenn Sie auf dieser Seite gelandet sind, werden Sie sich vermutlich eher dafür interessieren, wie man solch eine Diashow mit JavaScript realisiert.

• Zunächst wird ein normales IMG-Tag aufgesetzt, das eines der Bilder anzeigt, die in diesem Fall in einem eigenen Unterverzeichnis images liegen und garten1.jpg bis garten5.jpg heißen.
• Das IMG erhält den Namen anzeige, über den es später von JavaScript aus über document.anzeige ansprechbar ist.
• Es wird ein globales Array bild angelegt, in das mit einer for-Schleife die Dateien eingeladen werden.
• Die Variable bildindex gibt an, welches der Bilder als nächstes angezeigt werden sollen.
• Die Funktion dia sorgt davor, dass das durch bildindex bezeichnete Bild in das IMG document.anzeige übernommen wird und erhöht den Index.
• Mit dem Aufruf von setTimeout startet es sich selbst wieder in 2000 Millisekunden.
• Zuletzt wird der Timeout für die Funktion dia einmal angestoßen, damit die Diashow in Bewegung kommt.

<img style="max-width:100%; height:auto;" name="anzeige"
    src="images/garten5.jpg">
<script>
var timeout = 2000;
var bild = new Array();
for (i=1; i<=5; i++) {
    bild[i] = new Image();
    bild[i].src="images/garten"+i+".jpg";
}
var bildindex = 1;
  
function dia() {
  if (bildindex > 5) bildindex = 1;
  document.anzeige.src = bild[bildindex].src;
  bildindex++;
  setTimeout("dia()",timeout);
}

setTimeout("dia()",timeout);
</script>

Bildergalerie mit Maussteuerung

Beginnen wir damit, das erste Bild und zwei Pfeile anzuzeigen.

<div style="display:flex; justify-content:center; align-items:center;">
<img style="max-width:100%; height:auto;"
   name="gallery" src="images/garten1.jpg">
<img style="left:0; position:absolute; cursor: pointer;"
    src="images/prev.png" alt="&lt;&lt;&lt;" id="prevBtn"/>
<img style="right:0; position:absolute; cursor:pointer;"
    src="images/next.png" alt=">>>" id="nextBtn"/>

Damit kommen wir bereits zu JavaScript. Die Bilder werden in einem Array gespeichert, das zu Anfang mit einer for-Schleife eingelesen wird. Die Bilder haben ähnliche Namen, um diese Schleife nicht zu kompliziert werden zu lassen.

var bilder = new Array();
var aktuell = 0;
var anzahl = 5;
// Einlesen der Bilder in das Bild-Array
for (i=0; i<anzahl; i++) {
   bilder[i] = new Image();
   bilder[i].src = "images/garten"+(i+1)+".jpg";
}

Inhaltlich prüfen Sie, ob die Variable aktuell über den Rand des Arrays hinausgewachsen ist und setzen Sie auf der anderen Seite wieder auf. Anschließend wird das aktuelle Bild gewechselt, indem das Bild gallery nun eine neue src aus dem Array bekommt.

function onNextPic() {
    if (aktuell < (anzahl-1)) aktuell++; else aktuell=0;
    document.gallery.src = bilder[aktuell].src;
}

function onPrevPic() {
    if (aktuell > 0) aktuell--; else aktuell=anzahl-1;
    document.gallery.src = bilder[aktuell].src;
}

document.getElementById("nextBtn").onclick = onNextPic;
document.getElementById("prevBtn").onclick = onPrevPic;

Image-Wechsel bei Mausberührung

Zunächst werden zwei Bilder gebraucht. Das erste ist das Standardbild und das zweite soll erscheinen, wenn mit der Maus über das Maus gefahren wird. Beide Bilder müssen natürlich gleich groß sein.

Das Bild, wie es ohne Maus aussieht.

Das Bild, wie es mit Maus aussehen soll.

<a href="http://www.galileocomputing.de/katalog/buecher/titel/gp/GPP-unixguru/titelID-769">
<img src="../unix/gurucover.gif" width="118" height="167" border=0 alt="Guru-Buch" name="bookPic">
</a>

Wichtig ist, dass dem img-Tag ein Name zugeordnet wird, in diesem Fall der Name bookPic. Im nächsten Schritt sollen dem Adress-Tag die Ereignisreaktionen zugewiesen werden. Die Ereignisse lauten OnMouseOver und OnMouseOut. In dem jeweiligen Fall wird dem img ein neues Bild untergeschoben werden. Der einfachste Ansatz wäre der folgende:

<a 
  href="http://www.galileocomputing.de/katalog/buecher/titel/gp/GPP-unixguru/titelID-769" 
  language="JavaScript"
  OnMouseOver="document['bookPic1'].src=../unix/gurubest.gif" 
  OnMouseOut="document['bookPic1'].src=../unix/gurucover.gif">
<img src="../unix/gurucover.gif" width=118 height=167 border=0 alt="Guru-Buch" name="bookPic1">
</a>

Auf der linken Seite ist die entsprechende Umsetzung und es funktioniert tatsächlich nicht. Zuerst müssen die Bilder, die beim Überstreifen der Maus angezeigt werden sollen, in einer Imagevariablen geladen werden. Das Laden erfolgt irgendwo auf der Seite. Die eine Variable soll PicOhneMaus heißen und die andere PicMitMaus. Welche für was ist, darf sich der Leser aussuchen.

<SCRIPT LANGUAGE=JAVASCRIPT>
<!-- //
function ImgFromFile(img)
{
  var a=new Image();
  a.src=img;
  return a;
}

PicOhneMaus=ImgFromFile("../unix/gurucover.gif");
PicMitMaus=ImgFromFile("../unix/gurubest.gif");
// -->
</SCRIPT>

<a 
  href="http://www.galileocomputing.de/katalog/buecher/titel/gp/GPP-unixguru/titelID-769" 
  language="JavaScript"
  OnMouseOver="document['bookPic'].src=PicMitMaus.src"
  OnMouseOut="document['bookPic'].src=PicOhneMaus.src">
<img src="../unix/gurucover.gif" width=118 height=167 border=0 alt="Guru-Buch" name="bookPic">
</a>