Bildwechsler mit JS?

S

Sign

Grünschnabel
Hallo,
ich habe mich eben hier neu angemeldet und bin wirklich wie erschlagen von der Masse an Beiträgen. Im Gegensatz zu den meisten hier habe ich kaum (bereits übertrieben) Ahnung von JS, möchte aber meine HP überarbeiten und brauche einen Bildwechsler. Ich bin mir sicher das diese Frage schon öfter gestellt wurde, finde aber keinen Beitrag dazu. Vielleicht kann mir ja jemand helfen?
Meine Vorstellung ist folgende: Im oberen Frame der HP soll ein Bild eingebaut werden. Wenn man nun auf eine Unterseite klickt soll in dem Frame ein anderes Bild auftauchen, das ist ja noch kein Problem, könnte man mit HTLM hinbekommen, aber nun kommt das Schwierige: Wenn man wieder auf die erste Seite klickt, soll dort wieder ein neues Bild geladen werden. Also jedes mal, wenn man auf die Seiten klickt, soll ein anderes Bild zu sehen sein. Gibt es so was?
Würde mich sehr über Feedback freuen. Als Gegenleistung kann ich aber nur Fragen im Bereich Grafik insbesondere Terragen anbieten.


Gruss
Sign
 
Hallo und willkommen hier im Forum :)

Dein Bild muss sich also nicht mit der Verweilzeit des Users auf einer Seite ändern, sondern lediglich bei Aufruf der Seite zufällig eingesetzt werden?

Dann ist eine recht einfache Lösung, ein Array zu definieren, welches die Bild-URLs sortiert enthält und dann per Zufall während dem Laden des Dokumentes einer dieser Arrayeinträge bestimmt wird, um mit diesem das Bild aufzurufen:

Folgendes Script in den head-Teil deines Dokumentes:
HTML: 
<script type="text/javascript" language="JavaScript">
<!--

meineBilder = new Array();
meineBilder[0] = "http://meineurl.de/bild0.jpg";
meineBilder[1] = "http://meineurl.de/bild2.jpg";
meineBilder[2] = "http://meineurl.de/bild3.jpg";
meineBilder[3] = "http://meineurl.de/bild4.jpg";
meineBilder[4] = "http://meineurl.de/bild5.jpg";
meineBilder[5] = "http://meineurl.de/bild6.jpg";
[...]
[beliebig erweitern]

//-->
</script>

und dann innerhalb des body-Tags an entsprechender Stelle, wo das Bild angezeigt werden soll, folgendes:
HTML: 
<img src="platzhalter.gif" onLoad="this.src = meineBilder[Math.round(Math.random()*(meineBilder.length-1))];">

Bräuchtest dann noch ein kleines 1x1 Pixel großes "Leerbild", das zunächst geladen wird, dieses "platzhalter.gif" in meinem Beispiel, und danach ersetzt wird.

Viel Erfolg,
Adam
 
Hallo Adam,
vielen Dank für Deine Hilfe. Das hört sich sehr einfach an. Ich werde es am Wochenende gleich ausprobieren und es dann in der zweiten Version meine HP einbauen. Vielleicht kann die dann schon Anfang der Woche online gehen.
Nochmals vielen lieben Dank :)
Gruss
Carmen
 
Hallo,
leider geht es bei mir im Moment garnicht. Für mich sind diese Scripts wie Zeichen aus dem All. Werde noch ein bisschen basteln. Falls ich es hinbekomme melde ich mich.
Gruss
Carmen
 
So, wie der Code jetzt steht, werden alle Bilder beim Leiden einfach hintereinander angezeigt bis alle gezeigt wurden. Bei Reload der Seite geht das Spiel wieder von vorne los...irgendetwas fehlt da noch? Wäre auch für eine Überarbeitung dankbar :)
 
Das Problem dabei ist, dass der onLoad-Event jedesmal feuert, wenn das Bild fertig geladen wurde.
Dieser Event feuert auch, wenn das Zufallsbild geladen wurde... dadurch wird eine Endlosschleife erzeugt.... es werden solange Zufallsbilder geladen, bis sich der Browser verabschiedet :)

Der onLoad-Event im Bild selbst kommt somit nicht in Frage.

Nehmt stattdessen den onLoad-Event des Fensters... dazu müsst ihr dem Bild einen Namen geben, und die JS-Anweisung in eine Funktion verpacken, welche dann beim onload des Fensters aufgerufen wird:

Code: 
<script type="text/javascript"> 
<!-- 
meineBilder = new Array(); 
//der Array bleibt gleich ....


function bild_laden()
{
    document.bild.src = meineBilder[Math.round(Math.random()*(meineBilder.length-1))];
}
window.onload=bild_laden;
//--> 
</script>

<!-- ...-->

<img src="platzhalter.gif" name="bild">
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück