<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com */
/* -----------------------------------------------
Streaming banners - v.1.1
(c) 2006
www.haan.net
contact:
jeroen( at )haan.net
You may use this script but please leave the credits on top intact.
Please inform us of any improvements made.
When useful we will add your credits.
------------------------------------------------ */
/* usage
<body>
<div id="slideCont" style="position:relative;z-index:1;width:140px;left:0px;overflow:hidden;">
<div id="slideA" style="position:absolute;z-index:1;top:0px;left:0px;width:140px;overflow:hidden;">
your banners (images inside anchor tags)
<div id="slideB" style="position:relative;z-index:1;top:0px;left:0px;width:140px;overflow:hidden;">
your banners (images inside anchor tags)
</div>
</div>
</div>
</body>
*/
function clip() {
// width of the banner container
var contWidth = 150;
// height of the banner container
var contHeight = 300;
var id1 = document.getElementById('slideA');
var id2 = document.getElementById('slideB');
var height = id1.offsetHeight;
id1.style.top = parseInt(id1.style.top)-1 + 'px';
document.getElementById('slideCont').style.height = contHeight + "px";
document.getElementById('slideCont').style.clip = 'rect(auto,'+ contWidth +'px,' + contHeight +'px,auto)';
id2.style.display = '';
if(parseFloat(id1.style.top) == -(height/2)) {
id1.style.top = '0px';
}
setTimeout(clip,50)
}
// Multiple onload function created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
clip();
});
</script>
<style>
#slideCont {
margin: 10px;
border: solid 1px #000;
text-align: center;
}
#slideCont img {
margin: 5px;
}
</style>
<div id="slideCont" style="position:relative;z-index:1;width:140px;left:400px;overflow:hidden;">
<div id="slideA" style="position:absolute;z-index:1;top:0px;left:0px;width:140px;overflow:hidden;">
<a href="http://www.apache.org/"><img src="apache.gif" width="126" height="44" border="0"></a>
<a href="http://www.haan.net"><img src="banner_haan_net_en.gif" width="120" height="60" border="0"></a>
<a href="http://www.linux.org/"><img src="linux.gif" width="126" height="64" border="0"></a>
<a href="http://www.mysql.com/"><img src="mysql.gif" width="126" height="44" border="0"></a>
<a href="http://www.php.net/"><img src="php.gif" width="126" height="44" border="0"></a>
<a href="http://www.ubuntu.com/"><img src="ubuntu.gif" width="126" height="34" border="0"></a>
<div id="slideB" style="position:relative;z-index:1;top:0px;left:0px;width:140px;overflow:hidden;">
<a href="http://www.apache.org/"><img src="apache.gif" width="126" height="44" border="0"></a>
<a href="http://www.haan.net"><img src="banner_haan_net_en.gif" width="120" height="60" border="0"></a>
<a href="http://www.linux.org/"><img src="linux.gif" width="126" height="64" border="0"></a>
<a href="http://www.mysql.com/"><img src="mysql.gif" width="126" height="44" border="0"></a>
<a href="http://www.php.net/"><img src="php.gif" width="126" height="44" border="0"></a>
<a href="http://www.ubuntu.com/"><img src="ubuntu.gif" width="126" height="34" border="0"></a>
</div>
</div>
</div>