Antworten auf deine Fragen:
Neues Thema erstellen

Animation

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
 

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

Aktives Mitglied

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
 
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

Aktives Mitglied

also malen nach zahlen :)

HTML:
<div id="test">
    <img src="image"  />
    <img src="animation.gif" style="display: none;" />
</div>
CSS:
#test{
    position: relative;
}
#test img{
    position: absolute;
    top: 0;
    left: 0;
}
Javascript:
$('#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 :)
 
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

Aktives Mitglied

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.
 
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?
 
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

Hat es drauf

"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?
 
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.

Code:
<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.
 
Zuletzt bearbeitet:

fakerer

Aktives Mitglied

Code:
<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.
 
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.
 
Zuletzt bearbeitet:
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
Code:
<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

Hat es drauf

@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 am Ende deiner Seite, jedoch vor dem schließenden Body-Tag einbinden. Ebenso den Pfad an deine Verzeichnisstruktur anpassen!:
HTML:
<!-- 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.
HTML:
<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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.639
Beiträge
1.538.503
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben