homepage Welcome to WebmasterWorld Guest from 54.234.143.43
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Change Banner After x amount of seconds
Banner Rotator
asas111




msg:3953470
 3:16 am on Jul 16, 2009 (gmt 0)

I have a banner rotation on my website. It basically displays a different random ad every time you load the page.

However, I would like to change it, so that the Ads will actually change after x amount of seconds, while you are still in the page.

Here is my code and I would really appreciate if anyone can tell me what is missing, or what do I need to add to make it change after certain seconds (say 10 seconds)

----------------------------

<SCRIPT LANGUAGE="Javascript"><!--

function banner() {
};

banner = new banner();
number = 0;

// bannerArray

banner[number++] = "<a href='http://www.site.com/' target='_blank'><img src='http://www.mysite.com/banners/james.gif' border='0'></a>"
banner[number++] = "<a href='http://www.mysite.com/amazon' target='_blank'><img src='http://www.mysite.com/banners/amshopping.gif' border='0'></a>"
banner[number++] = "<a href='http://www.mysite.com/banners/johnnyvideophoto.htm' target='_blank'><img src='http://www.mysite.com/banners/johnnyvideo.gif' border='0'></a>"
banner[number++] = "<a href='http://www.nmarket.com' target='_blank'><img src='http://www.mysite.com/banners/nmarket.gif' border='0'></a>"

// keep adding items here...

increment = Math.floor(Math.random() * number);

document.write(banner[increment]);

//--></SCRIPT>

-------------------------------

Thank a lot

 

birdbrain




msg:3953587
 8:23 am on Jul 16, 2009 (gmt 0)

Hi there asas111,

the code that you have there looks a little dated. ;)

The use of document.getElementById() is now preferred to that of document.write().

Have a look at this example...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Rotating links</title>

<style type="text/css">
#link_img {
display:block;
border:0;
}
</style>

<script type="text/javascript">

var links=[
'http://www.webmasterworld.com/', [red] /* add as many links as you like! */[/red]
'http://www.w3.org/',
'http://www.mozilla.com/' [red] /*note:- no comma after last item */[/red]
];

var pics= [
'http://www.searchengineworld.com/gfx/logo.png', [red] /* pics length must equal the link length */[/red]
'http://www.w3.org/Icons/w3c_home',
'https://addons.mozilla.org/img/amo2009/app-icons/firefox.png' [red]/* note:- no comma after last item */[/red]
];

var speed=10000; [red]/*this is the time in milliseconds adjust to suit*/[/red]
var c=0;

function showlink() {

document.getElementById('link').href=links[c];
document.getElementById('link_img').src=pics[c];

c++;
if(c==links.length) {
c=0;
}
setTimeout(function(){showlink()},speed);
}

if(window.addEventListener) {
window.addEventListener('load',showlink,false);
}
else {
if(window.attachEvent) {
window.attachEvent('onload',showlink);
}
}
</script>

</head>
<body>

<div>
<a id="link" href="http://www.webmasterworld.com/">
<img id="link_img" src="http://www.searchengineworld.com/gfx/logo.png" alt="">
</a>
</div>

</body>
</html>


birdbrain

asas111




msg:3953714
 2:39 pm on Jul 16, 2009 (gmt 0)

Thanks a lot, I will try it and let you know.

Just curious what the code after </script> is for?

<div>
<a id="link" href="http://www.webmasterworld.com/">
<img id="link_img" src="http://www.searchengineworld.com/gfx/logo.png" alt="">
</a>
</div>

Is that the banner that will always show up first when the page is loaded? that is what I am trying to avoid. Beside wanting the banner to change every few seconds while the user is still on the page, I also want to ensure that when the page is loaded a random banner is shown.

?

thanks a lot

birdbrain




msg:3953737
 3:19 pm on Jul 16, 2009 (gmt 0)

Hi there asas111,

here is the script revised to your requirements.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Rotating links</title>

<style type="text/css">
#link_img {
display:block;
border:0;
}
</style>

<script type="text/javascript">

var links=[
'http://www.webmasterworld.com/', [red]/* add as many links as you like! */[/red]
'http://www.w3.org/',
'http://www.mozilla.com/' [red] /*note:- no comma after last item */[/red]
];

var pics= [
'http://www.searchengineworld.com/gfx/logo.png', [red] /* txt length must equal the link length */[/red]
'http://www.w3.org/Icons/w3c_home',
'https://addons.mozilla.org/img/amo2009/app-icons/firefox.png' [red] /* note:- no comma after last item */[/red]
];

var speed=10000; [red]/*this is the time in milliseconds adjust to suit*/[/red]
var c;

function init() {

l=document.createElement('a');
l.setAttribute('id','link')

i=document.createElement('img');
i.setAttribute('id','link_img');

l.appendChild(i);

document.getElementById('banner').appendChild(l);

obj0=document.getElementById('link');
obj1=document.getElementById('link_img');

num=Math.floor(Math.random()*links.length);

obj0.href=links[num];
obj1.src=pics[num];
c=num;
showlink();
}

function showlink() {

obj0.href=links[c];
obj1.src=pics[c];

c++;
if(c==links.length) {
c=0;
}
setTimeout(function(){showlink()},speed);
}

if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}
</script>

</head>
<body>

<div id="banner"></div>

</body>
</html>


birdbrain

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved