»
EnglishFrenchVietnamese

Print - Streaming Banners - JavaScriptBank.com

Full version: jsB@nk » Image » Slideshow » Streaming Banners
URL: http://www.javascriptbank.com/streaming-banners.html

Streaming Banners © JavaScriptBank.comAdd a banner roll to your Web site with this easy-to-use script. Each banner can also include a URL. The size can be set in the script file.

Full version: jsB@nk » Image » Slideshow » Streaming Banners
URL: http://www.javascriptbank.com/streaming-banners.html



CSS
<style type="text/css">/*     This script downloaded from www.JavaScriptBank.com     Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/.jsbank_sample_cont {margin: 20px; padding: 20px;}.jsbank_sample_tit {font-weight: bold; margin-bottom: 10px; padding: 5px; width: auto; background-color: #c0c0c0; border: 5px solid #a0a0a0; color: black; text-align: center;}/*Created by: Jeroen Haan Web Site: http://www.haan.net/*/#slideCont {margin: 10px;border: solid 1px #000;text-align: center;}#slideCont img {margin: 5px;}</style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<script language="javascript">/* -----------------------------------------------   Streaming banners - v.1.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 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/addLoadEventfunction 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><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<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://javascriptbank.com"><img src="../image/logojs.gif" width="126" height="44" border="0"></a>    <a href="http://javascriptbank.com"><img src="../image/logojs.jpg" width="120" height="60" border="0"></a>    <a href="http://javascriptbank.com"><img src="../image/logojs.gif" width="126" height="64" border="0"></a>    <a href="http://javascriptbank.com"><img src="../image/logojs.jpg" width="126" height="44" border="0"></a>    <a href="http://javascriptbank.com"><img src="../image/logojs.gif" width="126" height="44" border="0"></a>    <a href="http://javascriptbank.com"><img src="../image/logojs.jpg" 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://javascriptbank.com"><img src="../image/logojs.gif" width="126" height="44" border="0"></a>      <a href="http://javascriptbank.com"><img src="../image/logojs.jpg" width="120" height="60" border="0"></a>      <a href="http://javascriptbank.com"><img src="../image/logojs.gif" width="126" height="64" border="0"></a>      <a href="http://javascriptbank.com"><img src="../image/logojs.jpg" width="126" height="44" border="0"></a>      <a href="http://javascriptbank.com"><img src="../image/logojs.gif" width="126" height="44" border="0"></a>      <a href="http://javascriptbank.com"><img src="../image/logojs.jpg" width="126" height="34" border="0"></a>    </div>  </div></div><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->