IT-Academy Logo
Sign Up Login Help
Home - Programmieren - JavaScript - Banner die nicht geblockt werden



Banner die nicht geblockt werden

Normalesweise werden Banner per Javascript in ein neues Fenster geöffnet. Die können aber geblockt werden. Es gibt allerdings eine Alternative (bitte mit Bedacht einsetzen).


Autor: Patrick Faes (dreamer)
Datum: 23-02-2004, 14:39:46
Referenzen: keine
Schwierigkeit: Fortgeschrittene
Ansichten: 5306x
Rating: 8.67 (3x bewertet)

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]



Banner ohne PopUp?

Normalerweise werden Banner per PopUp gezeigt, was heißt dass diese in ein neues Fenster gezeigt werden. Hierbei verliert das Fenster worin die eigentliche Seite steht den Focus, was heißt dass der Besucher erst den Banner weg klicken muss um weiter surfen zu können. Dies nervt enorm und es existieren heute sehr viele PopUp-Blocker womit man sich schützen kann.

Deshalb kann man auch Banner benutzen die eigentlich nichts weiteres sind als Grafiken die über die Seite schweben. Diese kann man natürlich auch wegklicken. Ein Beispiel haben Sie bereits auf diese Seite gesehen.

Bevor wir zur Praxis übergehen, möchte ich erst mal kurz die Theorie erklären. Anfangs schreiben wir einige Bilder in einer Array, und zwar den ganzen Code (will heißen ganze IMG-Tags, eventuell auch ein Link). Danach wird per Zufallsgenerator einer ausgewählt und dieser wird dann zum Schirm geschrieben. Der Banner wird dann auch mittels eines Span-Bereichs positioniert. Über dem Link steht dann ein Link um den Banner weg zu schalten.

Die Praxis

<script type="text/javascript">
var werbung = new Array();
werbung[0] = '<a href=""><img src=""></a>';
werbung[1] = '<a href=""><img src=""></a>';
werbung[2] = '<a href=""><img src=""></a>';
werbung[3] = '<a href=""><img src=""></a>';
werbung[4] = '<a href=""><img src=""></a>';

var anzahl = werbung.length;
var werbung_zeigen = (Math.round((Math.random() * (anzahl - 1))));

document.write('<span id="box" style="z-index:2;
position:absolute;right:40px;top:50px;text-align:right;">');
document.write('<a href="javascript:weg_damit();">|X|</a><br>');
document.write(werbung[werbung_zeigen]);
document.write('</span>');

function weg_damit()
{
if (document.all) {document.all("box").style.display = "none";}
if (document.layers) {document.layers("box").style.visibilty = "hidden";}
if (document.getElementById) {document.getElementbyId("box").style.display = "none";}
}
</script>
Anfangs schreiben wir in einer Array die verschieden Banner. Diese existieren aus einem Link und eine Grafik. Hierin sollte die komplette Definition des jeweiligen Banners stehen.
Nachdem wird mit werbung.length gemessen wieviele Elemente in der Array sind. Danach wird per Zufall einer ausgewählt. Mit der Funktion Math.random wird eine Zufallszahl zwischen 0 und 1 genommen, die multipliziert wird mit der Anzahl von Elemente in der Array vermindert mit eins. Die Zahl die dann bekommen wird, wird dann abgerundet zu einer ganzen Zahl. Das Ergebnis ist eine Zahl die mindestens 0, maximal die Nummer des letzten Wertes einer Array ist.

Danach wird ein Span-Element geschrieben, dass man selbst definieren kann. Es sollte aber eine höhere Z-Index haben und absolut positioniert sein. Auch sollte es eine ID haben sodass es später unsichtbar gemacht werden kann. Danach wird ein Link dazu geschrieben womit man den Banner also verschwinden lassen kann.
Als nächstes wird der eigentliche Banner hinzugefügt. Hierfür sollte man der Name der Array schreiben gefolgt von der Index-Nummer des Wertes (mehr zu Arrays). Zuletzt wird dann einfach noch der End-Tag des Span-Elements hinzugefügt.

Als letztes sehen wir nochmal kurz die Funktion womit der Banner verschwindet.

function weg_damit()
{
if (document.all) {document.all("box").style.display = "none";}
if (document.layers) {document.layers("box").style.visibilty = "hidden";}
if (document.getElementById) {document.getElementById("box").style.display = "none";}
}
Da verschiedene Browser dies auf verschiedene Arten machen, muss anhand von was ein Browser erkennt, ein andere Code ausgeführt werden. Der Code erklärt sich weiter von selbst.

Um dieses Script zu nutzen muss man eigentlich nichts weiteres tun als seine Banner-Codes in der Array auf zu nehmen und eventuell noch den Link zum Abschalten nach den eigenen Wünschen anpassen. Wenn's noch Fragen gibt, stehe ich zur Verfügung im Forum auf dieser Seite.


dreamer
Expert
Beitrag vom:
11-08-2004, 12:42:22

Man kann auch ein Iframe im Banner einbauen, so kann man auch andere Seite darin anzeigen.

-----------------------------------------------------


Rolfhub
Senior Member
Beitrag vom:
28-02-2004, 04:13:51

@Dani

Hmm, also bei mir ist er verschwunden, obwohl ich den Mozilla einsetze. Muss also was anderes sein.

-----------------------------------------------------


Dani
Senior Member
Beitrag vom:
24-02-2004, 17:55:21

Ist es normal, dass der "Banner" auf deiner Seite nicht verschwindet? Oder liegt es an Mozilla?

-----------------------------------------------------
\"I have to share the credit. I may have invented it, but I think Bill made it famous. -- When he used it for the NT logon, that\'s what I meant. okay?\" (David Bradley über Ctrl-Alt-Del)


no_comment
Professonial
Beitrag vom:
23-02-2004, 22:31:03

ein sehr interessanter Artikel. gut finde ich, dass du ausdrücklich auf die Problematik ingewiesen hast. Dennoch sollte jeder selbst wissen, ob er seinen Inhalt mit Bannern überblenen möchte.

-----------------------------------------------------
Es gibt nur 3 natürliche Feinde des Programmierers: Tageslicht, frische Luft und das unerträgliche Gebrüll der Vögel -- http://pc-intern.com http://straightvisions.com


[back to top]



Userdaten
User nicht eingeloggt

Gesamtranking
Werbung
Datenbankstand
Autoren:04511
Artikel:00815
Glossar:04116
News:13565
Userbeiträge:16552
Queueeinträge:06248
News Umfrage
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
Mobile Nutzung möglich (Ipone, Android)
Externe API Schnittstelle/Plugins dritter
Zeiterfassung meiner Mitarbeiter
Exportieren in CSV/XLS
Siehe Kommentar



[Results] | [Archiv] Votes: 1158
Comments: 0