Supportnet / Forum / Webseiten/HTML
"Halloween" Javascript
Frage
Hallo ihr Lieben,
ich wusste nicht genau wo ich es posten sollte, aber ich denke das gehört noch zu Webseiten/HTML...
Bald ist ja Halloween und ich würde gern zu diesem Fest, ein kleines "Erschreck" Extra auf der Seite einbauen, ich habe mir es folgendermaßen vorgstellt:
--> wenn man die Seite öffnet soll ein Monster (eine Grafik...) von oben krachen und dann wieder langsam nach oben zurückgehen.
Meine Frage ist es jetzt, gibt es so ein Javascript Code, oder irgendein Code,Mittel... wie man so etwas machen könnte.
Würde mich über eine Antwort freuen.
Liebe Grüße,
Marina
Antwort 1 von hallowahn
dazu gibst du dem Bild eine ID, positionierst es per CSS oberhalb des Anzeigefensters (
zum Aufruf von Funktionen in Intervallen benötigst du die Funktion
oder (da bei dir das Intervall ja wechselt)
window.setTimeout
Da ich nicht ahnen kann, wie gut deine JavaScript-Kenntnisse sind, belasse ich es erst einmal dabei.
position:absolute;top:-200px;var monster=document.getElementById("monster");
if (monster) {
var wo= parseInt(monster.style.top);
wo += (hier kommt jetzt die zahl der Pixel rein, um die es sich bewegen soll);
monster.style.top=wo+"px";
}zum Aufruf von Funktionen in Intervallen benötigst du die Funktion
window.setIntervaloder (da bei dir das Intervall ja wechselt)
window.setTimeout
Da ich nicht ahnen kann, wie gut deine JavaScript-Kenntnisse sind, belasse ich es erst einmal dabei.
Antwort 2 von Hailie
Hi hallowahn,
vielen Dank für Deine Antwort. Ich habe es versucht aber irgendwie nichts hingekriegt, weil ich mich mit JavaScript überhaupt nicht auskenne...
Würde mich freuen, wenn Du vielleicht etwas genauer erklären würdest wie es geht...
Wie man einem Bild eine ID gibt und wo genau ich diesen Code posten muss, denn wenn ich den im Head Breich poste, nimmt Dreamweaver es nicht an...
Liebe Grüße,
Marina
vielen Dank für Deine Antwort. Ich habe es versucht aber irgendwie nichts hingekriegt, weil ich mich mit JavaScript überhaupt nicht auskenne...
Würde mich freuen, wenn Du vielleicht etwas genauer erklären würdest wie es geht...
Wie man einem Bild eine ID gibt und wo genau ich diesen Code posten muss, denn wenn ich den im Head Breich poste, nimmt Dreamweaver es nicht an...
Liebe Grüße,
Marina
Antwort 3 von hallowahn
So ungefähr sollte der Quellcode aussehen. Du musst dazu in die Quellcode-Ansicht von DW gehen oder ein anderes Programm (jeder simple Editor tuts besser als DW) nehmen:
Du kannst mit den Zahlen in
monsterbewegen(20,100)
und
y = -5;
speed = 200;
experimentieren um den gewünschten Effekt zu erhalten.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Happy Halloween</title>
<script type="text/javascript">
function monsterbewegen(y,speed) {
var monster=document.getElementById("monster");
if (monster) {
var wo= parseInt(monster.style.top);
if (wo > 400) {
y = -15;
speed = 200;
}
else if (wo < -2000) return;
wo += y;
monster.style.top=wo+"px";
window.setTimeout("monsterbewegen("+y+","+speed+")", speed);
}}
window.onload=function() {
monsterbewegen(200,10);
}
</script>
</head>
<body>
<h1>Happy Halloween</h1>
<img src="bild1.jpg" alt="Monster" style="position:absolute;top:-2000px;left:100px; z-index:20" id="monster">
<p>gruselige Grüße</p>
</body>
</html>Du kannst mit den Zahlen in
monsterbewegen(20,100)
und
y = -5;
speed = 200;
experimentieren um den gewünschten Effekt zu erhalten.
Antwort 4 von Hailie
Heey,
vielen vielen Dank für Deine Hilfe, es hat geklappt =)
wirklich lustig xDD
danke :-)
Liebe Grüße,
Marina
vielen vielen Dank für Deine Hilfe, es hat geklappt =)
wirklich lustig xDD
danke :-)
Liebe Grüße,
Marina
Antwort 5 von hallowahn
nochmals das Script, aber diesmal ohne den Fehler:
Der Quellcode in Antwort 3 würe nicht validieren!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Happy Halloween</title>
<script type="text/javascript">
function monsterbewegen(y,speed) {
var monster=document.getElementById("monster");
if (monster) {
var wo= parseInt(monster.style.top);
if (wo > 400) {
y = -15;
speed = 200;
}
else if (wo < -2000) return;
wo += y;
monster.style.top=wo+"px";
window.setTimeout("monsterbewegen("+y+","+speed+")", speed);
}}
window.onload=function() {
monsterbewegen(200,10);
}
</script>
</head>
<body>
<h1>Happy Halloween</h1>
<img src="bild1.jpg" alt="Monster" style="position:absolute;top:-2000px;left:100px; z-index:20" id="monster">
<p>gruselige Grüße</p>
</body>
</html>Der Quellcode in Antwort 3 würe nicht validieren!