(untagged)

Create Dynamic Banners By Using JavaScript

Nongjian Zhou

0.00/5 (No votes)

27 Nov 2000

This article show how to use JavaScript to dynamically display banners, very usful!

This is an example of how to dynamically display banners using JavaScript.

There are two parts to this method:

Write a meta tag as below:
```
<meta http-equiv="refresh" content="10">
```
This means that the page will refresh every 10 seconds. You may change the value "10" to any number.

2. Using getSeconds() method:

In JavaScript, the seconds are set as 0 - 59. You can divide this up as as you want. In this sample we divide the seconds into 6 sections:

We apply document.write to write a banner:

     if ((ss>=30)&&(ss<=39))
     document.write("<img src='BanC1line.gif' border='0'>")

In total we write 6 banners each different time slot within a single minute, and link the banners to different URL so the banners automatically change every 10 seconds. When the client clicks a banner they will be taken to the advertisers web site.

Below is the source code:

     <html><head>
     <title>Dynamic Banners</title>
     <meta name="Author" content="Nongjian Zhou">
     <meta http-equiv="refresh" content="10">
     <style type="text/css">
     <!--
     a:active { color: #0000FF; text-decoration: none}
     a:hover { color: #CC0000; text-decoration: none}
     a:visited { text-decoration: none}
     a:link { text-decoration: none}
     -->
     </style>
     </head>
     <body bgcolor=#ffffff>
     <script language="JavaScript">
     var banTime= new Date()
     var ss=banTime.getSeconds()
     
     if ((ss>=0)&&(ss<=9))
        document.write(
         "<table width=550 height=70 bgcolor=#336699 cellspacing=2><tr><td 
     align=center bgcolor=#ffeeee><font color=#666680 size=7><i><a href='#'
         onClick=window.open('http://www.webcollege.bizland.com/jsPub/index.htm',
         '','width=500 height=400')>JavaScript For Beginners</a></i></font>
         </td></tr></table>")

     if ((ss>=10)&&(ss<=19))
         document.write(
         "<a href='#' onClick=window.open('http://internetcollege.virtualave.net',
         '','width=500 height=400')><img 
         src='http://www.webcollege.bizland.com/BanInternetc.gif' border='0'></a>")

     if ((ss>=20)&&(ss<=29))
         document.write(
         "<a href='#' onClick=window.open('http://www.ishopnomarkup.com',
         '','width=500 height=400')><img 
         src='http://www.webcollege.bizland.com/BanIshop.gif' border='0'></a>")

     if ((ss>=30)&&(ss<=39))
         document.write(
         "<img src='http://www.webcollege.bizland.com/BanC1line.gif' border='0'>")

     if ((ss>=40)&&(ss<=49))
        document.write(
         "<table width=550 height=70 bgcolor=#336699 cellspacing=2><tr><td 
         align=center bgcolor=#ffeeff><font color=#6666ff size=7><i><a 
         href='#' onClick=window.open('http://www.tongchiu.com','',
         'width=500 height=400')>Tong&chiu Web Design Inc.</a></i></font>
         </td></tr></table>")

     if ((ss>=50)&&(ss<=59))
         document.write(
         "<table width=550 height=70 bgcolor=#336699 cellspacing=2><tr><td 
         align=center bgcolor=#eeeeff><font color=#008000 size=7><i><a 
         href='#' onClick=window.open('http://members.xoom.com/chinainfoma',
         '','width=500 height=400')>A Guide To China</a></i></font>
         </td></tr></table>")
     </script>
     </body></html>

You can change the method. For example, use GetHours() to set different image or text files display in different hours. To learn more about JavaScript, you can go to JavaScript For Beginners.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here