Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations John Tel on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
How to do a rotating banner
- Thread starter obliex
- Start date
trollacious
Programmer
Sure it's possible with Javascript, but usually done with server-side scripting. If you don't want the list weighted to show one ad more than others, then put the ad information in an array, pick a random number, and display the ad from that element in the array.
Lee
Lee
Here's an example of how to set it up :
*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<title>Rotating Banner Example</title>
<script language="javascript" type="text/javascript">
<!--
var index = 0;
var banners = new Array("[URL unfurl="true"]http://www.tek-tips.com/images/partnerbtn120x60.gif",[/URL] "[URL unfurl="true"]http://www.tek-tips.com/ads/codebanner.gif",[/URL] "[URL unfurl="true"]http://www.google.com/images/logo.gif");[/URL]
function rotate() {
if (index == banners.length) index = 0;
document.getElementById('the_banner').src = banners[index];
index++;
setTimeout('rotate()', 5000);
}
-->
</script>
<style type="text/css">
</style>
</head>
<body onload="setTimeout('rotate()', 5000);">
<img id="the_banner" src="[URL unfurl="true"]http://www.tek-tips.com/images/partnerbtn120x60.gif"[/URL] />
<br />
The banner above will change every 5 seconds.
</body>
</html>*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
- Thread starter
- #4
Code:
<html>
<head>
<title>Banners</title>
<style type="text/css">
<!--
img {
display: none;
}
-->
</style>
<script type="text/javascript">
<!--
function hideAll(elem)
{
var obj = null;
for (var i=1;obj = document.getElementById("logo"+i) != null; i++)
{
obj.style.display = "none";
}
document.getElementById(elem).style.display = "";
}
// -->
</script>
</head>
<body>
<img src="logo1.gif" name="logo1" id="logo1">
<img src="logo2.gif" name="logo2" id="logo2">
<img src="logo3.gif" name="logo3" id="logo3">
<img src="logo4.gif" name="logo4" id="logo4">
<img src="logo5.gif" name="logo5" id="logo5">
<a href="#" onclick="hideAll('logo1');">Show logo 1</a>
<a href="#" onclick="hideAll('logo2');">Show logo 2</a>
<a href="#" onclick="hideAll('logo3');">Show logo 3</a>
<a href="#" onclick="hideAll('logo4');">Show logo 4</a>
<a href="#" onclick="hideAll('logo5');">Show logo 5</a>
</body>
</html>--Chessbot
"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series
trollacious
Programmer
If I read your post correctly, you want 5 banners showing at any one time, and they rotate one at a time. For that, you'd have:
<script language="javascript">
banner=new Array(), bannercount = 0, bi=0, maxbanners=5;
banner[bi++]={url:"banner[bi++]={url:"banner[bi++]={url:"banner[bi++]={url:"banner[bi++]={url:"banner[bi++]={url:"
bi=0;
function rotatebanner()
{
bannercount++;
bannercount %= banner.length;
bi++;
bi %= maxbanners;
document.images['banner' + bi].src = banner[bannercount].image;
}
function changeurl(bannernumber)
{
var img = document.images['banner' + bannernumber].src;
for (var bindex = 0;bindex < banner.length;bindex++)
{
if (banner[bindex].image==img)
{
location.href=banner[bindex].url;
//either go to URL with location.href or open link in new window
}
}
}
for (var bindex=0;bindex<maxbanners;bindex++)
{
var bstring = '<a href="javascript:changeurl(';
bstring += "'" + bindex + "'";
bstring += ')">';
bstring += '<img name="banner' + bindex + '" border="0" ';
bstring += 'src="' + banner[bindex].image + '" ';
bstring += '></a><br>'
document.write(bstring);
}
setTimeout('rotatebanner()', 3000);
</script>
This writes the images to the page (you'll have to do your own formatting, or you can write them manually) and automatically rotates the URLs along with the images. Just add new items to the banner array as you need.
Lee
<script language="javascript">
banner=new Array(), bannercount = 0, bi=0, maxbanners=5;
banner[bi++]={url:"banner[bi++]={url:"banner[bi++]={url:"banner[bi++]={url:"banner[bi++]={url:"banner[bi++]={url:"
bi=0;
function rotatebanner()
{
bannercount++;
bannercount %= banner.length;
bi++;
bi %= maxbanners;
document.images['banner' + bi].src = banner[bannercount].image;
}
function changeurl(bannernumber)
{
var img = document.images['banner' + bannernumber].src;
for (var bindex = 0;bindex < banner.length;bindex++)
{
if (banner[bindex].image==img)
{
location.href=banner[bindex].url;
//either go to URL with location.href or open link in new window
}
}
}
for (var bindex=0;bindex<maxbanners;bindex++)
{
var bstring = '<a href="javascript:changeurl(';
bstring += "'" + bindex + "'";
bstring += ')">';
bstring += '<img name="banner' + bindex + '" border="0" ';
bstring += 'src="' + banner[bindex].image + '" ';
bstring += '></a><br>'
document.write(bstring);
}
setTimeout('rotatebanner()', 3000);
</script>
This writes the images to the page (you'll have to do your own formatting, or you can write them manually) and automatically rotates the URLs along with the images. Just add new items to the banner array as you need.
Lee
- Status
Similar threads
- Locked
- Question