Startseite |
Infos für Behinderte |
Behindertensoftware |
Forum |
Programmierarchiv |
Webguide |
Markus privat |
Kontakt |
Download |
Online Games |
Entstehungsgeschichte
Animiertes Gif stoppen
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