Animierter Eingang,aber wie ???

  • geschlossen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Animierter Eingang,aber wie ???

    Hallöchen Zusammen,

    ich suche ein Programm oder einen Code wie auch immer,mit dem man ein Tor oder eine Tür erzeugen kann die sich bei drauf klicken öffnet und man auch eine andere Seite gelangt......

    Aber wie stell ich dass ganze an,bitte helft mir,brauche ich dringend fürs Geschäft :(
  • Hallo,
    am besten ist es doch, das wenn man mit der Maus drüber fährt, sich die Tür öffnet und wenn man drauf klickt, die Seite ändert, oder?
    Oder willst du das so machen, dass du einmal klickst, sich erst das Bild ändert und dann nach ein paar Sekunden die Seite?
    Lässt sich beides ohne Probleme realisieren.

    Gruß
    Broken sword
  • Broken Sword schrieb:

    Hallo,
    am besten ist es doch, das wenn man mit der Maus drüber fährt, sich die Tür öffnet und wenn man drauf klickt, die Seite ändert, oder?
    Oder willst du das so machen, dass du einmal klickst, sich erst das Bild ändert und dann nach ein paar Sekunden die Seite?
    Lässt sich beides ohne Probleme realisieren.

    Gruß
    Broken sword


    Ja,dass hört sich gut an,dass sich die Tür öffnet,wenn man mit der Maus drüber fährt...

    und wie kann ic hdass umsetzen ? :(
  • Hi,
    also du brauchst zwei Bilder. Einmal Bild mit geschlossener Tür und einmal Bild mit offener Tür.
    Habe diese einfach mal "door_open.gif" und "door_closed.gif" genannt. Die Seite, die "danach" kommt, heißt bei mir "weiter.html".

    HTML-Quellcode

    1. <img src="door_closed.gif" onmouseover="this.src='door_open.gif';" onmouseout="this.src='door_closed.gif';" onclick="window.location.href = 'weiter.html';" style="border:0px;" alt="Bitte hier klicken!" />

    Das einfach einfügen ;)

    Gruß
    Broken Sword
  • Hi,
    hast du mehr Bilder von der Tür? Zum Beispiel, "halb zu/offen"?
    Dann könnte man einen Timer einbauen und dann jedes Bild einzeln anzeigen lassen. Kostete dann halt nur etwas mehr Traffic und für Modem User, wird wahrscheinlich nur der oberen Rand der Tür angezeigt werden.

    Denn eigentlich benutzt man für solche Zwecke Flash. Ein benutzerfreundliches Programm zur Erstellung von Flash-Applikationen ist "KoolMoves", musst mal googlen, bzw. hier suchen.

    Gruß
    Broken Sword
  • Hallo broken Sword!
    Ich habe leider nur die bilder, die auf der HP sind. Den rest müsste man selber Pixeln, aber das ist sicher nicht schwer. Wieviele verschiede "Stellungen der Tür" willst du haben? Dann könnter ich es mal versuchen dieses zu realisieren :)
  • Hi,
    öhh.. etwas verwirrend. Nehme einfach mal an, dass du den selben Wunsch hast, wie KingstonTown ^^"
    Also das liegt ja ganz bei dir, wie viele du machen willst.. Habe das mal als Test gemacht:

    HTML-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <title>Test</title>
    5. <script type="text/javascript">
    6. // <![CDATA[
    7. // Begin open-door script
    8. var i=0;
    9. var timeout=0;
    10. function UpdateIt() {
    11. if(i < 5) {
    12. i++;
    13. document.getElementById('opendoor').src = 'door_open_'+i+'.gif';
    14. }
    15. else clearTimeout(timeout);
    16. }
    17. function startopen() {
    18. timeout = setTimeout('UpdateIt()', 1000);
    19. document.getElementById('opendoor').src='door_open_1.gif';
    20. }
    21. function stopopen() {
    22. if(timeout) clearTimeout(timeout);
    23. i=0;
    24. document.getElementById('opendoor').src='door_open_0.gif';
    25. }
    26. // End open-door script
    27. // ]]>
    28. </script>
    29. </head>
    30. <body>
    31. <img src="door_open_0.gif" id='opendoor' onmouseover="startopen();" onmouseout="stopopen();" onclick="window.location.href = 'weiter.html';" style="border:0px;" alt="Bitte hier klicken!" />
    32. </body>
    33. </html>
    Alles anzeigen

    Hier ist door_open_0.gif die offene Tür und dann geht es schrittweise bis door_open_4.gif was die offene Tür darstellt. Musst du halt verändern, wie weit es bei dir geht. Dann musst du halt bei if(i<5) die Zahl ändern und zwar um das, was bei die offene Tür ist +1.
    Kapiert^^???

    Gruß
    Broken Sword