/* ticker-Framework zum Einrichten von Bilderwechseln */ var Bilderticker = { // "Einstellungen" triggerClassName: "bilderticker", // die Klasse, die ein Element zu einem Bilderticker machen kann // Voreinstellungen für einen ticker speed: 0.5, // Pixel-Schritt beim bewegen // automatische Einstellungen baseURL: "", // hier steht später der Pfad zum Verzeichnis, in dem sich dieses Script befindet. oldWinOnLoad: null, // hier steht später vielleicht eine abgespeicherte Funktion tickers: new Array(), // hier werden die Ticker stehen timer: null, // hier steht später eine Referenz auf ein Timeout-Objekt haltOnMouseOver: true, // beim Überfahren der Maus einen Ticker anhalten // Initialisier-Funktion - startet den Bilderticker (wird noch während des Ladens der Seite ausgeführt) start: function () { this.oldWinOnLoad = window.onload; // alte onload-Funktion abspeichern (falls vorhanden) // neue (anonyme!) onload-Funktion erstellen um eventuelle alte Funktion(en) zu kapseln window.onload = function () { // War bereits eine Funktion in window.onload abgelegt worden? if (typeof(Bilderticker.oldWinOnLoad) == "function") { // hier kann man nicht "this" benutzen, da diese Funktion nicht zu einem größeren Objekt gehört! Bilderticker.oldWinOnLoad(); // gespeicherte onload-Funktion ausführen } Bilderticker.onload(); // unsere onload-Funktion ausführen }; }, // onload-Funktion wird unmittelbar nach dem vollständigen Laden des Dokuments ausgeführt onload: function () { /* "this" verweist auf unser Bilderticker-Objekt! */ var i, css, elements, ticker, scripts = document.getElementsByTagName("script"); this.timer = window.setInterval(function () { var i; for (i = 0; i < Bilderticker.tickers.length; i++) { Bilderticker.tickers[i].next(); } }, 20); // baseURL herausfinden, um weitere Komponenten dieses Scripts nachladen zu können for (i = 0; i < scripts.length; i++) { if (scripts[i].src && scripts[i].src.match(/bilderticker\.js/)) { this.baseURL = scripts[i].src.replace(/(^|\/)bilderticker\.js$/, ""); } } // weitere Komponenten einbinden wenn baseURL ermittelt wurde if (this.baseURL) { // unsere CSS-Datei einbinden (also erzeugen) css = document.createElement("link"); css.rel = "stylesheet"; css.type = "text/css"; css.href = this.baseURL + "/bilderticker.css"; // -Element im hinten anfügen document.getElementsByTagName("head")[0].appendChild(css); } //Bilderticker einrichten elements = document.getElementsByTagName("*"); for (i = 0; i < elements.length; i++) { if (elements[i].className && elements[i].className == Bilderticker.triggerClassName) { // Ein Element gefunden, das zu einem Bilderticker werden soll ticker = new Bilderticker.ticker(elements[i]); if (ticker.images) { Bilderticker.tickers[Bilderticker.tickers.length] = ticker; ticker.start(); } } } }, // Konstruktor: Bauplan eines tickers ticker: function (element) { /* In diesem Konstruktor verweist "this" immer auf das zu erzeugende Objekt - vorausgesetzt, dieser Konstruktor wird mit dem Schlüsselwort "new" aufgerufen, z.B. var a = new this.ticker(HTML-Element) */ var n, i, img; // Darf eventuell kein ticker eingerichtet werden? if ( // kein Element übergeben !element // kein Element mit Klasse übergeben || !element.className // kein Element mit passender Klasse übergeben || !element.className.match(new RegExp("(^| )" + Bilderticker.triggerClassName + "( |$)", "")) // weniger als zwei Bilder im Ticker || element.getElementsByTagName("img").length < 2 ) { // also gibt es keinen ticker für diesen init-Aufruf return new Boolean(false); } // Einstellungen des Tickers vornehmen this.element = element; // Das HTML-Element, das als "Träger" des Tickers verwendet wird. this.images = new Array(); // Bilder (oder Bild-Links) werden hier als HTML-Elementobjekte abgelegt... this.speed = Bilderticker.speed; this.haltOnMouseOver = Bilderticker.haltOnMouseOver; this.stopped = true; // Hiermit kann ein Ticker angehalten werden. this.halted = false; // Hiermit kann ein Ticker kurzzeitig angehalten werden. this.width = 0; // hier wird die Gesamtbreite aller Bilder gespeichert. /* Fix für IE: Neueste IE-Version macht aus Flieskomma-Werten ganze Zahlen (z.B. margin-left:0.5px wird margin-left:0px) */ this.marginLeft = 0; // numerischen Wert für margin-left // -Element als Container erzeugen this.container = document.createElement("span"); // verfügbare Bilder ermitteln und merken n = this.element.getElementsByTagName("img"); for (i = 0; i < n.length; i++) { img = n[i]; this.width += img.width; // prüfen, ob um das Bild nicht in einem Link sitzt while (!img.tagName || (img.tagName.toLowerCase() != "a" && img !== this.element)) { img = img.parentNode; } this.images[this.images.length] = (img !== this.element) ? img : n[i]; if (!this.images[this.images.length -1].width) { this.images[this.images.length -1].width = n[i].width; } } // Bilder "ausschneiden" und in den Container legen for (i = 0; i < this.images.length; i++) { this.container.appendChild(this.images[i].parentNode.removeChild(this.images[i])); } while (this.element.childNodes.length) { this.element.removeChild(this.element.firstChild); } // Container als einzeiligen Block ausdehnen this.container.style.width = this.width + "px"; // Container ins ursprüngliche Element einhängen this.element.appendChild(this.container); this.element.ticker = this; this.element.onmouseover = function () { if (this.ticker.haltOnMouseOver) { this.ticker.halted = true; } }; this.element.onmouseout = function () { if (this.ticker.haltOnMouseOver) { this.ticker.halted = false; } }; /* Funktionen (Methoden) des Bildertickers definieren! */ // Funktion zum Starten des Tickers this.start = function () { this.stopped = false; this.next(); }; // Funktion zum Stoppen des Tickers this.stop = function () { this.stopped = true; }; // Funktion zum Anzeigen des nächsten Bildes this.next = function () { // wurde der Ticker angehalten? if (this.stopped || this.halted) { return; // Ja -> keinen Bildwechsel durchführen! } this.marginLeft -= this.speed; this.container.style.marginLeft = this.marginLeft + "px"; // "verschwundenes" Bild hinten anhängen if (this.marginLeft + this.container.firstChild.width <= 0) { this.container.appendChild( this.container.removeChild(this.container.firstChild) ); this.container.style.marginLeft = "0px"; this.marginLeft = 0; } }; // fertigen Ticker zurückgeben } } Bilderticker.start();