XF 1.5 Help with insertion of Javascript rotating ad banner above forum list on the forum index.


Hello all,

In the web design course I have been taking for the past few months, I made a Javascript rotating ad banner intended to be used for my website. I am now on the final step of the project, adding it to my forums, but I am having a bit of trouble figuring out how to add it.

My forums: http://themodem.net/index.php

What I am trying to accomplish is shown with the image showcased below.

The current state of the website is shown in a second image below.

I have three main questions about how I would go about doing this:
  1. What file would I put the javascript in?
  2. What file would I call/embed the javascript in?
  3. Do you have any other tips for completing this?
The code:
<!-- Beginning of JavaScript -

if (document.images) {
ads = new Array(7);
ads[0] = "assets/rotation/0.jpg";
ads[1] = "assets/rotation/1.jpg";
ads[2] = "assets/rotation/2.jpg";
ads[3] = "assets/rotation/3.jpg";
ads[4] = "assets/rotation/4.jpg";
ads[5] = "assets/rotation/5.jpg";
ads[6] = "assets/rotation/6.jpg";

newplace = new Array(7);
newplace[0] = "https://www.reddit.com/r/themodem/"
newplace[1] = "http://steamcommunity.com/groups/themodem"
newplace[2] = "https://www.youtube.com/channel/UCI_dHlm_GVYmC6__ogyGWPQ/"
newplace[3] = "https://aboutme.google.com/u/0/b/110635313912281562158/"
newplace[4] = "https://www.gametracker.com/clan/themodem.net/"
newplace[5] = "http://twitter.com/themodemnet"
newplace[6] = "steam://connect/"

var timer = null
var    counter = 0

function banner() {
timer=setTimeout("banner()", 4000);
if (counter >= 7)
counter = 0;
document.bannerad.src = ads[counter];

function gothere() {
counter2 = counter;
window.location.href = newplace[counter2];

// - End of JavaScript - -->

The HTML to call the Javascript:
<BODY onload=banner()>
<a href="javascript:gothere()"><IMG SRC="1.jpg" WIDTH="468" HEIGHT="60" BORDER="0" NAME="bannerad"></a>