Bewegliche Banner mit LayernGeflügelte Ads
Fehler vermeiden
Bewegliche Banner mit Layern
Das haben Sie sicher auch schon gesehen: Statt in einem neuen Fenster taucht die Werbung einfach direkt auf der Seite auf. Die Werbung ist kein Banner mit einer festen Größe, sondern eine Grafik in beliebiger Form. War der Webdesigner gnädig, hat er außerdem einen Schließen-Knopf spendiert, mit dem genervte Surfer die Werbung ausblenden können.
Zugegeben, die ungeduldigen Surfer sind das große Problem dieser Werbeform. Deswegen ist sie ? nach anfänglicher Beliebtheit ? auch weniger auf großen Nachrichtenseiten zu sehen. Dennoch, die Klickraten der Aufmerksamkeit heischenden Grafiken sind gut. Sie sollten es nur tunlichst vermeiden, den Nutzer durch einen fehlenden Button zum Ausblenden der Werbung zu verärgern. Ebenfalls zu vermeiden sind Banner mit Ausschalter, der aber einfach nicht funktioniert. Lachen Sie nicht: Ein großes deutsches Versandhaus hat damit so manchem Surfer den Inhalt einiger News-Seiten verwehrt.
Damit Sie solche Fehler vermeiden, zeigt Ihnen dieser Workshop, wie Sie ein bewegliches Banner erstellen und welche eigentlich einfachen Techniken dahinter stecken.
Lösung mit Flash
Bewegliche Banner mit Layern
Prinzipiell gibt es zwei Lösungsansätze für die Banner in der Website: zum einen Flash-Filme, zum anderen eine Umsetzung mit CSS-Positionierung (oder neudeutsch Layern) und ein wenig Javascript. Die Flash-Variante erfreut sich recht großer Beliebtheit und ist wirklich simpel.
Flash bietet viele grafische Möglichkeiten, durch die sich die Banner besser hervorheben. Sie können einen SWF-Film ebenfalls als teilweise transparentes Werbebanner einsetzen.
Dazu veröffentlichen Sie den Film und fügen dann in den HTML-Code zu den übrigen Parametern die folgende Zeile hinzu:
Nun wird der Hintergrund des Flash-Films transparent angezeigt. Um dies zu testen, können Sie in der Flash-Datei im body-Tag die Hintergrundfarbe der HTML-Seite ändern. Leider funktioniert dieser Effekt nur im Internet Explorer, da nur dieser das object-Tag verwendet. Netscape, Mozilla und Opera zeigen den ursprünglichen Hintergrund des Flash-Films. Dieser lässt sich übrigens auch in der HTML-Seite direkt ändern. Für das object-Tag finden Sie die Hintergrundfarbe in einem Parameter:
Für das embed-Tag handelt es sich um ein Attribut:
bgcolor="#0000ff"
Interessanterweise gibt es für die einfache Transparenz-Funktionalität im Internet teils kostenpflichtige Tools, die dem Designer unter die Arme greifen. Eigentlich unnötig, da es sich wirklich nur um ein wenig HTML-Code dreht.
Die CSS- und Javascript-Lösung ist etwas komplizierter, dafür aber Plug-in-unabhängig und auch für ältere Browser optimierbar. Sie kommt hier für einen fiktiven Koffershop zum Einsatz.
CSS und Javascript
Bewegliche Banner mit Layern
Die CSS- und Javascript-Lösung ist etwas komplizierter, dafür aber Plug-in-unabhängig und auch für ältere Browser optimierbar. Sie kommt hier für einen fiktiven Koffershop zum Einsatz.
Der Anfang ist sehr einfach. Sie packen den gesamten Inhalt des Banners in div-Tags und positionieren diese absolut auf der Seite. Wenn die Seite mehrere absolut positionierte Elemente enthält, sollten Sie außerdem den z-index setzen:
Der Inhalt kann alles sein: eine Tabelle, HTML-Text oder wie in diesem Beispiel eine Grafik mit Links. In den meisten Fällen bietet sich eine Grafik im GIF-Format an, denn ein GIF können Sie mit transparenten Bereichen speichern.
Transparente Bereiche sind auch das Salz in der Suppe dieser Werbeform. Es sieht einfach beeindruckender aus, wenn das Banner keine rechteckige Form hat, sondern der darunter liegende Inhalt der Site durchscheint. Bei Fotos oder bei Schrift mit feinen Rändern führt dies allerdings zu Problemen, da Sie keine halb transparenten Pixel definieren können. Im Grafikprogramm wird der Übergang zur Transparenz normalerweise mit einer Hintergrundfarbe aufgefüllt. Wenn Sie die Werbung aber auf eine Website legen, deren Inhalte sich farblich stark unterscheiden, erzeugt der Übergang von der Transparenz zum Banner hässliche Farbblitzer.
Ganz vermeiden lässt sich dieser Effekt nicht. In Photoshop ab Version 7 gibt es dafür Transparenz-Dithering. Hierbei wird der sanfte Übergang mit einer Mischung aus transparenten Pixeln und Pixeln in der Bannerfarbe simuliert. Allerdings sieht dies am Bildschirm meist nicht überzeugend aus.
Schließen nicht vergessen!
Bewegliche Banner mit Layern
Das Wichtigste für ein Werbebanner, das aktiv den Inhalt der Webseite verdeckt, ist natürlich, dass der Nutzer es loswerden kann. Die bevorzugte Methode dafür ist Javascript. Zuerst fügen Sie in den div-Block eine Schaltfläche zum Schließen ein:
Im Link für diese Schaltfläche rufen Sie eine Javascript-Funktion auf, die das Schließen übernehmen soll. Die Funktion erhält als Parameter die ID des Werbebanners.
Dann folgt eine einfache Fallunterscheidung, die das Schließen für verschiedene Browser übernimmt.
Schließen heißt hier ganz einfach, dass das div-Element mit dem gesamten Inhalt ausgeblendet wird:
function schliessen(name) {
if (document.getElementById)
document.getElementById(name).style.visibility = "hidden";
else if (document.all)
document.all(name).style.visibility = "hidden";
else if (document.layers)
document.layers[name].visibility = "hidden";
}
getElementById() ist für alle W3C-konformen Browser wie Mozilla und Opera zuständig und wird auch vom Internet Explorer verstanden. document.all() hilft bei älteren IE-Versionen, document.layers ist für Netscape 4.x zuständig.
Ideen
Bewegliche Banner mit Layern
In der Gestaltung des Banners sind Sie sehr frei. Wenn Sie allerdings Grafiken verwenden, liegt der Link immer um die komplette Grafik. Wollen Sie die transparenten Bereiche aussparen, sollten Sie eine Imagemap einsetzen oder die Grafik zerschneiden und mittels einer HTML-Tabelle zusammenfügen. Dabei helfen natürlich Grafikprogramme oder Web-Editoren.
Die Symbole zum Schließen finden Sie beispielsweise in den bei Windows mitgelieferten Symbolschriften. Wenn Sie dann noch ein wenig mit einem Bildbearbeitungsprogramm nacharbeiten, haben Sie schnell eigene Kreationen.
Deaktiviertes Javascript
Bewegliche Banner mit Layern
Die bisherige Lösung ist recht komfortabel, funktioniert allerdings nur, wenn der Nutzer Javascript aktiviert hat. Ohne Javascript wird das Banner zwar auf der Seite angezeigt, das Schließen klappt allerdings nicht mehr.
Sie können nun natürlich mit der großen Keule alle nicht Javascript-fähigen Browser herausfiltern. Dies ist aber meist für ein bisschen Werbung nicht gewünscht. Deswegen verwenden Sie einen Trick. Blenden Sie das Werbebanner per CSS aus:
Rufen Sie beim Laden der Webseite eine Javascript-Funktion auf:
Diese Funktion blendet das Werbebanner für alle Javascript-fähigen Browser ein:
function einblenden(name) {
if (document.getElementById) {
document.getElementById(name).style.visibility = "visible";
}
else if (document.all) {
document.all(name).style.visibility = "visible";
}
else if (document.layers) {
document.layers[name].visibility = "visible";
}
}
Browser mit deaktiviertem Javascript ignorieren schon den Javascript-Funktionsaufruf und bleiben so von der Werbung unbehelligt.
Eine Zeit lang einblenden
Bewegliche Banner mit Layern
Wenn Sie Ihren Surfern nur eine kurze Werbeeinblendung präsentieren möchten, können Sie das Banner auch nach einer festgelegten Zeitspanne wieder ausblenden.
Dafür eignet sich die Javascript-Methode setTimeout(Funktion, Zeit). Sie ruft eine Funktion nach einer festgelegten Zeitspanne in Millisekunden, also in tausendstel Sekunden, auf. Wenn Sie setTimeout() wie folgt in die Funktion einblenden() integrieren, wird das Banner nach fünf Sekunden ausgeblendet:
setTimeout("schliessen('" + name + "')", 5000);
Wie lange ein Banner sichtbar ist, können Sie natürlich frei wählen. Allerdings sollten Sie darüber nachdenken, dass ein Nutzer normalerweise auf einer Webseite nicht allzu lange verweilt, und den Zeitraum dementsprechend kurz wählen.
Bewegung per GIF-Animation
Bewegliche Banner mit Layern
Wenn Sie Bewegung in Ihre Werbung bringen möchten, geht der erste Gedanke in Richtung GIF-Animation. Sie animieren einfach das Bild für das Banner und haben schon Bewegung. Wenn Sie den Effekt nicht übertreiben und vielleicht noch einen kleinen Gag einbauen, kann dies ganz gut wirken.
Allerdings reicht es nicht aus, um Bewegung über die ganze Seite zu zeigen. Die einzige Möglichkeit wäre, die GIF-Grafik so weit auszudehnen und große transparente Bereiche zu schaffen, in denen dann die Animation stattfindet. Dagegen spricht allerdings zum einen die wachsende Dateigröße, zum anderen, dass damit die GIF-Grafik alle Links und Inhalte der Seite überdeckt.
Bewegung mit Javascript
Bewegliche Banner mit Layern
Als Alternative können Sie Javascript zum Bewegen verwenden. Die Kombination von Javascript mit CSS wird übrigens DHTML für Dynamic HTML genannt. Eigentlich handelt es sich dabei um ein Kunstwort, das sich aber eingebürgert hat.
Und so geht eine einfache Animation: Mit setInterval(Funktion, Zeit) rufen Sie eine Funktion in regelmäßigen Abständen auf.
id = setInterval("bewegen('" + name + "')", 100);
In der Variablen id speichern Sie die ID des Intervalls, um es später in der Funktion schliessen() beim Ausblenden des Werbebanners wieder beenden zu können:
clearInterval(id);
Die Variable id sollten Sie außerhalb der Funktionen als globale Variable deklarieren. Nun aber zur Funktion für das Bewegen. Sie soll das Werbebanner ganz einfach von links nach rechts verschieben.
Auch hier treffen Sie wieder auf die Browser-Unterscheidung mit den drei Browser-Objekten. Für die W3C-konformen Browser müssen Sie einen kleinen Umweg gehen: Sie lesen die Koordinate in eine Variable aus und wandeln Sie zuvor mit parseInt() in einen Integer-Wert um:
function bewegen(name) {
if (document.getElementById) {
var x_koo = parseInt(document.getElementById(name).style.left);
Dieser Schritt ist notwendig, da die Koordinate in der Eigenschaft left immer mit der Einheit als String gespeichert ist. Statt 150 liefert die Eigenschaft also 150px für 150 Pixel. Anschließend setzen Sie die Eigenschaft neu und ziehen von der ursprünglichen Koordinate 5 ab, um das Werbebanner nach links zu verschieben:
document.getElementById(name).style.left = x_koo ? 5;
}
Für die anderen Browser benötigen Sie diesen Umweg nicht mehr, da Sie die Koordinaten als reine Zahlenwerte ablegen:
else if (document.all) {
document.all(name).style.pixelLeft -= 5;
}
else if (document.layers) {
document.layers[name].pageX -= 5;
}
}
Beachten Sie, dass die älteren Browser andere Eigenschaften verwenden als die W3C-konformen Browser. Da Werbung auf möglichst vielen Browsern funktionieren sollte, müssen Sie leider in den sauren Apfel der Browser-Optimierung beißen.
Wenn Sie das Werbebanner vertikal verschieben möchten, verwenden Sie die Eigenschaft top beziehungsweise für ältere Internet Explorer pixelTop und für Netscape 4.x pageY. Eine spannendere Bewegung erreichen Sie mit Zufallswerten (Math.random()).
Sie können die Bewegung natürlich auch an bestimmten Ereignissen orientieren. Die bekannteste Variante ist das Verfolgen des Mauszeigers. Das Werbebanner wird dadurch zum Sticky Ad. Da dies den Nutzer allerdings mit ziemlicher Sicherheit in den Wahnsinn treibt, sollten Sie darauf verzichten.
Interessant kann dagegen sein, dem Nutzer zu erlauben, das Werbebanner per Drag and Drop zu verschieben. Einziger Nachteil: Sie können es nicht gleichzeitig verschiebbar machen und mit einem Link versehen.
Fazit
Bewegliche Banner mit Layern
Überlegen Sie sich gut, wie Sie Werbebanner gestalten, die sich über den Inhalt der Website legen. Zu aufdringliche Werbung kann Surfer leicht vergraulen, zu zurückhaltende, unauffällige Banner produzieren keine vernünftigen Klickraten. Welchen Kompromiss Sie auch wählen ? nehmen Sie auf Ihre Nutzer Rücksicht.