Tutorial: Skybanner-Positioning
Mit der von uns entwickelten Lösung zur dynamischen Positionierung von Skybannern, konnten wir über ein einfaches JavaScript ein Problem zahlreicher Webmaster lösen.
Ein typisches Problem von Internetauftritten, die sich für eine zentrierte Darstellung im Browser entscheiden, ist die Integration des sehr effektiven Werbemittels "Skybanner". Aufgrund der zentrierten Darstellung können Skybanner nicht als Teil der TABLE-Struktur eingefügt werden - die Zentrierung würde "verschoben" wirken. Eine Alternative ist daher die Verwendung von DIV-Layern. Doch auch hier kommt es aufgrund der unterschiedlichen Bildschirmauflösungen der Besucher zu Problemen - bei einer klassischen (statischen) Integration würde der Layer bei den unterschiedlichen Auflösungen unterschiedlich positioniert werden - im schlimmsten Fall legt sich der Layer mit dem Banner über den Contentbereich.
Unsere Herausforderung bestand somit darin, eine Lösung zu entwickeln, bei der sich der Skybanner dynamisch zur Laufzeit auf der Client-Seite positioniert, ohne dabei störend zu wirken (indem er sich z.B. über den Contentbereich legt oder unerwünschte horizontale Scrollbalken hervorruft.).
Die Lösung bestand darin, ein JavaScript zu entwickeln, das den Layer, abhängig von der Browsergröße und auch bei Veränderungen, neu positioniert. Sollte also die Client-Auflösung zu gering sein oder im Verlauf der Session verändert werden (z.B. durch Verkleinern des Browsers), wird der Layer ausgeblendet. Somit ist sichergestellt, dass kein unerwünschter horizontaler Scrollbalken erscheint. Bei jeglicher Veränderung prüft das Script außerdem erneut die Größe des Browsers und berechnet die neue Position.
Testen Sie es selbst - auf der rechten Seite wird Ihnen ein grauer Demo-Skyscraper angezeigt. Sehen Sie ihn nicht, ist Ihre Auflösung zu gering. Wenn Sie ihn sehen, können Sie nun die Browsergröße nach Belieben verändern. Der Banner wird sich jedes Mal neu positionieren bzw. wird er sich sogar ausblenden, sollte die Auflösung zu gering werden.
Nachfolgend stellen wir Ihnen das entsprechende JavaScript zur Verfügung:
<!-- SKYBANNER-LAYER FESTLEGEN START -->
<div id="Skybanner" style="position:absolute; top:120px; left:800px; width:120px; height:600px; z-index:1; display:none" >
<img src="http://www.iuventa.net/_images/skybanner.gif" border="0" height="600" width="120" alt="Skybanner">
</div>
<!-- SKYBANNER-LAYER FESTLEGEN ENDE -->
<!-- SKYBANNER-POSITIONIERUNG START -->
<script language="javascript">
function posSkybanner()
{
/////////////////////////////////////////////////////////
// BITTE NACHFOLGENDE WERTE KONFIGURIEREN
var Seitenbreite = 770; // max. Breite Ihrer Seite
var Bannerbreite = 120; // max. Breite des Banners
var maxSeitenbreite = Seitenbreite + Bannerbreite + Bannerbreite + 60;
/////////////////////////////////////////////////////////
// AB HIER KEINE AENDERUNGEN MEHR DURCHFÜHREN
var Fensterbreite;
var BannerAbstand;
// Netscape 4, Opera 5.12, Firefox 1.0: window.outerWidth
// Internet Explorer: document.body.offsetWidth
if (window.innerWidth)
{
// Netscape & Co
Fensterbreite = window.outerWidth;
}else if(document.body && document.body.offsetHeight){
// Internet Explorer
Fensterbreite = document.body.offsetWidth;
}else{
// Unbekannt
return 0;
}
// neue Bannerposition berechnen
BannerAbstand = (Fensterbreite/2) + (Seitenbreite/2);
// Banner neu positionieren, falls genügend Breite vorhanden ist
if(Fensterbreite > maxSeitenbreite)
{
document.all.Skybanner.style.display = "block";
document.all.Skybanner.style.left = BannerAbstand + "px";
}else{
document.all.Skybanner.style.display = "none";
}
}
window.onresize = posSkybanner;
// Erst-Initialisierung
posSkybanner();
</script>
<!-- SKYBANNER-POSITIONIERUNG ENDE --> |
|
Der obige Quellcode unterteilt sich in zwei Bereiche:
1. Layer mit dem Skybanner festlegen
2.
JavaScript für die dynamische Positionierung
Fügen
Sie den obigen Code einfach in Ihre Seite ein und hinterlegen Sie Ihren Skybanner. Falls Sie einen breiteren Skybanner verwenden möchten (z.B. 160px oder 200px) müssen Sie zusätzlich auch die Variablen im JavaScript anpassen.
Sind Sie neugierig geworden? Gerne stehen wir Ihnen für ein Gespräch zur Verfügung. Nehmen Sie hierzu bitte Kontakt mit uns auf. |
|
