Here is the code we use on Hearts4Horses.Com. Note that it uses a table format to place the iFrames DIV's where wanted. (you could actually use this anywhere you want to have the rotating ads appear) For the iFrames mod, please go to: https://vborg.vbsupport.ru/showthread.php?t=209005 and create your iFrames code first. You'll note that in our Side Column, we have two different sets of ads rotating, so in the iFrames, we created two differents "ADVERTS" files: "adverts" and "CAadverts". We have found that using the tables format, we can easily add or change the SC advertisers section to coordinate with other promotions or events. Below, I'll paste our "Adverts" code which is really the key to us being able to use this Side Column Mod easily.
First, here is the code that is used in the Side Column settings page.
Code:
<table border="0">
<tr>
<td>
<!--<UKBL Iframe advertiser start>-------------------------------------------->
<DIV ALIGN=center>
<!--For full source code and more DHTML scripts, visit http://www.dynamicdrive.com-->
<!--This credit MUST stay intact for use-->
<iframe id="tickermain" src="http://hearts4horses.net/adverts.htm" width=167 height=465 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no></iframe>
</DIV>
<!--<UKBL Iframe advertiser End>---------------------------------------------->
</td>
</tr>
<tr><td> </td></tr>
<tr>
<td>
<!--<UKBL Iframe advertiser start>---------------------------------------->
<DIV ALIGN=center>
<!--For full source code and more DHTML scripts, visit http://www.dynamicdrive.com-->
<!--This credit MUST stay intact for use-->
<center><iframe id="tickermain" src="http://hearts4horses.net/CAadverts.htm" width=160 height=600 marginwidth=0 marginheight=0 hspace=0 vspace=1 frameborder=0 scrolling=no></iframe></center>
</DIV>
<!--<UKBL Iframe advertiser End>--------------------------------------------->
</td>
</tr>
</table>
Here is our "Adverts" code:
Code:
<script language="JavaScript1.2">
//IFRAME Advertiser by UKBL2009
//Rotation code by Dynamic Drive, please leave intact if you use.
//configure delay between changing adverts (5000=5 seconds)
var delay=9000
var ie4=document.all
var curindex=0
var totalcontent=0
function get_total(){
if (ie4){
while (eval("document.all.content"+totalcontent))
totalcontent++
}
else{
while (document.getElementById("content"+totalcontent))
totalcontent++
}
}
function contract_all(){
for (y=0;y<totalcontent;y++){
if (ie4)
eval("document.all.content"+y).style.display="none"
else
document.getElementById("content"+y).style.display="none"
}
}
function expand_one(which){
contract_all()
if (ie4)
eval("document.all.content"+which).style.display=""
else
document.getElementById("content"+which).style.display=""
}
function rotate_content(){
get_total()
contract_all()
expand_one(curindex)
curindex=(curindex<totalcontent-1)? curindex+1: 0
setTimeout("rotate_content()",delay)
}
window.onload=rotate_content
</script>
<BODY bgColor=#FFFFFF>
<!--ADD YOUR ADVERTISEMENT CONTENT BELOW, by wrapping each one inside a <DIV> as shown below.-->
<!--For each DIV, increment its ID attribute for each additional content (ie: "content1", "content2" etc)-->
<div id="content0" style="display:''">
<!-- ADD clickable banner code ADVERT #1 HERE--------------------->
<p>
<center><a href="http://hearts4horses.net/onlinestore" target="_blank"><img name="Applications Tower" Align=Top src="http://hearts4horses.net/image/Vetericyn/applicationstowerRFD.JPG" alt="Vetericyn: Clean, Treat, Heal" border="0" width="167" height="465"></a></center>
</p>
<!-- END ADVERT #1----------------->
</div>
<div id="content1" style="display:none">
<!-- ADD clickable banner code ADVERT #2 HERE--------------------->
<p>
<center><a href="http://hearts4horses.net/onlinestore" target="_blank"><img name="Case Study Tower" Align=Top src="http://hearts4horses.net/image/Vetericyn/casestudytowerRFD.JPG" alt="Vetericyn: Clean, Treat, Heal" border="0" width="167" height="465"></a></center>
</p>
<!-- END ADVERT #2----------------->
</div>
<div id="content2" style="display:none">
<!-- ADD clickable banner code ADVERT #3 HERE--------------------->
<p>
<center><a href="http://hearts4horses.net/onlinestore" target="_blank"><img name="Features Tower" Align=Top src="http://hearts4horses.net/image/Vetericyn/featurestowerRFD.JPG" alt="Vetericyn: Clean, Treat, Heal" border="0" width="167" height="465"></a></center>
</p>
<!-- END ADVERT #3----------------->
</div>
...and our CAadverts code:
Code:
<script language="JavaScript1.2">
//IFRAME Advertiser by UKBL2009
//Rotation code by Dynamic Drive, please leave intact if you use.
//configure delay between changing adverts (5000=5 seconds)
var delay=4000
var ie4=document.all
var curindex=0
var totalcontent=0
function get_total(){
if (ie4){
while (eval("document.all.content"+totalcontent))
totalcontent++
}
else{
while (document.getElementById("content"+totalcontent))
totalcontent++
}
}
function contract_all(){
for (y=0;y<totalcontent;y++){
if (ie4)
eval("document.all.content"+y).style.display="none"
else
document.getElementById("content"+y).style.display="none"
}
}
function expand_one(which){
contract_all()
if (ie4)
eval("document.all.content"+which).style.display=""
else
document.getElementById("content"+which).style.display=""
}
function rotate_content(){
get_total()
contract_all()
expand_one(curindex)
curindex=(curindex<totalcontent-1)? curindex+1: 0
setTimeout("rotate_content()",delay)
}
window.onload=rotate_content
</script>
<BODY bgColor=#FFFFFF>
<!--ADD YOUR ADVERTISEMENT CONTENT BELOW, by wrapping each one inside a <DIV> as shown below.-->
<!--For each DIV, increment its ID attribute for each additional content (ie: "content1", "content2" etc)-->
<div id="content0" style="display:''">
<!-- ADD clickable banner code ADVERT #1 HERE--------------------->
<p>
<center><a href="http://www.downunderhorsemanship.com/" target="_blank"><img name="CA1" Align=Top src="http://hearts4horses.net/image/downunder_horsemanship/CA1.jpg" alt="Clinton Anderson's Downunder Horsemanship" border="0" width="160" height="600"></a></center>
</p>
<!-- END ADVERT #1----------------->
</div>
<div id="content1" style="display:none">
<!-- ADD clickable banner code ADVERT #2 HERE--------------------->
<p>
<center><a href="http://www.downunderhorsemanship.com/" target="_blank"><img name="CA2" Align=Top src="http://hearts4horses.net/image/downunder_horsemanship/CA2.jpg" alt="Clinton Anderson's Downunder Horsemanship" border="0" width="160" height="600"></a></center>
</p>
<!-- END ADVERT #2----------------->
</div>
<div id="content2" style="display:none">
<!-- ADD clickable banner code ADVERT #3 HERE--------------------->
<p>
<center><a href="http://www.downunderhorsemanship.com/" target="_blank"><img name="CA3" Align=Top src="http://hearts4horses.net/image/downunder_horsemanship/CA3.jpg" alt="Clinton Anderson's Downunder Horsemanship" border="0" width="160" height="600"></a></center>
</p>
<!-- END ADVERT #3----------------->
</div>
<div id="content3" style="display:none">
<!-- ADD clickable banner code ADVERT #4 HERE--------------------->
<p>
<center><a href="http://www.downunderhorsemanship.com/" target="_blank"><img name="CA4" Align=Top src="http://hearts4horses.net/image/downunder_horsemanship/CA4.jpg" alt="Clinton Anderson's Downunder Horsemanship" border="0" width="160" height="600"></a></center>
</p>
<!-- END ADVERT #4----------------->
</div>
<div id="content4" style="display:none">
<!-- ADD clickable banner code ADVERT #5 HERE--------------------->
<p>
<center><a href="http://www.downunderhorsemanship.com/events/events_wahl.cfm/" target="_blank"><img name="Tour1" Align=Top src="http://hearts4horses.net/image/downunder_horsemanship/Tour1.jpg" alt="Clinton Anderson's Wahl Walkabout Tour" border="0" width="160" height="600"></a></center>
</p>
<!-- END ADVERT #5----------------->
</div>
So you see, piece of cake...first step is to get your iFrames working, then it is easy to use them in the Side Column. Let me know if you have any questions.
More Information