JS Banner Zufallsgenerator

[master1971]

Hallo zusammen,

ich habe hier Java Script Banner Zufallsgenerator.

Was ich wissen möchte, ist, wie kann ich die jeweiligen Bilder auch noch verlinken???

Wenn ein Bild erscheint, sollte mit dem dazugehörigen Link verbunden Sein.

Es soll nicht immer der gleiche Link für alle Bilder sein, sondern immer der jeweilige Link, der zum Bild gehört.

Sprich:
Bild 1 = Link1 ( z.B. http://www.beispiel1.de )
Bild 2 = Link2 ( z.B. http://www.beispiel2.de )

usw.

Hier der JS Code:

<script type="text/javascript">

var how_many_ads = 5;
var now = new Date()
var sec = now.getSeconds()
var ad = sec % how_many_ads;
ad +=1;
if (ad==1) {
banner="bild1.jpg";
width="238";
height="82";
}
if (ad==2) {
banner="bild2.jpg";
width="238";
height="82";
}
if (ad==3) {
banner="bild3.jpg";
width="238";
height="82";
}
if (ad==4) {
banner="bild4.jpg";
width="238";
height="82";
}
if (ad==5) {
banner="bild5.jpg";
width="238";
height="82";
}
document.write('<img src=\"' + banner + '\" width=')
document.write(width + ' height=' + height + ' ');

</script>

Wenn jemand mir da weiterhelfen kann, bin ich sehr dankbar.

Grüße

 

[Sempervivum]

Besser ist für diese Verzweigung ein Switch geeignet. Füge die URL zu den Daten hinzu und generiere zusätzlich ein a-href-Tag:

switch (ad) {
  case 1:
    var banner="bild1.jpg";
    var width="238";
    var height="82";
    var href = "dein_link_1.html";
  case 2:
    // usw.
}
document.write('<a href="' + href + '">');
document.write('<img src="' + banner + '" width="');
document.write(width + '" height="' + height + '"></a>');

Und für die Erzeugung einer Zufallszahl ist Math.random() besser geeignet.

 

[ikosaeder]

Die nächste Stufe wäre, du speicherst deine Bilder und deine Links in Arrays:

BildArray=new Array("Bild01", "Bild02", "BildXX");
LinkArray= new Array("Link01","Link02" ,"LinkXX");

Deine Zufallzahl Z ist dann der ArrayIndex (beginnend bei 0)
und du kannst deine Links über
BildArray[Z] bzw. LinkArray[Z] ansprechen und sparst dir das switch Konstrukt.
Im HTML sehe das dann so aus, du hast einen DiV

<div><a id="Banner" href="example.com"><img src="Bilder/Bild000.png" id="Bildbereich" width="400"
height="400"/></a>
</div>

und eine Funktion

function changeBanner(){
Z=Math.floor(Math.random()*LinkArray.length);
var nuBi=window.document.getElementById("Bildbereich");
nuBi.src=BildArray[Z];
var nuLink=window.document.getElementById("Banner");
nuLink.href=LinkArray[Z];
}

Im Ganzen etwa so:
https://jsfiddle.net/ju69htaa/5/

Weitere Verbesserungsmöglichkeiten: Verwenden von Events und Objekten

 

[SpiceLab]

... heigth="400"/>...

Dort versteckt sich ein Buchstabendreher.

 

[ikosaeder]

@SpiceLab Danke habe ich korrigiert.