Bannerrotation mit zufälliger Reihenfolge
0 0 
Gunnar Bittersmann
1 
molily
0 molily
0 0 
Der Martin
0 0 molily
0
0
Bannerrotation mit zufälliger Reihenfolge
Hallo Leute,
bin neu hier in der Java-Welt und habe gestern versucht einmal einen eigenen Java-Banner zu ersetllen. Leider funktioniert es nicht wie ich es gern hätte.
Fehler: 'Zeile 56: "i" ist undefiniert'. Er erechnet anscheinend "i" nur einmalig für den Ladebeginn ... Kann man dem Script irgendwie sagen, dass er das alle 4sek tun so?
Hier mein Script:
<body onLoad="startTime();">
<SCRIPT LANGUAGE="javascript">
banner = new Array()
banner[0]="<IMG BORDER=0 SRC=banner0.gif>"
banner[1]="<IMG BORDER=0 SRC=banner1.gif>"
banner[2]="<IMG BORDER=0 SRC=banner2.gif>"
banner[3]="<IMG BORDER=0 SRC=banner3.gif>"
banner[4]="<IMG BORDER=0 SRC=banner4.gif>"
links = new Array
links[0] = "http://www.prosound-augsburg.de"
links[1] = "http://www.jaegermeister.de"
links[2] = "http://www.laola-party.de"
links[3] = "http://www.rb-aschberg.de"
links[4] = "http://www.friegel-holzheim.de"
description = new Array
description[0] = "Pro Sound Augsburg"
description[1] = "Jägermeister Promotion Team"
description[2] = "Getränkehandel Lehner"
description[3] = "Raiffeisenbank Aschberg eG"
description[4] = "Raumausstattung Friegel GmbH"
var nr = Math.round(4 * Math.random());
var Link = links[nr]
var Image = banner[nr]
function startTime(){
var time= new Date();
hours= time.getHours();
mins= time.getMinutes();
secs= time.getSeconds();
closeTime=hours*3600+mins*60+secs;
closeTime+=4;
Timer();
}
function Timer(){
var time= new Date();
hours= time.getHours();
mins= time.getMinutes();
secs= time.getSeconds();
curTime=hours*3600+mins*60+secs
if (curTime>=closeTime){
if (i < 14){
i++;
document.banner.src = eval("banner" + i + ".src");
}
else{
i = 1;
document.banner.src = eval("banner" + i + ".src");
}
startTime();
}
else{
window.setTimeout("Timer()",1000)}
}
function FensterOeffnen () {
MeinFenster = window.open(links[i]);
MeinFenster.focus();
}
function descript(){
window.status = description[i]
}
document.write("<CENTER><A HREF=" +Link+ ">" +Image+ "</A></center>")
</SCRIPT>
-
Hallo!
bin neu hier in der Java-Welt und habe gestern versucht einmal einen eigenen Java-Banner zu ersetllen. Leider funktioniert es nicht wie ich es gern hätte.
Unterscheide zwischen Java und JavaScript. Das eine ist eine Insel und das andere eine Scriptsprache, die in Browser integriert ist ;-)
Fehler: 'Zeile 56: "i" ist undefiniert'. Er erechnet anscheinend "i" nur einmalig für den Ladebeginn ... Kann man dem Script irgendwie sagen, dass er das alle 4sek tun so?
Alle 4 Sekunden hört sich nach setInterval() an.
ciao, ww
--
sh:( fo:| ch:~ rl:( br:> n4:~ ie:% mo:) va:) de:] zu:) fl:( ss:| ls:~ js:) -
Hello out there!
bin neu hier in der Java-Welt
Dass JavaScript und Java völlig verschienede Welten sind, hat wucher wichtel schon gesagt.
<SCRIPT LANGUAGE="javascript">
<http://de.selfhtml.org/javascript/intro.htm#javascriptbereiche@title=JavaScript-Bereiche in HTML definieren>
var nr = Math.round(4 * Math.random());
Die Zeile tut wohl nicht das, was du eigentlich willst. http://forum.de.selfhtml.org/archiv/2006/7/t132358/#m856490
window.status = description[i]
Die Zeile tut wohl nicht das, was der Nutzer will. Hände weg von der Statuszeile; da gehören für den Nutzer relevnte Informationen rein, nicht was der Webseitenautor als relevant erachtet. Außerdem unterbinden wohl mittlerweise alle Browser die Manipulation der Statuszeile.
document.write("<CENTER><A HREF=" +Link+ ">" +Image+ "</A></center>")
Pfui 'center'! Formatiere mit CSS.
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe) -
Hallo,
Irgendwie scheint dein Script ziemlich chaotisch zu sein, jedenfalls ist es aus verschiedenen Gründen nicht lauffähig und kann vom Aufbau her auch nicht die Anforderung »Bannerrotation mit zufälliger Reihenfolge« lösen. Meine Empfehlung: Schreibe es am besten neu. Zur Hilfe ein paar Anmerkungen:
Du kannst mit document.write() nur beim ersten Laden des Dokuments eine Grafik ausgeben. Wenn das Dokument einmal geladen ist, kommst du damit nicht weiter. Daher müsstest du über das DOM Änderungen am bestehenden Banner vornehmen. Deshalb bietet sich es auch dan, den Banner gleich mit JavaScript ins Dokument einzufügen.
So eine Programmlogik ist denkbar:
1. Beim Starten des Dokuments wird gelost, bei welchem Eintrag die Rotation begonnen wird.
2. Dann wird ein p-Element, ein a-Element und ein img-Element erzeugt mit den entsprechenden Link- und Grafikdaten und ins Element eingehängt.
3. Danach wird ein Intervall gestartet, der alle vier Sekunden (oder wie oft du willst) eine Funktion ausführt.
4. Die Funktion zählt die Variable hoch, in der die geloste Eintragsnummer steht. (Wenn die Variable schon beim Maximalwert steht, wird sie auf 0 zurückgesetzt.) Dann werden das a- und das img-Element im Dokument angesprochen und das href- bzw. das src-Attribut entsprechend angepasst.Gut, ein paar Codeschnipsel.
Das ist jetzt weniger wichtig, aber die Bannerdaten speichert man am besten so:var bannerdaten = [ { description : "Pro Sound Augsburg", link : "http://www.prosound-augsburg.de/" }, { description : "Jägermeister Promotion Team", link : "http://www.jaegermeister.de/" }, { description : "Getränkehandel Lehner", link : "http://www.laola-party.de/" }, { description : "Raiffeisenbank Aschberg eG", link : "http://www.rb-aschberg.de/" }, { description : "Raumausstattung Friegel GmbH", link : "http://www.friegel-holzheim.de/" } ];Das sieht auf den ersten Blick verwirrend aus, ist aber nichts kompliziertes.
[ elem1, elem2, elem3, ... ] ist eine Kurzschreibweise zur Erzeugung eines Arrays.
{ name1 : wert1, name2 : wert2, ... } ist eine Kurzschreibweise zur Erzeugung von Object-Objekten, die benutzen wir wie assoziative Arrays.Auf den String "Pro Sound Augsburg" kann man dann z.B. einfach so zugreifen:
bannerdaten[0].description
Das ganze spart einem mehrere Arrays und sorgt für Ordnung.Den Array »banner« in deinem Script halte ich für überflüssig, solange die GIF-Grafiken nummeriert sind und der Grafikname aus dem Array-Index ableitbar (bannerdaten[0] > banner0.gif).
Zu Schritt eins:
// Funktion bannerRotationStart nach dem Laden ausführen window.onload = bannerRotationStart; function bannerRotationStart () { // Startindex zufällig festlegen und in der globalen Variable bannerIndex speichern bannerIndex = Math.floor(bannerdaten.length * Math.random()); // Schritt 2: Elemente über das DOM erzeugen und einfügen var pElement = document.createElement("p"); pElement.id = "banner"; var aElement = document.createElement("a"); aElement.id = "banner-link"; aElement.href = bannerdaten[bannerIndex].link; aElement.title = bannerdaten[bannerIndex].description; var imgElement = document.createElement("img"); imgElement.id = "banner-bild"; imgElement.alt = ""; imgElement.src = "banner" + bannerIndex + ".gif"; aElement.appendChild(imgElement); pElement.appendChild(aElement); // Wo auch immer du das Element einfügen willst, hier z.B. an den Dokumentanfang document.body.insertBefore(pElement, document.body.firstChild); // Schritt 3: Starte den Wechsel-Intervall alle 4000 Millisekunden = 5 Sekunden window.setInterval("bannerRotationWechsle()", 4000); }Schritt 4, Wechsel-Funktion, die wiederholt aufgerufen wird:
function bannerRotationWechsle () { // bannerIndex um 1 erhöhen if (bannerIndex == bannerdaten.length - 1) { // Wenn schon am Ende der Bannerliste, zurücksetzen und wieder von vorne anfangen bannerIndex = 0; } else { // Ansonsten einfach 1 addieren, um den nächsten Banner zu zeigen bannerIndex++; } // Banner aktualisieren, indem die Attribute vom Link und der Grafik geändert werden: var bannerLink = document.getElementById("banner-link") bannerLink.href = bannerdaten[bannerIndex].link; bannerLink.title = bannerdaten[bannerIndex].description; var bannerBild = document.getElementById("banner-bild"); bannerBild.src = "banner" + bannerIndex + ".gif"; }Die Bannerelemente kannst du mit CSS etwa so formatieren:
<style type="text/css"> [code lang=css]#banner { margin:10px 0; text-align:center; } #banner-bild { border-style:none; vertical-align:bottom; }</style>[/code]
Das ist jetzt alles nur ein Vorschlag einer möglichen Lösung.
Mathias
-
// Schritt 3: Starte den Wechsel-Intervall alle 4000 Millisekunden = 5 Sekunden
*gg* Nach Adam Riese und Eva Zwerg stimmt die Rechnung nicht ganz...
-
hi,
// Schritt 3: Starte den Wechsel-Intervall alle 4000 Millisekunden = 5 Sekunden
*gg* Nach Adam Riese und Eva Zwerg stimmt die Rechnung nicht ganz...
Vielleicht sollte man die Erkenntnisse der beiden genannten noch mit denen von Herrn Einstein kombinieren.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hi wahsaga,
// Schritt 3: Starte den Wechsel-Intervall alle 4000 Millisekunden = 5 Sekunden
*gg* Nach Adam Riese und Eva Zwerg stimmt die Rechnung nicht ganz...
Vielleicht sollte man die Erkenntnisse der beiden genannten noch mit denen von Herrn Einstein kombinieren.bei _dem_ Beispiel hätte ich eher an Heisenberg gedacht ...
*scnr*
Martin--
Viele Fachleute vertreten die Ansicht, jedes Feature eines Programms, das sich nicht auf Wunsch abstellen lässt, sei ein Bug.
Außer bei Microsoft. Da ist es umgekehrt.-
lol
Naja..egal..hab an dem Script ein wenig rumgespielt, nur leider komm ich irgendwie nich drauf, wie ich das in eine externe javascript-DAtei packen und es schließlich schön in meine Tabelle includen kann :-(
Andernfalls, falls ich das Script in der Html-Datei lasse - wie kann ich es dann in die richtige Position bringen? Einfach zwischen <td> und </td> klemmen geht hier etwas schlecht ;-)
-
Hallo,
lol
Naja..egal..hab an dem Script ein wenig rumgespielt, nur leider komm ich irgendwie nich drauf, wie ich das in eine externe javascript-DAtei packen und es schließlich schön in meine Tabelle includen kann :-(
Andernfalls, falls ich das Script in der Html-Datei lasse - wie kann ich es dann in die richtige Position bringen? Einfach zwischen <td> und </td> klemmen geht hier etwas schlecht ;-)
Das Script kann nicht an einer bestimmten Stelle im HTML untergebracht werden, um da wirksam zu werden.
Der Grund liegt darin, dass das Script auf document.write() verzichtet und alle Änderungen am Dokument »von außen« über die DOM-Schnittstelle vornimmt.
Die ursprüngliche Position des Scripts im Dokument spielt dann keine Rolle mehr - daher ist es tatsächlich am besten, solche Scripte extern auszulagern und im head über script src="..." einzubinden.Wo die Bannergrafik eingefügt wird, wird an dieser Stelle entschieden:
function bannerRotationStart () { ... // Wo auch immer du das Element einfügen willst, hier z.B. an den Dokumentanfang document.body.insertBefore(pElement, document.body.firstChild);Hier wird das p-Element mit dem Banner wie beschrieben am Dokumentanfang eingefügt.
Wenn man es woanders einfügen will, spricht man das gewünschte Elternelement an und hängt den p-Elementknoten mit appendChild() oder insertBefore() dort in den DOM-Baum ein.
Soll das Banner in ein bestimmtes Element, so gibt man dem eine ID:
<td id="banner-container"></td>
und spricht es dann über die ID an, um das Element dort einzuhängen:
document.getElementById("banner-container").appendChild(pElement);
Ok, ein leeres td-Element im Code, das erst mit JavaScript gefüllt wird, ist nicht sehr sinnig. Man würde dann mit JavaScript die ganze Zeile dynamisch einfügen. Oder gleich auf Tabellenlayout verzichten. ;)
Sicher wäre auch eine Mischlösung mit document.write() möglich, aber für gewöhnlich sollte man HTML- und JavaScript-Code möglichst trennen.
Mathias
-
Sehr schlaues Script :-)
Funktioniert einwandfrei ! Danke dir !!Achja, noch eine KLeinigkeit! Da ich diese DOM-Geschichte bisher nicht kannte, fällt mir auch nichts besonderes ein, wie ich die Links noch "_blank" setzen könnte.
Erste Versuche waren über folgende:
bannerLink.href.target = "_blank"
oder
document.banner[bannerIndex].target = "_blank";Half leider auch nicht und das suchen geb ich langsam auf :-(
Gruß
sAks-
Hallo,
Da ich diese DOM-Geschichte bisher nicht kannte, fällt mir auch nichts besonderes ein, wie ich die Links noch "_blank" setzen könnte.
Wenn du JavaScript doch noch lernen willst, solltest du dich mit der »DOM-Geschichte« früher oder später auseinandersetzen... ;)
Hier wird das a-Element erzeugt und die Attribute gesetzt:
var aElement = document.createElement("a"); aElement.id = "banner-link"; aElement.href = bannerdaten[bannerIndex].link; aElement.title = bannerdaten[bannerIndex].description;Willst du da neben id, href und title ein target-Attribut setzen, geht das auf dieselbe Weise (Schema: element.attributname = "attributwert";). Darunter einfügen:
aElement.target = "_blank";
In der Wechsel-Funktion muss nichts geändert werden, denn das target-Attribut muss nur einmal gesetzt werden.
Mathias
-
Gar nicht so schwer, wenn man die Sache/den Aufbau mal kapiert hat :-) Sehr schön !! Thx man !! :-)
Webseitenautoren sollten auf das 'target'-Attribut gänzlich verzichten; der Nutzer selbst weiß am besten, ob er ein neues Fenster/Tab möchte oder nicht.
Bei einer Party/Community-Site ist es üblich, dass alle externen Links auch _blank geöffnet werden, daher auch bei dem Werbebanner.
-
-
Hello out there!
fällt mir auch nichts besonderes ein, wie ich die Links noch "_blank" setzen könnte.
Das macht nichts. >;-> Du solltest das nicht tun.
Webseitenautoren sollten auf das 'target'-Attribut gänzlich verzichten; der Nutzer selbst weiß am besten, ob er ein neues Fenster/Tab möchte oder nicht.
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
-
-
-
-
-
-
-
Hello again !
Als erstes möcht ich mal loswerden, dass dies mein erstes richtiges javascript ist, dass ich schreibe. Alles was ich weiß (und anscheinend ist es recht wenig *g*) habe ich mir soweit vor kurzem selbst beigebracht. Dazu, diente diese Script anfangs nur für eine normale Bannerrotation (pro siteclick kam ein Wechesl - dafür gings 1a ;-) anschließend kam dann das zeitliche dazu (alle 4sek... auch dies funktionierte) und nun wollte ich eben auch noch einführen, dass nicht immer der gleiche Banner zum Start der Seite erscheint.
Als nächstes möcht ich mich gleich mal für eure Antworten und vorallem für die ausführliche Antwort von molily bedanken!!!!
Ich werde heute Abend weiter versuchen an diesem Script zu basteln und vllt sogar die ersten Erfolge feiern ;-)
Meld mich dann wieder :-)P.S. Das Script von dir molily sieht auf den ersten Blick tadellos aus!!! Hast mir viel nachlesen erstspart :-)
-
Hallo,
P.S. Das Script von dir molily sieht auf den ersten Blick tadellos aus!!! Hast mir viel nachlesen erstspart :-)
ich bitte dich: Sag sowas nicht.
Freue dich meinetwegen über den Lösungsansatz und darüber, dass er so schnell funktioniert, und dass deine Aufgabenstellung damit erstmal gelöst ist.
Aber das Nachlesen solltest du deswegen bitte nicht bleibenlassen. Versuche trotzdem, die Beispiele zu verstehen und die verwendeten Kniffe in der Doku nachzulesen. Erst _dann_ hat dir das Forum meiner Ansicht nach _wirklich_ etwas gebracht.Schönen Abend noch,
Martin--
Wer morgens zerknittert aufsteht, hat den ganzen Tag Gelegenheit, sich zu entfalten.-
Schon klar Martin - erstmal freu ich mich und verstehe die Sache immer schneller. Anhand Lösungswege lernt man am Schnellsten ;-)
Jedoch bin ich leider noch nicht am Ende angelangt, wie mein anderer Post zeigt :-(
-
-
-