Bild setTimeout mit Einblend- und Ausblendzeit innerhalb einer function

[Candy4us]

Hallo Forengemeinde,


ich habe mit javascript nicht viel am Hut, und mir immer durch die Google-Suche und diverser Forenbeitraege ggf. Code-Snippets behelfen koennen. Nun bin ich aber auf ein Problem gestossen, was ich durch zich Snippet-Versuche einfach nicht gebacken bekomme. Entweder funktioniert das eine, aber dann wieder nicht in der Combi mit dem anderen.

Also was moechte ich nun umsetzen ...

Ich habe einen kostenlosen Grusskarten-Service bei dem man spaeter per Klick (Parse) diverse Effekte einblenden kann ... und in einer Grusskarte soll per click auf einen Grafikbutton ein Divider geoeffnet werden. In diesem Divider soll umgehend eine Soundfile per embed abgespielt werden. Zwei Sekunden spaeter soll dann ein Image erscheinen, und dieses nach 10 Sekunden wieder ausgeblendet, und der Divider geschlossen werden. So dass nur wieder der Grafikbutton zum erneuten abspielen angezeigt wird.


Mein derzeitig funktionierender Code fuer den Buttonaufruf lautet (aber leider ohne setTimeout):

'[xplode]' => '<button id="demo" class="button4" onclick="myFunction()" title="Anklicken zum Abspielen der Überraschung">
<img src="/ecard/img/editor/button.png"></button>
<script>function myFunction() {
document.getElementById("demo").innerHTML = "<img src=/ecard/img/santa-pop.png>
<embed src=/ecard/music/santa-pop.mp3 autostart=true loop=true hidden=true height=0 width=0>";
}
</script>',

Hier mein Code mit setTimeout (Divider ploppt auf, doch wird die Grafik nicht angezeigt und bleibt unsichtbar):

'[xplode]' => '<button id="demo" class="button4" onclick="myFunction()" title="Anklicken zum Abspielen der Überraschung">
<img src="/ecard/img/editor/button.png"></button>
<script>function myFunction() {
document.getElementById("demo").innerHTML = "<div id=container style=visibility:hidden;><img src=/ecard/img/santa-pop.png></div>
<embed src=/ecard/music/santa-pop.mp3 autostart=true loop=true hidden=true height=0 width=0>";}</script>
<script type="text/javascript">function show_container() {
document.getElementById("container").style.visibility = "visible";
}window.setTimeout("show_container()", 2500);</script>',

Nehme ich nun NUR den untenstehenden Code, dann funktioniert es ... *grrr*:

<div id="container" style="visibility:hidden;"><img src="/ecard/img/santa-pop.png"></div>
<script type="text/javascript">function show_container() {
document.getElementById("container").style.visibility = "visible";
}
window.setTimeout("show_container()", 2000);</script>
<embed src="/ecard/music/santa-pop.mp3" autostart="true" loop="true" hidden="true" height="0" width="0">

Es waere schoen wenn ihr mir weiterhelfen koenntet ... auch wie ich es erreichen kann,
dass das Image-File nach 10 Sekunden ausgeblendet UND der Divider anschliessend geschlossen wird.


Ich bedanke mich schon im voraus,
lieber Gruss Heike

 

[Sempervivum]

'[xplode]' => '<button id="demo" ...Diese Syntax ist mir nicht bekannt - ist das ein CMS oder Shopsystem? Ebenso ist mir der Begriff "Divider" nicht bekannt

 

[Candy4us]

Hallo Sempervivium,

wie ich eingangs schon beschrieben habe, handelt es sich dabei um ein Grusskarten-Service (in PHP) ... ein Divider ist ein Layer (CSS).

Lieber Gruss, Heike

 

[Sempervivum]

Ah so, von den Arrays in PHP ist mir diese Syntax schon bekannt.