Animation

[traumfantasie]

Hallo,

ich muss von vornherein sagen, dass ich von javascript und so keine Ahnung habe. Ich schaffe es mich so gut es geht durch html und css durchzukämpfen und komme soweit einigermaßen zurecht. Mit Google und viel Zeit konnte ich bis jetzt meine Probleme bei der Erstellung meiner Website gut lösen.
Aber nun weiß ich irgendwie gar nicht mehr weiter.
Ich habe ein Bild. Dieses ist verlinkt auf eine neue Seite. Weiterhin habe ich eine simple gif Animation, die durch das Klicken auf das Bild einmalig ausgelöst werden soll.
Wie bekomme ich das hin, dass diese Animation ausgeführt wird und danach auf die neue Seite weiterverlinkt wird. Zusätzlich soll ein kleiner Soundeffekt mit der Animation zusammen ausgeführt werden.
Ist dies für mich als Laie umsetzbar? Ich hoffe ja. Ich bin für jede Hilfe dankbar.

LG Traumfantasie

 

[Enigmon]

Hilft dir das?



Gruss
Thomas

 

[traumfantasie]

Hi Thomas,

so richtig hilft es mir leider nicht. Da ich nicht weiß wo und wie ich das gif eintrage.
Bei dem Beispiel steht ja was davon, dass links 100px dazukommen. Zumindest glaube ich das so zu verstehen. Wie gesagt ich verstehe nicht viel davon.
Ich möchte ein Bild anklicken und dann soll sich die gif Animation öffnen und dann soll der Link zur nächsten Seite gehen.
Einen Link in html definieren ist mir klar. Nun müsste es ja eine Funktion geben, die sich auf den Klick bezieht und das gif öffnet bevor es zur Verlinkung geht.

 

[fakerer]

Ich würde das bild ohne link einbinden,
bei klick auf das bild gif einblenden, Zeitverzögerung, und dann weiterleiten

abfangen mit .click wenn du jquery verwendetst oder du steckst alles in eine funktion und rufst die mit onClick auf
zeitverzögerung mit setTimeout
window.location.href zum weiterleiten

 

[traumfantasie]

ich bräuchte eigentlich ein code beispiel welchen ich dann versuchen kann anzupassen.
mit den einzelnen befehlen weiß ich zwar was gemeint ist aber ich weiß nicht wie der code geschrieben werden muss.
das ist eigentlich das hauptproblem.

lg

 

[fakerer]

also malen nach zahlen

<div id="test">
    <img src="image"  />
    <img src="animation.gif" style="display: none;" />
</div>

#test{
    position: relative;
}
#test img{
    position: absolute;
    top: 0;
    left: 0;
}

$('#test').click(function() {
  $('#test img').show();
  setTimeout(function() {
      window.location.href = "http://ziel.seite";
  }, 2000);
});

nicht getestet sollte aber tun was du willst, aber ohne Sound damit hab ich mich noch nie beschäftigt, da ich so was auf Webseiten nicht mag

 

[traumfantasie]

Danke dir,

ich muss mal sehen wann ich die Zeit finde das zu testen. Heute passt es leider nicht.
Der Sound ist auch eher nur ein Ton. Es ist das Geräusch beim Fotografieren. Musik auf Webseiten mag ich auch nicht unbedingt.

lg

 

[fakerer]

da fällt mir gerade ein du könntest natürlich auch ein filmchen mit ton abspielen anstatt dem gif, was du dann einblendest ist ja egal.
Soweit ich weis glaub ich gibts auch immer wieder Probleme mit dem Format bei den Audiodatein welcher Browser was unterstützt das würde dann auch wegfallen, kann aber auch sein das sich das in der Zwischenzeit geändert hat, aber ich vermute mal eher nicht.

 

[traumfantasie]

ich habe es jetzt ausprobiert und leider funktioniert es nicht. es ist gar keine verlinkung vorhanden. es wird nur das bild angezeigt.

lg

 

[fakerer]

hi,

also wo liegt das Problem?
Hab es jetzt getestet https://jsfiddle.net/fakerer/tyhvhoqd/3/ läuft

lg

PS: Dafür benötigst du jquery!
Link gibts es keinen stimmt weil mit javascript der click auf das div als event verarbeitet wird.

 

[traumfantasie]

ich habe die daten lokal auf der festplatte und habe alles so eingefügt wie du es mir geschrieben hast. natürliuch mit meinen daten. bei mir wird nur mein bild angezeigt und das wars. weder link noch die gif datei werden geöffnet.
was heißt ich brauche jquery?

 

[patrick_l]

was heißt ich brauche jquery?

So wie es das steht, du benötigst jQuery jQuery ist eine häufig genutzte JavaScript Bibliothek (ein JS Framework). Kurz um, eine "einfach" zu nutzendes Framework, das Browser übergreifend funktioniert. Was mit JavaScript selbst nicht per se der Fall ist.

- jQuery herunterladen

Liebe Grüße, Patrick

 

[traumfantasie]

ich habe auch die ganze zeit gegooglet und diese seite gefunden.
da werden aber so viele versionen angeboten. ich habe nun mal eine davon kopiert und im dreamweaver in eine neue datei eingefügt und diese als jquery.js gespeichert. dann habe ich im html code diese datei eingebunden <script src="scripte/jquery.js> und dann der rest.
aber auch das brachte keinen erfolg. ich weiß nicht mehr weiter. habe den code jetzt mehrmals verglichen und es ist alles in ordnung.

 

[Myhar]

"Es funktioniert nicht" ist keine Fehlerbeschreibung. Was sagen die Webdeveloper-Tools? Wird ein Fehler in der Konsole angezeigt? Werden die Skripte alle vollständig geladen?

 

[fakerer]

hat du den javascriptcode in einen script tag gesteckt?

<script type="text/javascript">
</script>

 

[traumfantasie]

so sieht mein code aus. bitte nehmt mich nicht so hart ins gericht ich bin völliger anfänger was das betrifft und kenne mich nur sehr wenig damit aus.

<script src="Scripts/jquery.js" type="text/javascript">
$('#kamera').click(function() {
  $('#kamera img').show();
  setTimeout(function() {
      window.location.href = "index.html";
  }, 2000);
});
</script>

</head>
<body>

<div id="kamera">
<img src="bilder/kamera.png" />
<img src="bilder/verschluss.gif" style="display: none;" />
</div>

</body>
</html>

@Myhar
man müsste dann auch wissen, wie man solche tools richtig anwendet. da ich mich wie schon erwähnt nicht sehr gut auskenne, weiß ich mit dem tool nicht wirklich was anzufangen.
ich habe mir für firefox den web-developer instaliert. aber da weiß ich leider nicht mit umzugehen.

 

[fakerer]

<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript">
<!--
$('#kamera').click(function() {
    $('#kamera img').show();
    .......  
-->
</script>

Versuchs mal so habe es so wie du noch nie gemacht, aber vielleicth ist das eh nicht das Problem, aber einen Versuch wert.

 

[traumfantasie]

was meinst du damit, so wie ich hast du es noch nicht gemacht?

ich habe mal dein beispiel mit dem sportbild und dem gebäude kopiert. selbst das läuft bei mir nicht. obwohl ich nichts verändert habe.
jetzt verstehe ich gar nichts mehr. bis jetzt konnte ich jedes problem irgendwie lösen. aber hier weiß ich nun gar nichts mehr. das kann doch nicht so schwer sein. ich muss doch blos den code kopieren und meine pfade angeben. bin nun sehr enttäuscht von mir, dass das gar nicht klappt.

 

[traumfantasie]

juchhu, ich habe es geschafft. ich habe jetzt stück für stück hier http://www.html-seminar.de/jquery-tutorial.htm gelesen und den code nochmal selber zusammen gebastelt.
als erstes wird da erklärt, dass erst alle ressourcen geladen sein sollten und das mit diesem befehl
$(document).ready(function(){ gesichert wird. weiterhin wird bei mir schon weiter vorne ein befehl geschlossen.
der gesamte script-code sieht bei mir jetzt so aus

<script type="text/javascript" src="Scripts/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('#kamera').click(function() {
        $('#kamera img').show();
        })
        setTimeout(function() {
      window.location.href = "index.html";
  }, 2000);
    
})
</script>

also schon das gleiche bis auf ein paar kleinigkeiten. zeile 4 und zeile 7 unterscheiden sich zu dem vorgeschlgenen code, der bei mir nicht funktionierte.
vielen dank für eure hilfe.
lg

 

[patrick_l]

@traumfantasie Mein gut gemeinter Tipp an dich, trenne dich von deiner bisherigen Herangehensweise. Sprich, lerne die Basics von HTML und CSS. Erst wenn du beides verinnerlicht hast, solltest du dich gründlich mit der Client-seitigen Programmierung beschäftigen. Jetzt jedoch zurück zu deiner eigentlichen Frage.

Wenn du den den IE8 noch unterstützen möchtest, solltest du die jQuery in der Version 1.x verwenden. Wenn dem nicht so ist, verwende die jQuery 2.x.

jQuery 1.11.3 herunterladen | jQuery 2.1.4 herunterladen
​

jQuery am Ende deiner Seite, jedoch vor dem schließenden Body-Tag einbinden. Ebenso den Pfad an deine Verzeichnisstruktur anpassen!:

<!-- jQuery 1.11.3 einbinden -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- jQuery 2.1.4 einbinden -->
<script src="js/jquery-2.1.4.min.js"></script>

In einem neuen Script-Tag deine JS-Anweisungen notieren.

<script src="js/jquery-1.11.3.min.js"></script>
<script>
    $(document).ready(function) {
        // Deine Anweisungen!
    }
</script>

Wenn du alles korrekt eingebunden hast, sollte es auch laufe.

Liebe Grüße, Patrick