Mehrere anzeigen von wechselnden Bildern
0 2 
Felix Riesterer
Mehrere anzeigen von wechselnden Bildern
Hallo alle zusammen :)
habe ein kleines Problem beim erstellen einer HTML seite,
Ich habe es bereits hinbekommen mehrere elemente zu definieren und auch zu platzieren allerdings ist die anzeige um 1 nach rechts versetzt, vielleicht erkennt jemand von euch den fehler.
Es geht um eine HTML seite für ein Schulprojekt also nicht wudern ;)
Code anbei
LG Roy
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<title>Ashton Kutcher</title>
<div align="center">
<h1>Ashton Kutcher</h1>
</div>
</head>
<body>
<div align="center">
<img src="Die Wilden Siebziger.gif" width="300" height="200" alt="Die Wilden Siebziger">
<script type="text/javascript">
var a = new Array(1);
a[0] = new Image(); a[0].src = "Die Wilden Siebziger cover.jpg";
a[1] = new Image(); a[1].src = "Die Wilden Siebziger 1.jpg";
a[2] = new Image(); a[2].src = "Die Wilden Siebziger 2.jpg";
a[3] = new Image(); a[3].src = "Die Wilden Siebziger 3.jpg";
var i = 0;
function Animation1 () {
if (i > 3)
i = 0;
document.images[1].src = a[i].src;
i = i + 1;
window.setTimeout("Animation1 ()", 2000);
}
window.setTimeout("Animation1 ()", 2000);
</script>
</img>
<img src="Ey mann wo ist mein auto.gif" width="300" height="200" alt="Ey mann wo ist mein auto">
<script type="text/javascript">
var b = new Array(2);
b[0] = new Image(); b[0].src = "Ey mann wo ist mein auto cover.jpg";
b[1] = new Image(); b[1].src = "Ey mann wo ist mein auto 1.jpg";
b[2] = new Image(); b[2].src = "Ey mann wo ist mein auto 2.jpg";
b[3] = new Image(); b[3].src = "Ey mann wo ist mein auto 3.jpg";
b[4] = new Image(); b[4].src = "Ey mann wo ist mein auto 4.jpg";
b[5] = new Image(); b[5].src = "Ey mann wo ist mein auto 5.jpg";
var j = 0;
function Animation2 () {
if (j > 5)
j = 0;
document.images[2].src = b[j].src;
j = j + 1;
window.setTimeout("Animation2 ()", 2000);
}
window.setTimeout("Animation2 ()", 2000);
</script>
</img>
<img src="Voll Verheiratet.gif" width="300" height="200" alt="Voll Verheiratet">
<script type="text/javascript">
var c = new Array(3);
c[0] = new Image(); c[0].src = "Voll Verheiratet cover.jpg";
c[1] = new Image(); c[1].src = "Voll Verheiratet 1.jpg";
c[2] = new Image(); c[2].src = "Voll Verheiratet 2.jpg";
c[3] = new Image(); c[3].src = "Voll Verheiratet 3.jpg";
c[4] = new Image(); c[4].src = "Voll Verheiratet 4.jpg";
var k = 0;
function Animation3 () {
if (k > 4)
k = 0;
document.images[3].src = c[k].src;
k = k + 1;
window.setTimeout("Animation3 ()", 2000);
}
window.setTimeout("Animation3 ()", 2000);
</script>
</img>
<img src="Butterfly Effect.gif" width="300" height="200" alt="Butterfly Effect">
<script type="text/javascript">
var d = new Array(4);
d[0] = new Image(); d[0].src = "Butterfly Effect cover.jpg";
d[1] = new Image(); d[1].src = "Butterfly Effect 1.jpg";
d[2] = new Image(); d[2].src = "Butterfly Effect 2.jpg";
d[3] = new Image(); d[3].src = "Butterfly Effect 3.jpg";
var l = 0;
function Animation4 () {
if (l > 3)
l = 0;
document.images[4].src = d[l].src;
l = l + 1;
window.setTimeout("Animation4 ()", 2000);
}
window.setTimeout("Animation4 ()", 2000);
</script>
</img>
<img src="Two and a half men.gif" width="300" height="200" alt="Two and a half men">
<script type="text/javascript">
var e = new Array(5);
e[0] = new Image(); e[0].src = "Two and a half men cover.jpg";
e[1] = new Image(); e[1].src = "Two and a half men 1.jpg";
e[2] = new Image(); e[2].src = "Two and a half men 2.jpg";
e[3] = new Image(); e[3].src = "Two and a half men 3.jpg";
e[4] = new Image(); e[4].src = "Two and a half men 4.jpg";
e[5] = new Image(); e[5].src = "Two and a half men 5.jpg";
var m = 0;
function Animation5 () {
if (m > 5)
m = 0;
document.images[5].src = e[m].src;
m = m + 1;
window.setTimeout("Animation5 ()", 2000);
}
window.setTimeout("Animation5 ()", 2000);
</script>
</img>
</body>
</html>
-
allerdings ist die anzeige um 1 nach rechts versetzt
wenn du damit meinst, dass z.B. die dem ersten Bild ("Die Wilden Siebziger") zugedachten Wechselbilder statt des zweiten ("Ey mann wo ist mein auto") erscheinen - das liegt daran, dass die Durchnummerierung der Bilder bei 0 und nicht bei 1 beginnen muss.
vielleicht erkennt jemand von euch den fehler.
da sind noch viel mehr, z.B <div> innerhalb <head>
-
Lieber Darkangel142,
für Bildwechsel gibt es hier einen Fachartikel. Da Du Deine Wechsel mit JavaScript umsetzt, ist Dein Themenbereich natürlich nicht (X)HTML, sondern eben JavaScript.
In diesem Fachartikel findest Du genügend Hinweise, wie Du mit einem fertigen Script mehrere Bildwechsler elegant in Deine Seite einbinden kannst, ohne dass Dein JS-Code unübersichtlich wird.
Ich habe es bereits hinbekommen mehrere elemente zu definieren und auch zu platzieren
Von welchen Elementen sprichst Du? Und was meinst Du mit "platzieren"? Diese <div align="center"> hat man vielleicht um die Jahrtausendwende so gehandhabt, mittlerweile gibt es in allen hinreichend aktuellen Browsern aber exzellenten CSS-Support, den man für "platzieren" auch nutzen sollte. Das Kapitel "CSS/Anwendung und Praxis" sollte Dir die notwendigen Hilfestellungen geben.
Mit genügend CSS kannst Du dann auch das Aussehen Deiner Bildwechsler anpassen, falls deren Standard nicht genügen sollte!
Es geht um eine HTML seite für ein Schulprojekt also nicht wudern ;)
Was willst Du damit sagen?
<head>
<title>Ashton Kutcher</title>
<div align="center">
<h1>Ashton Kutcher</h1>
</div>
</head>Es gibt strenge Regeln, welche Elemente in <head> erlaubt sind (und welche anderen deshalb nicht). Die Elemente <div> und <h1> gehören also offensichtlich nicht in den <head>. Das macht Deinen Code bezüglich der Spezifikationen fehlerhaft.
<img src="Die Wilden Siebziger.gif" width="300" height="200" alt="Die Wilden Siebziger">
<script type="text/javascript">
[... JS-Code ...]
</script>
</img>Das ist Quatsch. Ein <img>-Element ist ein leeres Element, das keine Kindelemente aufnehmen kann. <img>...</img> hat sich leider nicht als Schreibweise für Alternativinhalt durchgesetzt. Dieser muss in das alt-Attribut (wie Du ja schon richtig notierst). Entweder Du lässt das <img>-Element "offen", oder Du notierst es eben selbst-schließend <img />.
Du entwickelst wahrscheinlich auf einer Windows-Kiste. Bitte beachte, dass Dateinamen nach dem Hochladen Probleme bereiten können, wenn sie Großbuchstaben, deutsche Sonder- oder sonstige spezielle Zeichen enthalten, da das korrekte Enkodieren des Dateinamens (sozusagen der letzte Teil der WWW-Adresse) im Rahmen des Referenzierens in HTML sein muss. Ich empfehle meinen Schülern immer Kleinbuchstaben, Ziffern, das Minuszeichen, den Unterstrich und den Punkt. Alle anderen Zeichen sind potenzielle Fehlerquellen, die man von Anfang an vermeiden kann.
Vergiss bitte nicht, dass <img>-Elemente inline-Elemente sind, die in einem Block-Element (z.B. <p>, <h1>..<h6>, <li>, etc.) stehen sollten.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)