 |
||||||||||
| ||||||||||
| ||||||||||
Web Development »
Client side scripting »
General
Intermediate
Create Dynamic Banners By Using JavaScriptBy Nongjian ZhouThis article show how to use JavaScript to dynamically display banners, very usful! |
Javascript, VC6, C++Windows, NT4, Win2K, Visual Studio, Dev Posted: 19 Oct 2000 Updated: 27 Nov 2000 Views: 75,737 Bookmarked: 14 times |
||
|
|
|||
|
Advanced Search Sitemap |
|
|
|
||||||||||||||||
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:
0 - 9 10 - 19 20 - 29 30 - 39 40 - 49 50 - 59We apply
document.writeto 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.
| You must Sign In to use this message board. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
General 
News 
Question 
Answer 
Joke 
Rant 
Admin
|
PermaLink |
Privacy |
Terms of Use
Last Updated: 27 Nov 2000 Editor: Chris Maunder |
Copyright 2000 by Nongjian Zhou Everything else Copyright © CodeProject, 1999-2008 Web12 | Advertise on the Code Project |