The JavaScript Source: Image Effects : Streaming Banners

General

Add 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.

Notes

Created by: Jeroen Haan
Web Site: http://www.haan.net/
Posted: April 9, 2007

In order the have the script working in FireFox as well you need a proper "DTD" to prevent the browser's "quirksmode". See http://www.quirksmode.nl/ for more details.

Or in case you experience problems, copy and paste next line on top of your Web page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: banner.js

/* 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@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>

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 = 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();
});

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

#slideCont {
	margin: 10px;
	border: solid 1px #000;
	text-align: center;
}
#slideCont img {
	margin: 5px;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="banner.js"></script>

Body

Paste this code into the BODY section of your HTML document


<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>

User Comments

Add a comment, suggestion, or correction

Comments feed

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

8. From: jamika
help
05/08/2008 22:55:43

9. From: Lee (Admin)
05/12/2008 10:32:35

6. From: Pat
10/19/2007 07:37:34

7. From: Lee (Admin)
10/26/2007 13:58:52

5. From: Jeroen Haan
horizontal version
06/20/2007 20:56:13

4. From: Donald Kiesling
05/04/2007 16:07:20

3. From: Alain
04/19/2007 13:02:57

2. From: Jeroen Haan
04/15/2007 14:41:35

1. From: Nishesh Dubey
04/15/2007 01:34:36

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

8. From: jamikahelp05/08/2008 22:55:43

9. From: Lee (Admin)05/12/2008 10:32:35

6. From: Pat10/19/2007 07:37:34

7. From: Lee (Admin)10/26/2007 13:58:52

5. From: Jeroen Haanhorizontal version06/20/2007 20:56:13

4. From: Donald Kiesling05/04/2007 16:07:20

3. From: Alain04/19/2007 13:02:57

2. From: Jeroen Haan04/15/2007 14:41:35

1. From: Nishesh Dubey04/15/2007 01:34:36

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

8. From: jamika
help
05/08/2008 22:55:43

9. From: Lee (Admin)
05/12/2008 10:32:35

6. From: Pat
10/19/2007 07:37:34

7. From: Lee (Admin)
10/26/2007 13:58:52

5. From: Jeroen Haan
horizontal version
06/20/2007 20:56:13

4. From: Donald Kiesling
05/04/2007 16:07:20

3. From: Alain
04/19/2007 13:02:57

2. From: Jeroen Haan
04/15/2007 14:41:35

1. From: Nishesh Dubey
04/15/2007 01:34:36