Bild bei Klick darauf animieren (HTML)?
Hallo zusammen,
ich möchte gerne in HTML eine Rakete haben und wenn man auf die Rakete klickt, dann sollte diese starten oder zumindest die Farbe ändern. Die Rakete sieht so aus.
Hat mir jemand direkt den HTML Code dazu? Ich kenne mich damit leider nur ansatzweise aus.
Danke :)
3 Antworten
Nur mit HTML wird das nicht möglich sei. Mit CSS sollte es möglich sein. Je nachdem wie du die Animation machen willst, also ob du mehrere Bilder hast die du nacheinander abspielen willst, mehrere HTML Elemente von denen du die Position dann änderst oder SVG-Path Transformationen unterscheidet sich da die herangehensweise. Evtl. müsste man das auch mit JavaScript machen.
Schau am besten online nach "HTML events". Dann kannst du den gewollten Event finden. Wenn du zum Beispiel die Animation nach dem Klick darauf möchtest wäre der Event dann "click".
Um die Farbe zu ändern müsstest du dann sehr wahrscheinlich einfach das Bild durch ein farbiges ersetzen, animieren mit HTML ist sehr schwierig... Vielleicht hilft dir da auch PHP weiter, da kenne ich mich aber gar nicht aus.
Hoffe trotzdem, dass ich dir helfen konnte! :)
<head>
<script>
function switchImage() {
document.getImageByID("rakete").src = "rakete_fliegend.png";
}
</script>
</head>
<body>
<img id="rakete" src="rakete_stehend.png" onclick="switchImage()">
</body>
Dieses Snippet wird nicht funktionieren, da es eine Methode getImageByID nicht gibt. Sie müsste durch getElementById ersetzt werden. Für den praktischen Einsatz sollte natürlich noch ein alt-Attribut auf dem img-Element ergänzt und die noch notwendigen Elemente für das Dokument angefügt werden (title, Doctype).
Animation kann man das ganze aber nicht wirklich nennen^^