Zufallsbanner 02a
    
 HomeBilderUmleitung• Zufall Zip-Datei  Text-Datei  externe.js 

  Zufallsgrafik als Link 02-A  (externe JS-Datei)

Script zur Anzeige einer Zufallsgrafik - ausgewählt aus einer Sammlung von bereitgestellten Grafiken. Die Grafik dient als Verweisfläche für den zugehörigen Link. Hier das Beispiel 02-A als Variante mit ausgelagerter JavaScript-Datei.

Zufallsgrafik als Link - Daten in externer js-Datei

 Script erweitert: MouseOver-Text implementiert

Funktion und Eigenschaften entsprechen dem Beispiel Zufallsbanner 02

Das JavaScript zur Ermittlung der Zufallsgrafik aber auch sämtliche Notierungen für die Bannergrafiken und zugehörigen URLs werden in einer externen JavaScript-Datei ausgelagert. Das bedeutet, der eigentliche JS-Code ist in einer separaten, externen Text-Datei gespeichert.

Im HTML-Dokument steht lediglich der Verweis auf die externe Datei und der Aufruf der Anzeigefunktion. Die ausgelagerten Informationen können so innerhalb mehrerer Seiten genutzt werden.



   Vorteile einer externen JS-Datei

  • einbinden des Banner-Scripts in mehreren Seiten ist ohne großen Aufwand möglich
  • bei einer Erweiterung müssen nicht mehrere HTML-Dateien modifiziert werden
  • Zugriff auf eine zentrale Liste von Bannern + URLs
  • Änderungen sind nur noch in einer einzigen Datei notwendig

  aktive Demo für die Zufallsgrafik:  

Zufallsgrafik als Link

Eine von 6 Grafiken

Zum Testen klicken Sie Reload


Ich habe das Script um die Anzeige eines Beschreibungstextes bei MouseOver erweitert.


   Aufwand zum Einbau in ihre Seiten:

  • JavaScript herunterladen oder Textdatei als JS-Datei speichern
  • Link auf JavaScript-Datei im Head-Bereich ihrer HTML-Datei notieren
  • Aufruf der Funktion im Body-Bereich notieren
  • Verweise auf die Banner-Grafiken anpassen
  • Größenangaben für die Banner-Grafiken anpassen
  • zugehörige Link-URLs eintragen
  • zugehörige MouseOver-Texte eintragen



   Sie benötigen die JS-Datei - 4 Möglichkeiten

a  JavaScript-Datei als ZIP herunterladen

Laden sie das Archiv (ZIP-Datei) herunter und entpacken die Datei. Speichern sie eine Kopie in ihr Homepage-Verzeichnis.

b  Auszug der Textdatei als JS-Datei speichern

Im Kopfbereich dieser Seite finden sie eine Textdatei, die sämtliche 3 JavaScript-Blöcke enthält. Kopieren sie den Block 3 in eine leere Textdatei und speichern sie als externe JS-Datei unter dem Namen "zufallsbanner02.js" ab.

  • Textdatei öffnen
  • Block 3 kopieren
  • in eine leere Seite hineinkopieren
  • Datei als Textdatei ohne Formatierung unter "zufallsbanner02.js" abspeichern

c  JS-Datei öffnen / speichern

Im Kopfbereich dieser Seite finden sie einen Link auf die JS-Datei (Textdatei). Die Datei können sie öffnen / speichern unter dem Namen "zufallsbanner02.js".

  • Link anklicken zum Öffnen / Anzeigen und speichern
  • Link rechtsklicken zum Speichern
d  JavaScript-Code kopieren und speichern

Sie können den Quellcode für die externe JS-Datei auch aus diesem Dokument herauskopieren.

  • Ausschließlich den blauen Text in einen Editor übertragen
    (einleitende und schließende Script-Tags nicht kopieren)
  • Datei als Textdatei ohne Formatierung unter "zufallsbanner02.js" abspeichern
Die Textdatei erhält die Dateiendung ".js" (Punkt js)     zufallsbanner02.js



   Das Script

(für die externe JS-Datei nur den blauen Code kopieren)
<script type="text/javascript" language="JavaScript">
<!-- Begin


