Startseite | Infos für Behinderte | Behindertensoftware | Forum | Programmierarchiv | Webguide | Markus privat | Kontakt | Download | Online Games | Entstehungsgeschichte


Animiertes Gif stoppen


Bild zeigt zwei Computer die miteinander kommunizieren. Klicken Sie auf das Bild um die Animation zu stoppen oder weiter laufen zu lassen.


Nun wollen wir uns anschauen wie es funktioniert. Die vorgestellte Lösung ist eine Javascriptlösung und funktioniert nur, wenn der Anwender im Browser Javascript aktiviert hat.

Zunächst braucht man ein animiertes Gif und von diesem animierten Gif ein Standbild, sprich ein nichtanimiertes Gif. Das nicht animierte Gif bekommen Sie, wenn Sie mit einer Bildbearbeitung das animierte Gif öffnen. Das animierte Gif besteht aus vielen Einzelbildern. Nun können Sie ein Einzelbild als Gif speichern. Das Einzelbild muss natürlich einen anderen Dateinamen haben wie das animierte Gif. Ein anderer Weg ist vom animierten Gif einen Screenshot zu machen und den Screenshot in der selben Größe als Gif zu speichern! Nun muss nachstehendes Javascript in die HTML-Seite implementiert werden. Die Dateinamen "an1.gif" und "an.GIF" müssen selbstverständlich durch Ihre Dateinamen ersetzt werden. "an.GIF" ist das animierte Gif und "an1.gif" das nicht animierte. Das bedeutet dass standardmäßig ein animiertes Gif angezeigt wird. Klickt man mit der Maus auf dieses Gif, wird es durch das nicht animierte ersetzt und es sieht so aus, als ob die animation gestoppt wurde! Beim erneuten drauf klicken mit der Maus, startet die Animation wieder. Selbstverständlich können Sie es auch umdrehen und standardmäßig dass nicht animierte Gif anzeigen. Sie müssen nur die Dateinamen vertauschen.

<script language="JavaScript">
bild2 = new Image; bild2.src = "an1.gif";
bild3 = new Image; bild3.src = "an.GIF";
function Bildwechsel()
{
 if (document.bildname.src == bild2.src) {
  document.bildname.src=bild3.src
 } else {
  document.bildname.src=bild2.src
 };
};

</script>

.....
<BODY>
<br>
<a href="javascript:Bildwechsel()"><img src="an.GIF" name="bildname" border="0"
alt="Bild zeigt zwei Computer die miteinander kommunizieren. Klicken Sie auf das Bild um die
Animation zu stoppen oder weiter laufen zu lassen."
title="Bild zeigt zwei Computer die miteinander kommunizieren. Klicken Sie auf das Bild um die
Animation zu stoppen oder weiter laufen zu lassen.">;



Erklärung des Quellcodes:
Im Javascript werden zwei Bilder erstellt(bild2 und bild3).
In der Funktion Bildwechsel wird abgefragt, welches bild gerade sichtbar ist und das sichtbare Bild, wird durch das nichtsichbare Bild ersetzt! Nun wird das animierte Gif als link, in die HTML- Seite eingebunden. Wichtig ist hier, dass das Bild einen Namen bekommt, nämlich den, der im Javascript verwendet wurde. Das href="javascript:Bildwechsel() bedeutet, dass bei jedem Klick auf das Bild die Java-Funktion Bildwechsel aufgerufen wird.

Quelle:
Ansatz aus dem Entwickler-Forum, überarbeitet von Mario Noack.

zurück zu Bewegte Bilder und Effekte