Gruppen

Top Gruppen: Windows 7; Windows Vista; Windows XP; Textverarbeitung; Excel; DSL; Internet Browser; E-Mail/Outlook
Betriebsysteme: Windows classik; Linux; BS-Sonstige
Software: Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; SW-Sonstige
Hardware: Mainboard/CPU; Grafikkarten; Peripherie; Laptop/Notebook; HW-Sonstiges
Netzwerk: Telefon,ISDN,Modem; W-Lan; NW-Sonstiges
Programmierung: PHP,ASP,Perl...; Java,C++...; Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke; SN Intern; Test

/ Forum / Webseiten/HTML

Webseiten/HTML

Fragevon Hailie vom 11.10.2019, 14:54 Options

"Halloween" Javascript

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 schreiben

Antwort 1 von hallowahn vom 11.10.2019, 15:05 Options

dazu gibst du dem Bild eine ID, positionierst es per CSS oberhalb des Anzeigefensters (

position:absolute;top:-200px;

) und änderst per JavaScript die Position in verschiedenen Intervallen

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

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.

Antwort 2 von Hailie vom 12.10.2019, 21:38 Options

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

Antwort 3 von hallowahn vom 13.10.2019, 10:09 Options

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:

<!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 vom 13.10.2019, 17:46 Options

Heey,
vielen vielen Dank für Deine Hilfe, es hat geklappt =)
wirklich lustig xDD

danke :-)

Liebe Grüße,
Marina

Antwort 5 von hallowahn vom 16.10.2019, 06:51 Options

nochmals das Script, aber diesmal ohne den Fehler:

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

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..

Neue Einträge

Tipp einschicken

News einschicken