// hier die Anzahl der bilder eintragen
var wie_viele = 6;

// nächsten 4 zeilen nicht ändern
var now = new Date()
var sec = now.getSeconds()
var zufall02a = sec % wie_viele;
zufall02a +=1;


/*
ab hier Angaben für die Banner
5 Angaben: Link-URL, Bild-URL, Breite, Höhe, MouseOver-Text
*/

if (zufall02a==1) {
link_url="http://www.web-toolbox.net/imagedownload/";
banner_url="screen-out.gif";
width="150";
height="113";
TitelText = " 7000 kostenlose Mini-Images für den Webmaster ";
}

if (zufall02a==2) {
link_url="http://www.web-toolbox.net/geilenkirchen/";
banner_url="screen-23.gif";
width="150";
height="113";
TitelText = " private Seite zur Stadt Geilenkirchen ";
}

if (zufall02a==3) {
link_url="http://www.web-toolbox.net/maus/";
banner_url="screen-26.gif";
width="150";
height="113";
TitelText = " 220 Infoseiten über Wüstenrennmäuse ";
}

if (zufall02a==4) {
link_url="http://www.web-toolbox.net/webtoolbox/";
banner_url="screen-25.gif";
width="150";
height="113";
TitelText = " Web-Toolbox - praxisbezogene Script-Beispiele ";
}

if (zufall02a==5) {
link_url="http://www.web-toolbox.net/";
banner_url="screen-start.gif";
width="150";
height="113";
TitelText = " zum Portal: Clickstart.de ";
}

if (zufall02a==6) {
link_url="http://www.web-toolbox.net/webmaster/wilhelm2/index.htm";
banner_url="screen-22.gif";
width="150";
height="113";
TitelText = " Der Webmaster - persönliche Seiten ";
}

/*
bis hier Angaben für die Banner
*/


function zufallsbanner02A() {
document.write('<div align="center">');
document.write('<a href="' + link_url + '" target="_blank">');
document.write('<img title="' +TitelTex + '" src="' +banner_url+ '" width="')
document.write(width + '" height="' + height + '" ');
document.write('border="1"></a><br>');
document.write('</div>');
return
}


// End -->
</script>

Um die Grafiken ohne Rand anzuzeigen:
Setzen sie den Wert 1 (Eins) bei border="1" auf 0 (Null).



   Wertezuordnung für die Grafiken und URLs

Für jedes Banner werden 5 Angaben eingetragen: Link-URL, Bild-URL, Breite, Höhe, MouseOver-Text

Auszug:
if (zufall02a == 3) {
link_url="http://www.web-toolbox.net/maus/";
banner_url="screen-26.gif";
width="150";
height="113";
TitelText = " 220 Infoseiten über Wüstenrennmäuse ";
}

if (zufall02a == 4) {
link_url="http://www.web-toolbox.net/webtoolbox/";
banner_url="screen-25.gif";
width="150";
height="113";
TitelText = " Web-Toolbox - praxisbezogene Script-Beispiele ";
}

Element   Variable   ihre Angaben einsetzen
Linkadresse link_url Pfad/Dateiname  od.   http://www.domain.de
Bildadresse banner_url Pfad/Dateiname  od.   http://www.domain/banner.gif
Breite width Wert in Pixel
Höhe height Wert in Pixel
Mousevoer-Text TitelText ihr Beschreibungstext





   Verweis auf die externe JS-Datei im Head

Der Verweis auf die externe JavaScript-Datei wird im Head-Bereich der HTML-Datei notiert. Der Dateiname ist hier rot dargestellt. Wenn die datei in einem anderen Ordner abgelegt wurde, muss der Pfad berücksichtigt werden.
<script type="text/javascript" src="zufallsbanner02.js"></script>



   Aufruf der Funktion im Body-Bereich

Die Bannergrafik wird in ihrer HTML-Seite an der Stelle angezeigt, wo sie den Aufruf der Funktion 'zufallsbanner02A()' notieren.
<script type="text/javascript" language="JavaScript">
<!--
zufallsbanner02A();
//-->
</script>









NACH OBEN