PDA

View Full Version : Rotating Banner Ad



CBaZ
Jun 15th, 2008, 10:09 PM
I am using this rotating banner ad script, but was wondering if its possible to add a timer like every 30 seconds it changes to the next banner without having to refreshing the page.

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var how_many_ads = 3;
var now = new Date()
var sec = now.getSeconds()
var ad = sec % how_many_ads;
ad +=1;
if (ad==1) {
txt="TEXTO QUE PONDRAS";
url="URL DEL WEB";
alt="NOMBRE DEL WEB";
banner="URL DEL BANNER";
width="MEDIDA";
height="MEDIDA";
}
if (ad==2) {
txt="SOBRE LA WEB";
url="URL DE LA WEB";
alt="NOMBRE DE LA WEB"A;
banner="http://etc, etc";
width="MEDIDAS";
height="MEDIDAS";
}
if (ad==3) {
txt="SOBRE LA WEB";
url="URL DE LA WEB";
alt="NOMBRE DE LA WEB ";
banner="http://URL DEL BANNER";
width="MEDIDAS";
height="MEDIDAS";
}
document.write('<center>');
document.write('<a href=\"' + url + '\" target=\"_blank\">');
document.write('<img src=\"' + banner + '\" width=')
document.write(width + ' height=' + height + ' ');
document.write('alt=\"' + alt + '\" border=0><br>');
document.write('<small>' + txt + '</small></a>');
document.write('</center>');
// End -->
</SCRIPT>

Mr J
Jun 15th, 2008, 11:35 PM
Try something on these lines


<script type="text/javascript">

adds=[ // txt, url,alt,image

["TEXTO QUE PONDRAS","URL DEL WEB","NOMBRE DEL WEB","URL DEL BANNER"],

["SOBRE LA WEB","URL DE LA WEB","NOMBRE DE LA WEB"A","http://etc, etc"],

["SOBRE LA WEB","URL DE LA WEB","NOMBRE DE LA WEB ","http://URL DEL BANNER"]

]

count=0
onload=function test(){

oLink=document.getElementById("mylink")
oImg=document.getElementById("myimg")
oTxt=document.getElementById("mytxt")

oTxt.innerHTML=adds[count][0]
oLink.href=adds[count][1]
oImg.alt=adds[count][2]
oImg.src=adds[count][3]

count++
if(count==adds.length){
count=0
}

setTimeout("test()",30000)
}

</script>


<a id="mylink" href="#null" target="_blank"><img id="myimg" src="" alt="" style="width:300px;height:150px"><div id="mytxt"></div></a>

CBaZ
Jun 16th, 2008, 04:24 AM
that works for 3 ads once I add more I have 22 right now it says #null and no images are displayed. is there anything I must add?

CBaZ
Jun 16th, 2008, 08:21 AM
nevermind I found my own bugs ;) great script only thing i wish it could do is load them i random order :)

then this would be the ultimate script

Philip M
Jun 16th, 2008, 08:29 AM
count = Math.floor(Math.random()*adds.length);

CBaZ
Jun 16th, 2008, 06:53 PM
thanks for this great script. its working great.

CBaZ
Jun 16th, 2008, 09:08 PM
if i wanted to have this script work at 2 different places is that possible. I have 468X60 banners in another place that I would like to rotate as well but if i use the same script it only works with one coding at a time. :(

Philip M
Jun 16th, 2008, 11:24 PM
You cannot have two (or more) scripts with the same variable or function names, as the second simply overwrites the first.

You need to rename all the variables and functions in the second script to adds2, count2, test2, oLink2, oImg2 and so on.

CBaZ
Jun 17th, 2008, 04:02 AM
It doesn't wanna do it for me I think I am missing something :)
<code>

<script type="text/javascript">

adds2=[ // txt, url,alt,image

["txt","url","alt","image"],


["txt","url","alt","image"],

["txt","url","alt","image"],

["txt","url","alt","image"]

]

count2=0
onload=function test2(){

oLink2=document.getElementById("mylink2")
oImg2=document.getElementById("myimg2")
oTxt2=document.getElementById("mytxt2")

oTxt2.innerHTML2=adds2[count2][0]
oLink2.href2=adds2[count2][1]
oImg2.alt2=adds2[count2][2]
oImg2.src2=adds2[count2][3]

count2++
if(count2==adds2.length){
count2=0
}

setTimeout("test2()",30000)
}

</script>
<center><font face=Verdana size=1 color="#f6eed0"><b><br>&nbsp;&nbsp;
<a id="mylink2" href="#null" target="_blank"><img id="myimg2" src="" alt="" style="width:468px;height:60px" border="0"></a><div id="mytxt2"></center></div></font></b>

</code>

rangana
Jun 17th, 2008, 04:35 AM
You had this typo:


oTxt2.innerHTML2=adds2[count2][0]
oLink2.href2=adds2[count2][1]
oImg2.alt2=adds2[count2][2]
oImg2.src2=adds2[count2][3]


This part is also erroneous:


onload=function test2(){


You might mean like this instead:


function test()
{...}




window.onload=test2;


To fully apply those notes, this ammendments might help:


<script type="text/javascript">

adds2=[ // txt, url,alt,image
["txt","url","alt","image"],
["txt","url","alt","image"],
["txt","url","alt","image"],
["txt","url","alt","image"]]
count2=0
function test2(){

oLink2=document.getElementById("mylink2")
oImg2=document.getElementById("myimg2")
oTxt2=document.getElementById("mytxt2")

oTxt2.innerHTML=adds2[count2][0]
oLink2.href=adds2[count2][1]
oImg2.alt=adds2[count2][2]
oImg2.src=adds2[count2][3]

count2++
if(count2==adds2.length){
count2=0
}
setTimeout("test2()",30000)
}
window.onload=test2;

</script>


Sidenote, center and font are deprecated elements (http://www.codehelp.co.uk/html/deprecated.html).

Hope it helps.

CBaZ
Jun 17th, 2008, 07:12 AM
i am still just getting no image, and php#null :confused:

not sure as to why. maybe this needs a fix too.

<a id="mylink2" href="#null" target="_blank"><img id="myimg2" src="" alt="" style="width:468px;height:60px" border="0"><div id="mytxt2"></div></a>

rangana
Jun 17th, 2008, 08:02 AM
First, you need to change the highlighted with the image you want:


adds2=[ // txt, url,alt,image
["txt","url","alt","image"],
["txt","url","alt","image"],
["txt","url","alt","image"],
["txt","url","alt","image"]]


You don't have an image source in your markups, but that would'nt be a big deal if you don't wish to have a default image.


<img id="myimg2" src="" alt="" style="width:468px;height:60px" border="0">


Hope it helps.

CBaZ
Jun 17th, 2008, 08:12 AM
yea I know what you mean have that and still get the results of #phpnull and of course no image. well it has a link opens a new window with my site in it.
<code>
<script type="text/javascript">

adds2=[ // txt, url,alt,image

["Please Visit Our Sponsor!","http://click.linksynergy.com/fs-bin/click?id=4Rwcmxpy*cA&offerid=127265.10000425&subid=0&type=4","Gaiam.com","http://ad.linksynergy.com/fs-bin/show?id=4Rwcmxpy*cA&bids=127265.10000425&subid=0&type=4&gridnum=-1"],

["Please Visit Our Sponsor!","http://click.linksynergy.com/fs-bin/click?id=4Rwcmxpy*cA&offerid=128069.10000499&type=4&subid=0","Limoges Jewelry","http://216.130.96.82/Affiliates-images/freeshipSummer_468x60.gif"],

["Please Visit Our Sponsor!","http://www.riverbelle.com/reports/index.asp?s=aff64428","Riverbelle Online Casino","/banners/rbc_468x060_576.gif"]



]

count2=0
function test2(){

oLink2=document.getElementById("mylink2")
oImg2=document.getElementById("myimg2")
oTxt2=document.getElementById("mytxt2")

oTxt2.innerHTML=adds2[count2][0]
oLink2.href=adds2[count2][1]
oImg2.alt=adds2[count2][2]
oImg2.src=adds2[count2][3]

count2++
if(count2==adds2.length){
count2=0
}
setTimeout("test2()",30000)
}
window.onload=test2;

</script>


<a id="mylink2" href="#null" target="_blank"><img id="myimg2" src="" alt="" style="width:468px;height:60px" border="0"><div id="mytxt2"></div></a>
<b><font face=Verdana size=1 color="#f6eed0">&nbsp;&nbsp; Please Visit Our Sponsor!</font></b>
</code>

rangana
Jun 17th, 2008, 08:54 AM
It's working (for me), tested on both FF and IE. Not certain what else to suggest though :p

CBaZ
Jun 17th, 2008, 09:08 AM
got it to work now... but when i add this line
<code>
count2 = Math.floor(Math.random()*adds2.length);
</code>
to randomize the banners i see the action it does i see 4 different images fly by then it stops. so its working but i would like to not see those rotating banners ;) any suggestions you guys have been abig help ;)

Philip M
Jun 17th, 2008, 09:37 AM
Replace this:-

count2++
if(count2==adds2.length){
count2=0
}

by this:-

count2 = Math.floor(Math.random()*adds2.length);

Likewise change:-

count2=0
function test2(){

to:-

count2 = Math.floor(Math.random()*adds2.length);
function test2(){


You can prevent the same random banner repeating thus:-

var cx2 = 0;
count2 = 0;
while (cx2 == count2) {
count2 = Math.floor(Math.random()*adds2.length);
}
cx2 = count2;

Mr J
Jun 17th, 2008, 09:50 PM
There's probably better way of coding this but the following will show 2 instances of images swapping.

Have a play with it and see what you think




<HTML>
<HEAD>
<TITLE></TITLE>

<script type="text/javascript">
<!--

var slider0=new slider('mytxt0','mylink0','myimg0',30)
slider0Images=[ // txt, url,alt,image
["Text 1","pic01.jpg","Alt Text 1","pic01.jpg"],
["Text 2","pic02.jpg","Alt Text 2","pic02.jpg"],
["Text 3","pic03.jpg","Alt Text 3","pic03.jpg"],
["Text 4","pic04.jpg","Alt Text 4","pic04.jpg"]
]

var slider1=new slider('mytxt1','mylink1','myimg1',30)
slider1Images=[ // txt, url,alt,image
["Text 5","pic05.jpg","Alt Text 5","pic05.jpg"],
["Text 6","pic06.jpg","Alt Text 6","pic06.jpg"],
["Text 7","pic07.jpg","Alt Text 7","pic07.jpg"],
["Text 8","pic08.jpg","Alt Text 8","pic08.jpg"]
]

function slider(txtid,lnkid,imgid,speed){
var count=0
var running=0
var timer=null

this.nextSlide=function(n){
running=1

document.getElementById(txtid).innerHTML=window[n+"Images"][count][0]
document.getElementById(lnkid).href=window[n+"Images"][count][1]
document.getElementById(imgid).alt=window[n+"Images"][count][2]
document.getElementById(imgid).src=window[n+"Images"][count][3]

count = Math.floor(Math.random()*window[n+"Images"].length)

timer = setTimeout(n+".nextSlide('"+n+"')",speed*1000)
}

}

function initMbanners(){

c=0
while(document.getElementById("myimg"+c)){
window["slider"+c].nextSlide('slider'+c)
c++
}

}
//-->
</script>

</HEAD>
<BODY onload="initMbanners()">

<a id="mylink0" href="#null" target="_blank"><img id="myimg0" src="" alt="" style="width:468px;height:60px"><div id="mytxt0"></div></a>

<BR><BR><BR><BR>

<a id="mylink1" href="#null" target="_blank"><img id="myimg1" src="" alt="" style="width:300px;height:150px"><div id="mytxt1"></div></a>

</BODY>
</HTML>