﻿/* -----------------------------------------------
   Streaming banners, horizontal - v.1
   (c) 2006 www.haan.net
   contact: jeroen@haan.net
   You may use this script but please leave the credits on top intact.
   Please inform us of any improvements made.
   When usefull we will add your credits.
  ------------------------------------------------ */
<!--

/* usage
<body>
<div id="slideCont" style="position:relative;z-index:1;width:425px;height:90px;top:0px;overflow:hidden;">
	<div id="slideA" style="position:absolute;z-index:1;top:0px;left:0px;width:850px;height:90px;overflow:hidden;">
		<div style="float:left" id="innerSlideA">
			<a href="http://www.apache.org/"><img src="/images/banners/apache.gif" width="126" height="44" border="0"></a>
			<a href="http://www.haan.net"><img src="/images/banners/banner_haan_net_en.gif" width="120" height="60" border="0"></a>
			<a href="http://www.mysql.com/"><img src="/images/banners/mysql.gif" width="126" height="44" border="0"></a>
		</div>
		<div id="slideB" style="position:relative;z-index:1;top:0px;left:0px;width:425px;height:90px;overflow:hidden;">
			<a href="http://www.apache.org/"><img src="/images/banners/apache.gif" width="126" height="44" border="0"></a>
			<a href="http://www.haan.net"><img src="/images/banners/banner_haan_net_en.gif" width="120" height="60" border="0"></a>
			<a href="http://www.mysql.com/"><img src="/images/banners/mysql.gif" width="126" height="44" border="0"></a>
		</div>
	</div>
</div>
</body>

In order the have the script working in FireFox as well you need a proper "DTD" to prevent the browser's "quirksmode".

Please see http://www.quirksmode.nl/ for more details.

Or in case you experience problems, copy and paste next line on top of your webpage:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

*/

function clip()
{
	// width of the banner container
	var contWidth = 880;
	// height of the banner container
	var contHeight = 110;

	var id1 = document.getElementById('slideA');
	var id2 = document.getElementById('slideB');

	id1.style.left = parseInt(id1.style.left)-1 + 'px';
	
	document.getElementById('slideCont').style.width = contWidth + "px";
	document.getElementById('slideCont').style.clip = 'rect(auto,'+ contWidth +'px,' + contHeight +'px,auto)';
	id2.style.display = '';
	if(parseFloat(id1.style.left) == -(contWidth))
	{
		id1.style.left = '0px';
	}
	setTimeout(clip,25)
}

window.onload = function()
{
	clip();
}
//-->
