Click here to Skip to main content
Click here to Skip to main content

Create Dynamic Banners By Using JavaScript

, 27 Nov 2000
Rate this:
Please Sign up or sign in to vote.
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:

  1. 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. 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:

          0 - 9
         10 - 19
         20 - 29
         30 - 39
         40 - 49
         50 - 59
    

    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

Share

About the Author


Comments and Discussions

 
QuestionNot working Pinmembermsc04fs8-May-07 3:44 
GeneralNice banner script PinmemberSridhar Ramachandran5-Mar-02 17:27 
GeneralCreate Dynamic Banners By Using JavaScript Pinmembermalar8-Feb-01 19:41 
Generalone more tip to enhance this source. PinmemberSangjin Kang26-Jan-01 13:28 
Generalthe embedded meta-refresh tag it annoying! PinsussJason De Arte20-Oct-00 11:23 
GeneralRe: the embedded meta-refresh tag it annoying! PinsussChris Maunder23-Oct-00 5:23 
GeneralRe: the embedded meta-refresh tag it annoying! PinsussAnonymous30-Mar-03 1:45 
GeneralRe: the embedded meta-refresh tag it annoying! PinsussAnonymous30-Mar-03 1:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140827.1 | Last Updated 28 Nov 2000
Article Copyright 2000 by Nongjian Zhou
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid