Java & JavaScript


Home
Applets
Scripts
   Navigation:
 · Kontextmenü
 · Linkwechsler
   Dialogboxen:
 · Alert
 · Alert 2
 · Confirm
 · Prompt
   Animation:
 · Kreis
 · Kreis 2
 · Kreis 3
 · Drei Kreise
 · Spirale
 · Planetarium
 · Globus
   Grafik-Effekte:
 · Clipping
 · Clipping 2
 · Clipping 3
 · Alpha-Clipping
 · Fading
 · Wellenmuster
 · Wellenmuster 2
   Bildschirmschoner:
 · Proto
 · Marquee
 · Donut
 · Worm
 · Mondrian
 · Pacman
   Datum & Uhrzeit:
 · Countdown
 · Countup
 · Wochentag
 · Last Modified
   Fraktale:
 · Apfelmännchen
 · Apfelmännchen 2
 · Juliamenge
 · Juliamenge 2
 · C-Wert-Generator
   Mathematik:
 · Primzahlen
 · Primzahlen 2
   Verschiedenes:
 · Dynamic Popup
 · TextArea Counter
 · Warteschleife
 · Mausschreiber
Gäste
Kontakt

- JavaScript : Navigation : Linkwechsler -


Ein dynamischer Link- und Bilderwechsler mit JavaScript.

Erfolgreich getestet mit Internet Explorer 5.5 und 6.0, Netscape Navigator 6.1, 6.22, 7.0 und 7.1, Mozilla 1.0, 1.21 und 1.4, sowie Opera 6.01 und 7.01.


Demo:

Hier geht's zur Seite 0     Hier geht's zur Seite 1     Hier geht's zur Seite 2     Hier geht's zur Seite 3

Bei jedem Aufruf oder Aktualisieren der Seite erscheinen andere Bilder, mit anderen Alt-Texten und anderen Links.

(Überings das gleiche Script, wie es auch auf der Startseite von JJAM verwendet wird.)


Quelltext:

Seite auf der die Links erscheinen sollen:

<html>
  <head>
    <title>Link- und Bilderwechsler mit JavaScript</title>
    <script language="JavaScript" src="LinkDatenbank.js"></script>
  </head>

  <body>
    <p>
      <a id="a0" href="Seite0.html">
        <img id="img0" src="Bild0.gif" alt="Hier geht's zur Seite 0">
      </a>
      <a id="a1" href="Seite1.html">
        <img id="img1" src="Bild1.gif" alt="Hier geht's zur Seite 1">
      </a>
      <a id="a2" href="Seite2.html">
        <img id="img2" src="Bild2.gif" alt="Hier geht's zur Seite 2">
      </a>
      <a id="a3" href="Seite3.html">
        <img id="img3" src="Bild3.gif" alt="Hier geht's zur Seite 3">
      </a>
    </p>

    <script language="JavaScript">
      function rotation() {
        if(document.getElementsByTagName) {
        // NN 4.75 zeigt sonst js-Fehler an

          // Vier ungleiche Zufallszahlen zwischen 0 und 9 bestimmen
          var n=new Array();
          do for(i=0;i<4;i++) n[i]=Math.round(Math.random()*9);
          while (n[0]==n[1]||n[0]==n[2]||n[0]==n[3]||n[1]==n[2]||n[1]==n[3]||n[2]==n[3]);

          image=document.getElementsByTagName('img');
          link=document.getElementsByTagName('a');

          // Dateinamen, Alt-Text und URLs zuordnen
          for(i=0;i<4;i++) {
            ni=n[i];
            image["img"+i].src="OrdnerMitBildern/"+a[ni][0]+"";
            image["img"+i].alt=a[ni][1];
            link["a"+i].href=a[ni][2];
          }
        }
      }
      rotation(); // bei Aufruf Start
    </script>

  </body>
</html>


LinkDatenbank.js:

a=new Array();
for(i=0;i<10;i++) a[i]=new Array(); // = Anzahl der Bilder

// Dateiname des Bildes, Alt-Text, Bild-URL
a[0][0]="Bild0.gif";
a[0][1]="Hier geht's zur Seite 0";
a[0][2]="Linkwechsler/Seite0.html";

a[1][0]="Bild1.gif";
a[1][1]="Hier geht's zur Seite 1";
a[1][2]="Linkwechsler/Seite1.html";

a[2][0]="Bild2.gif";
a[2][1]="Hier geht's zur Seite 2";
a[2][2]="Linkwechsler/Seite2.html";

...

a[9][0]="Bild9.gif";
a[9][1]="Hier geht's zur Seite 9";
a[9][2]="Linkwechsler/Seite9.html";


Download  Linkwechsler.zip (inklusive der hochwertigen Demo-Bilder und Demo-Seiten ca. 7,5 kb :-)




© 2001-2004 Albert Kluge - Alle Rechte vorbehalten
Impressum | Datenschutz | eMail