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
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
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.
Home • Bilder • Umleitung• Zufall
Zip-Datei
Text-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.
Script erweitert: MouseOver-Text implementiert
Zufallsgrafik als Link 02-A