rotiernder Banner inklusive Links


  • Ajur
  • 825 Aufrufe 4 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • rotiernder Banner inklusive Links

    Nabend allerseits ..
    Ich suche jetz schon seit ungefähr ner Stunde nach ner gescheiten Quelle im Netz, aber habe irgenwdie nichts passendes gefunden. Ich möchte folgendes machen:


    Angenommen ich habe 5 verschiedene Bilder...

    Ich möchte jetzt ein "Skript" schreiben, das mir zB alle 5 sekunden das Bild austauscht. Das Bild soll aber selbst nicht nur ein Bild, sondern ein Link sein ...

    D.h. wenn man auf Bild 1 klickt soll man auf Seite 1 kommen, wenn dann Bild 2 nach ner bestimmten Zeit gleaden wird soll man wenn man darauf klickt auf die Seite 2 geleitet werden usw...

    Am tollsten wäre es natürlich, wenn die Bilder nicht immer in der selben Reihenfolge ablaufen würden ...


    Kann mir da jemand auf die Sprünge helfen ?

    Gruß Ajur

  • Hi,
    hier ist der JavaScript-Teil

    Quellcode

    1. <script type="text/javascript">
    2. // <![CDATA[
    3. var last = 0;
    4. var x = 0;
    5. function change_pic() {
    6. var links = new Array();
    7. var imgs = new Array();
    8. links.push('link1.htm','link2.htm','link3.htm');
    9. imgs.push('jpg1.jpg','jpg2.gif','jpg3.gif');
    10. while(x == last) x = Math.round(Math.random()*(links.length-1));
    11. document.getElementById('the_pic').src = imgs[x];
    12. document.getElementById('the_link').href = links[x];
    13. last = x;
    14. }
    15. // ]]>
    16. </script>
    Alles anzeigen

    Es verhindert sogar, dass zweimal das selbe Bild zusehen ist ;)

    Dann brauchst du nur noch das Bild, welches wie folgt auszusehen hat:

    Quellcode

    1. <a href="default.html" id="the_link"><img src="default.jpg" alt="random_img" id="the_pic" style="border:0" /></a>

    Und zum Schluss den initialisator, der nach einer bestimmten Zeit die Funktion aufruft...
    Dazu ersetz du deinen Body-Tag mit...

    Quellcode

    1. <body onLoad="setTimeout('change_pic()',5000);">

    Die 5000 steht für 5 Sekunden.

    Also ich hoff du verstehst mein Code etwas und kannst es auch ändern, wie du es willst. Wenn nicht, frage einfach.

    Gruß und viel Spaß damit ^^
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

  • hey toll !

    das werde ich gleich mal austesten!
    ich editier hier dann und erstatte dann bericht :)

    Also ... ich habe das jetzt mal getestet ... wenn ich die Seite aufrufe, wir dann nach zB 5 Sekunden das nächste Bild eingeblendet (inklusive zugehörigem Link) .. aber irgenwdie bleibt das dann da und ändert sich nicht mehr. Habe zur Probe einfach mal 4 Bilder und 4 Links genommen.

    Ist das so gedacht ? :D

    Wollte das ohne das ich die Seite reloade, einfach die Bilder immer weiter laufen... und wenn man dann alle durchhat, das es dannw ieder von neuem los geht .. so nach dem Motto :)

  • Oha, du hast recht. Aber keine Ahnung warum da setTimeout streikt Oo
    Benutzen wir stattdessen:

    Quellcode

    1. <body onLoad="setInterval('change_pic()',5000);">

    klappt es jedenfalls auf alle Fälle.

    Gruß und sry
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.