✔ bilder wechsel per neuladen

son gohan

son gohan

Erfahrenes Mitglied
bilder wechsel bei neuladen der Seite

hallo,

ich brauche ein Script das bei jedem neuladen der Seite ein Bild wechselt.

Ich hatte normal schon ein geeignete Lösung vor 2 Monaten gefunden aber die verstehe ich heute nicht mehr.

HTML: 
<html>
<head>
<title>Test</title>
</head>
<body>
<a href="http://www.url.de/seite0.htm"><img name="banner"src="http://www.url.de/bild0.gif"alt="werbung"></a>
<script language="javascript">
<!--
	//Wichtig: das Skript muss im Quelltext hinter dem Banner stehen
	//jeweils paarweise Grafikadresse und Ziel-Url
arrImgs=
[
	['1.gif','http://www.url.de/seite1.htm'],
	['2.gif','http://www.url.de/seite2.htm'],
	['Aktuelles.png','http://www.url.de/seite3.htm'] //Achtung:nach dem letzten Array darf kein Komma stehen
];
	//Zufallszahl ermitteln
intRand = Math.floor(Math.random() * arrImgs.length);
	//Bild austauschen
document.banner.src = arrImgs[intRand][0];
	//onclick-Anweisung fürs Popup dem Bild zuweisen
document.banner.onclick = new Function("F1","window.open('"+arrImgs[intRand][1]+"');return false;");
//-->
</script>
</body>
</html>

Hier das Script kappier ich nicht mehr.

Ich will nur das sich das Bild wechselt bei jedem neuladen der Seite und brauche keine Hyperlinks darin. Am besten wäre es aber wenn sich der Bilderwechseln zufällig abspielt.
 
Zuletzt bearbeitet:
Hallo,

ich konnte durch ein wenig rumspielerei es so hibekommen, das nun die Bilder sich wechseln bei neuladen der Seite.

HTML: 
 <html>
<head>
<title>Test</title>
</head>
<body>
<img name="banner" src="http://www.url.de/bild0.gif"alt="werbung">
<script language="javascript">
<!--
	//Wichtig: das Skript muss im Quelltext hinter dem Banner stehen
	//jeweils paarweise Grafikadresse und Ziel-Url
arrImgs=
[
	['3548e2870afa.jpg'],
	['1f7cf18e5893.jpg'],
	['2ce2b87b9d50.jpg']  //Achtung:nach dem letzten Array darf kein Komma stehen
];
	//Zufallszahl ermitteln
intRand = Math.floor(Math.random() * arrImgs.length);
	//Bild austauschen
document.banner.src = arrImgs[intRand][0];
	//onclick-Anweisung fürs Popup dem Bild zuweisen
document.banner.onclick = new Function("F1","window.open('"+arrImgs[intRand][1]+"');return false;");
//-->
</script>
</body>
</html>
Neuse Problem hat sich aber rausgestellt. Die Bilder die sich wechseln sollen befinden sich in einem DIV Container mit CSS Attribut. In dem Div Container mit Hintergrundbild steht dann auch noch etwas Text.

Wenn ich das Script mit Bild in diesen Container rein tue und die CSS Attribute für Hintergrundbild rausnehme, dann müsste es sich ja wechseln, aber der Text der vorherschon im Hintergrundbild stand, steht jetzt darunter weil das img Tag ja direkt eingebaut wird, was vorher mit CSS und background gemacht.

Naja, ihr versteht schon sicher. Wie könnte man es jetzt hinbekommen, das es nicht zu dieser Verschiebung kommt usw?
 
Hallo,

wie schreibe ich das Javascript damit es XHTML gerecht ist (DOM)

HTML: 
 <script language="javascript">
<!--
	//Wichtig: das Skript muss im Quelltext hinter dem Banner stehen
	//jeweils paarweise Grafikadresse und Ziel-Url
arrImgs=
[
	['jpg/obenone.jpg'],
	['1f7cf18e5893.jpg'],
	['2ce2b87b9d50.jpg'] //Achtung:nach dem letzten Array darf kein Komma stehen
];
	//Zufallszahl ermitteln
intRand = Math.floor(Math.random() * arrImgs.length);
	//Bild austauschen
document.banner.src = arrImgs[intRand][0];
	//onclick-Anweisung fürs Popup dem Bild zuweisen
document.banner.onclick = new Function("F1","window.open('"+arrImgs[intRand][1]+"');return false;");
//-->
</script>
 
