Logo

    

    

 

 

| Konzept | Javascript | Script Banner | CGI SunnyData-fake | CGI SunnyWeb |
Javascript für Banneranzeige und -aktualisierung
von webmaster, Donnerstag, 1. April 2010

In der linken Navigationsleiste ein Banner mit den aktuellen Ertragsdaten zu sehen. Er wird von Sunnyweb bereitgestellt und regelmäßig aktualisiert. Nur das Banner wird jeweils neu geladen, die anderen Seiteninhalte bleiben erhalten.

	
	//Für den Aktualisierungstakt benötigt man einen Counter:
var reloadtimer = 60; //Wiederholungsintervall in Sekunden
if (document.images) var refInterval = 0;
else var refInterval = reloadtimer;
	function startCounter() {
		refInterval = refInterval - 1;
	var now = new Date();
	var dummystring = parseInt(now.getTime() / 1000);
	if (refInterval < 1) {
		if (document.images) document.refImage.src = "Pfad zur pixeldatei" + "?" + dummystring;
		else window.location.reload();
		refInterval = reloadtimer;
	}
	document.getElementById("time").value = refInterval + " sek."; //Anzeige Counter
	timerID = setTimeout("startCounter()", 1000);
}

	/*Mit "a href="javascript:winopen()"" ist die Grafikdatei noch auf eine Javascript-Funktion 
	referenziert, die bei Bedarf ein Popupfenster öffnet und das Banner in diesem Fenster anzeigt. 
	Die Größe und Position des Popups lässt sich einfach über Size und Location einstellen:*/

function winopen() {
	var popUpSizeX=210;
	var popUpSizeY=200;
	var popUpLocationX=0;
	var popUpLocationY=0;
	var popUpURL="banner.html";
	splashWin = window.open("",'x','fullscreen=1,toolbar=0,location=0,directories=0,
		status=no,menubar=0,scrollbars=no,resizable=0');
	splashWin.blur();
	window.focus();
	splashWin.resizeTo(popUpSizeX,popUpSizeY);
	splashWin.moveTo(popUpLocationX,popUpLocationY);
	splashWin.location=popUpURL;
	splashWin.focus();
}

	//Die Anzeige erfolgt mit:
document.write(' <p align="center">
<a href="javascript:winopen()"><img src="/sunny/banner.png" name="refImage" width="160" 
		height="96" align="middle" ALT="Wird laufend aktualisiert!"></a></p>
<p align="center"><b><FONT color="#800000" SIZE="2" face="Arial, 
		Helvetica, sans-serif">Aktualisierung in</font></p>
<input class="distime" readOnly type="text" id="time" size="1" value="-"></center> ');

startCounter();
//

Mit "startCounter()" wird beim erstmaligen Laden der Javasriptdatei (banner.js) der Prozess gestartet.
Banner und Zähler werden einfach durch Einfügen von "<script type="text/javascript" src="banner.js"></script>" in die html-Datei angezeigt, genau dort, wo der Scriptaufruf eingefügt wurde, z. B. im Hauptmenue.

Die hier vorgestellt Lösung ist auch auf andere Pixeldateien anwendbar, z.B. für die laufende Aktualisierung von Bildern aus Webcams, wie in diesem Beispiel.

Download des Script als Textdatei

Darstellung des Codes erfolgt mit:
SyntaxHighlighter version 3.0.83 (July 02 2010)
http://alexgorbatchev.com/SyntaxHighlighter