Aufklappende Werbebanner mit JavaScript und CSS

Feste Bannerformate sind etwas schönes. Einen besonderen Aha-Effekt beim Betrachter wird erreicht, indem das Banner aufs Überfahren mit der Mouse reagiert und sich vergrößert:

So haben die Werbebotschaften mehr Platz, das Mouse-Over-Banner kann beliebig groß gestaltet werden. Wenn der Webseitenbesucher mit der Mouse unbedacht über das Banner fährt, wechselt es sich und er schaut ein zweites Mal hin.

Der HTML-Code für ein solches Banner ist im Endeffekt auch ganz einfach:

<div style="width:728px;height:90px;position:relative" 
	onmouseover="
		this.getElementsByTagName('img')[0].src = '728x180.gif';
		this.getElementsByTagName('div')[0].style.height = '180px';
	" 
	onmouseout="
		this.getElementsByTagName('img')[0].src = '728x90.gif';
		this.getElementsByTagName('div')[0].style.height = '90px'
	">
	<div style="width:728px;height:90px;position:absolute;top:0;left:0;overflow:hidden">
		<a href="#"><img src="728x90.gif" alt="" border="0" /></a>
	</div>
</div>

Ich habe den JavaScript-Code auf mehrere Zeilen verteilt – so funktioniert das ganze natürlich nicht, sondern ist nur besser zu lesen.

Per JavaScript-Funktion

Und da Menschen bekanntlich faul sind, lässt sich das ganze bequem in eine JavaScript-Funktion packen:

<script type="text/javascript" language="javascript">
<!--
function mouseoverbanner(url, img1, img2, width, height1, height2) {
	i1 = new Image(); i1.src = img1;
	i2 = new Image(); i2.src = img2;
	document.write('<div style="width:' + width + 'px;height:' + height1 + 'px;position:relative;margin:0 auto" onmouseover="this.getElementsByTagName(\'img\')[0].src=\'' + img2 + '\';this.getElementsByTagName(\'div\')[0].style.height = \'' + height2 + 'px\';this.getElementsByTagName(\'div\')[0].style.zIndex=128" onmouseout="this.getElementsByTagName(\'img\')[0].src=\'' + img1 + '\';this.getElementsByTagName(\'div\')[0].style.height = \'' + height1 + 'px\';this.getElementsByTagName(\'div\')[0].style.zIndex=1">');
	document.write('<div style="width:' + width + 'px;height:' + height1 + 'px;position:absolute;top:0;left:0;overflow:hidden;z-index:1">');
	document.write('<a href="' + url + '" target="_blank"><img src="' + img1 + '" alt="" border="0" /></a>');
	document.write('</div></div>');
}

mouseoverbanner('#', '728x90.gif', '728x180.gif', 728, 90, 180);
// -->
</script>

Die Funktion mouseoverbanner(...) erzeugt den notwendigen HTML-Code. Sie erwartet die Parameter:

1. Die Klick-URL des Banners
2. Die Bild-URL des Grund-Banners
3. Die Bild-URL des größeren Ersatz-Banners
4. Die Breite der Banner
5. Die Höhe des Grund-Banners
6. Die Höhe des größeren Ersatz-Banners

Die URLs müssen als String angegeben werden (in Anführungszeichen), die Angaben für Breite und Höhe als reinen Zahlenwert.

Neben dem HTML-Code werden beide Grafiken im JavaScript vorgeladen, sodass das Ersatz-Banner beim Wechsel sofort sichtbar ist.

Browserkompatibilität

Bisher wurde der Bannercode im Firefox 2.0, 3.0 und Microsoft Internet Explorer 7.0 erfolgreich getestet.