feh hat gesagt.:
(...) Neuse Problem hat sich aber rausgestellt. Die Bilder die sich wechseln sollen befinden sich in einem DIV Container mit CSS Attribut. In dem Div Container mit Hintergrundbild steht dann auch noch etwas Text.

Wenn ich das Script mit Bild in diesen Container rein tue und die CSS Attribute für Hintergrundbild rausnehme, dann müsste es sich ja wechseln, aber der Text der vorherschon im Hintergrundbild stand, steht jetzt darunter weil das img Tag ja direkt eingebaut wird, was vorher mit CSS und background gemacht.

(...) Wie könnte man es jetzt hinbekommen, das es nicht zu dieser Verschiebung kommt usw?
Zum Vergrößern anklicken....
Du gibst den bildern einen z-index und dem Text einen höheren.
 
Hallo,

ich glaube mit z-index geht das nicht. Die Hintergrundbilder befinden sich normalerweise in einem Div Container und werden mit CSS angezeigt.

Um die Bilder aber zum Wechseln zu bringen musst das Javascript eigebaut werden, welches bei jedem Neuladen der Seite die Bilder wechselt. Den anders bekommt man es ja nicht hin das die Bilder gewechselt werden. Es sei den vielleicht mit einem PHP Script welches mir eigentlich auch liber wäre weil man es nicht abschalten könnte im Browser.

Also habe ich den div Containern ihre CSS Attribute weckgenommen und die Hintergrundbilder nun als direkte Bilder in die div Container gelegt. Dadurch hat sich aber der Text welcher vorher vor den Hintergrundbilder stand nun eine Reihe nach unten verschoben, da das Hintergrundbild seinen Platz brauch.

Wie ich das nach deinen Vorstellungen genau mit z-index und CSS machen hätte können weis ich nicht. Den immerhin hätte ich doch in jedemfall die Bilder direkt einsetzten müssen in die div Container inklusive Wechselscript. Und sobald die Bilder direkt in den Div Conatiner reingesetzt werden verschiebt sich ja auch der Text eine Reihe weiter runter. Z-index kenne ich nur in Zusammenhang mit position:absolute und übereinanderlegen.

Aha, vielleicht habe ich mir das ganze jetzt damit beantwortet. Ich müsste vielleicht an der Stelle die Div Container mit position:absolute positionieren um dann mit z-index den Text vor die Bilder zu stellen, oder meinst du einen anderen Weg?

Trotz allem habe ich jetzt erst mal wieder eine Fehlermeldung zu dem Javascript bekommen, da müsste man sich ja fast schon schämmen das man immer noch kein Javscript kann, aber bevor ich die Zeit dazu hätte, müsste ich es erst mal viel öfter benötigen um es erst anzufangen zu lernen.

Der IE Browser meldet: Zeile 69, Zeichen 1, `document.banner` ist null oder kein Obejekt.

Der Fehler trat heute erst auf, vielleicht liegt es daran, das ich dem img Tag vor dem Script anstat dem Attribut name="banner" ein Attribut id gegeben habe, um das Dokument valide zu bekommen musste es zumindest so sein, und das die Fehlermeldung auch daher kommt bin ich mir fast sicher. Nur wie kann ich das sonst hinbekomen, ein id muss der IE Browser doch auch akzeptieren.

Hier der aktuelle Code:
HTML: 
 <img class="headbild" id="banner" src="jpg/obenone.jpg" alt="NP-K.de" /></p>
<script type="text/javascript">
<!--
	//Wichtig: das Skript muss im Quelltext hinter dem Banner stehen
	//jeweils paarweise Grafikadresse und Ziel-Url
arrImgs=
[
	['jpg/obenone.jpg'],
	['jpg/obentwo.jpg'],
	['jpg/obentre.jpg'],
	['jpg/obenfour.jpg'],
	['jpg/obenfive.jpg'] //Achtung:nach dem letzten Array darf kein Komma stehen
];
	//Zufallszahl ermitteln
intRand = Math.floor(Math.random() * arrImgs.length);
	//Bild austauschen
document.banner.src = arrImgs[intRand][0];
	//onclick-Anweisung fürs Popup dem Bild zuweisen
document.banner.onclick = new Function("F1","window.open('"+arrImgs[intRand][1]+"');return false;");
//-->
</script>

P.S. ich habe auch noch bemerkt das das Script die Bilder verlinken tut. Das heist wenn man auf ein Bild klick welches durch das Javascript ausgegeben wird, dann öffnet sich ein Fenster. Das würde ich gerne auch noch ausbauen, aber ich weis nicht wie.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück