Bild nach x Sekunden erscheinen lassen

    Hallo zusammen,

    ich wende mich mit einem Problem/einem Vorhaben an euch, von dem ich hoffe, dass es realisierbar ist:

    Ein Besucher kommt auf die Seite (sowohl Index als auch Unterseiten), nach ca. 10 Sekunden soll ein von mir festgelegtes Bild an einer bestimmten Stelle auf der Seite erscheinen. Super wäre, wenn das Bild auch noch etwas animiert erscheint. Das Bild ist mit einem Link versehen.

    Habt ihr eine Idee, wie ich das realisieren kann? Ich vermute, ein Plugin gibt es hierfür nicht. Habe ich zumindest nicht gefunden, außer ich habe falsch gesucht.

    Ich bin für jede Hilfe dankbar!

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Hallo cobble

    Das kannst du mit JavaScript umsetzen. Oder eventuell auch mittels CSS3 (allerdings ist es dann nicht ganz CrossBrowserfähig).

    LG, pixselig

    Hey,

    danke für die Antwort!

    Jetzt müsste ich nur noch JavaScript beherrschen, leider habe ich nicht besonders viel Ahnung davon :)

    Zugegebenermassen war meine Antwort nicht sehr zielführend :(
    Wenn du aber Google bemühst findest du jede Menge Snippets (Codes) welche das von dir gewünschte machen.
    LG, Pixselig

    Na dann kommt wohl einiges an Arbeit auf mich zu... :)

    Evtl. hat doch noch jemand etwas annähernd fertiges und kann es mir zur Verfügung stellen.

    ein einfaches Script

    in den head Bereich

    HTML
    <script type="text/javascript">
    function showIt() {
      document.getElementById("hid").style.display = "block";
    }
    </script>

    in body

    HTML
    onLoad='setTimeout("showIt()", 10000);'

    also

    HTML
    <body onLoad='setTimeout("showIt()", 10000);'>

    10000 = 10 Sekunden

    und hier noch das div für dein Bildcode

    Code
    <div id="hid" style="display:none;">
hier den Bildcode einfügen
</div>

    So, bin erst jetzt dazu gekommen es zu testen.

    Also das Script funktioniert 1A! Vielen Dank dafür!

    Jetzt muss ich nur noch herausfinden wie das Bild etwas animiert erscheint, aber da findet man sicher einiges bei google.

    Danke nochmal!

    Ich schon wieder :)

    Also, ich habe zwar einige Scripts gefunden, allerdings weiß ich leider nicht wie ich diese in den Code integrierten kann, sodass es damit funktioniert :(

    Das Bild erscheint mit dem o.g. Script wunderbar, allerdings sollte es langsam von unten nach oben erscheinen anstatt einfach "einzublenden".

    Bin für jede Hilfe dankbar!

    Ob es da ein pfannenfertiges Script gibt, das "beide" Kriterien beinhaltet, kann ich dir nicht sagen. Möglich ist das sicher über jQuery, nur wenn du dich damit nicht auskennst wird es schwierig.

    An deiner Stelle würde ich einen passenden Slider suchen, der die nötigen Einstellungen integriert hat. (gibt es ja genügend als Plugin)

    also deinen Fade- bzw. Slide-Effekt
    und die Zeiteinstellung des Bilderwechsels
    sowie der der Einstellung, das der Slider nicht endlos läuft, sondern beim letzten Bild stoppt

    dürfte bei den meisten Slidern vorhanden sein

    als erstes Bild dann einfach ein transparentes.gif(somit sieht man nix)
    und als zweites(nach eingestellten 10sec.) dein gewünschtes Bild

    Hallo zusammen,
    Ich habe mal eine frage und zwar möchte ich den selben Effekt das ein gewisses Bild nach einer gewissen Zeit einblendet,
    leider bin ich noch ein Leihe was das schreiben und einfügen von Skripts angeht und ich würde gerne den oben genannten Skript verwenden.
    leider weiß ich nicht wie ich diesen Skript zusammen setzten(einfügen) muss.
    Vielen Dank im voraus.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden