Gif-Animation durch Klick starten
Hallo! 
Folgendes Problemchen:
Ich möchte in einem normalen Beitrag (so wie dieser hier im Prinzip) eine Gif Animation per onclick starten/auslösen lassen.
Genauer: Ein "Startbild" als .jpg/.png und beim klick auf dieses soll dann die Animation des Gifs starten.
(Ich würde gerne nen Beispiel zeigen, weiß aber gerade nicht, ob hier Links zu externen Seiten erlaubt sind.)
Ich hab folgende Sachen bisher ausprobiert:
<img src="Startbild.jpg" onclick="this.src ='animation-nach-klick.gif'" />
2
3
<img src="" name="bild">
<a href="#" onClick="javascript:images.bild.src='animation-nach-klick.gif'; return false;">
<img src="Startbild.jpg"></a>
Ich hab auch mit Javascript experimentiert, zb. so:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<img id = "img"
src = "Startbild.jpg">
<script type="text/javascript">
$(function(){
var image = new Image();
image.src ='animation-nach-klick.gif';
$('#img').click(function(){
$(this).attr('src',image.src);
});
});
</script>
- Html in Beiträgen war an
- "Startbild" wird meist angezeigt, Animation (gif) aber nicht ausgeführt oder der Link der Animation wird unter das Startbild gesetzt oder der Beitrag an sich ist schlicht leer, als wäre dort nichts.
Egal wie ichs drehe, wende und probiere... Alles ohne Erfolg.
Da das alles nicht wie gewünscht funktionierte, hab ich überlegt, wie man das noch handhaben könnte.
Letztendlich hab ich dann den ersten Code oben als Index.html gespeichert, auf ner externen Seite hochgeladen und das Ergebnis als iframe eingebunden, was dann auch funktionierte wie gewünscht, ist halt nur sehr umständlich. 
Jetzt ist meine Frage: Fehler von mir, ist irgendwas an den Codes falsch, hab ich irgendwas übersehen oder kann man in normalen Beiträgen das von mir gewünschte so wie ichs probiert habe nicht umsetzen?
Gibt es denn einen Weg, sowas in Beiträgen zu realisieren ohne umständliche Wege bzw. andere Alternativen, außer es per iframe einzubinden?
Jap, das funktioniert, war Versuch Nr. 1 mit genau dieser Variante. Zumindest in jedem Online-Editor funktionieren sie alle, im Forum passiert dann genau das: 
Es wird halt zerlegt.
Ich schätze mal, es liegt nicht an den Codes.
Werde also bei der iframe-Methode bleiben müssen.
Trotzdem danke an dich, Fränki 
#6 RE: Gif-Animation durch Klick starten
#8 RE: Gif-Animation durch Klick starten
(
gelöscht
)
#9 RE: Gif-Animation durch Klick starten
(
gelöscht
)
... Grafiken per CSS wachsen lassen, um Aufmerksamkeit zu erregen:
(nur mal etwas zum ausprobieren für Intessierte)
CSS:
2
3
4
5
6
7
8
9
10
11
12
13
@keyframes widthgrow {
from {
width: 100px;}
to {
width: 200px;}
}
.fire_grow {
animation: widthgrow 5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
HTML:
<img class="fire_grow" src=" ...Bildadresse..." />
Die Beispielwerte bitte entsprechend anpassen . 
(P.S.: das hat jetzt nix mit dem Clickstart in der Themenüberschrift zu tun, die Grafiken wachsen und schrumpfen im Falle infinite.)
MfG
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!