Webcomic Banner Rotator

While I was part of a webcomic collective, we had an old problem that needed solving:
How do we share traffic amongst each member's comics?
We built and used a banner exchange that was centrally hosted. It simplified things.

stars separator

Requirements

A webhost that allows you to hotlink files
Several gigabytes of bandwidth (potentially)
Basic knowledge of how to edit HTML or JavaScript (or a willingness to learn)

Considerations

In our implementation, we took into account factors such as, where the member's comic was hosted, their particular CMS, and their ability to insert a script into a page. As some members were hosted on platforms like Tumblr, Smackjeeves, and Comicfury, we were unable to ask them to embed scripts that executed server-side (so PHP was out).

We did not consider using frames.

We also produced "colors" for the rotators, which allowed members to customize it to match their website's branding.
This script does not work on platforms like Tapas or Webtoon, and as such, we did not allow members to host their comics there.

General Disclaimer

I am not responsible for how you use this code, its efficacy, or anything to do with it, should you choose to use it. If you break something on your website (or computer), know that it's not my fault or responsibilty, and I'm not liable for any of that. I cannot and will not offer technical support. (This stuff should not break your computer, though.)
This is made clearer in my Terms of Service.

You are free to modify and use this script as you want. There may be better approaches -- this is just what we developed.

Code

For simplicity's sake, I'm only including one rotator script. Fields you need to change have been highlighted.
This script relies heavily on JavaScript Arrays.

The Rotator (Hosted Centrally)

Quick Key
TEXT - This is an optional parameter and can be changed at your leisure.
TEXT - You have to change or replace this.

var scripts = document.getElementsByTagName('script');

var index = scripts.length - 1;

var myScript = scripts[index];

var imgcol = myScript.src.replace(/^[^\?]+\??/,'');

var headerimg;

if (imgcol=='white'){

	headerimg='<a href="COLLECTIVE_HOMEPAGE_ADDRESS"><img src="ROTATOR_HEADER_IMAGE_COLOR1.PNG" alt="COLLECTIVE_NAME" title="COLLECTIVE_NAME"></a>';

}

else if (imgcol=='black'){

	headerimg='<a href="COLLECTIVE_HOMEPAGE_ADDRESS"><img src="ROTATOR_HEADER_IMAGE_COLOR2.PNG" alt="COLLECTIVE_NAME" title="COLLECTIVE_NAME"></a>';

}

//to add members: Copy a line for memberImg[#], and edit as needed.

//to delete members: remove the member in question, make sure the rest of the numbers are in numerical order.

//Numbers MUST be in order and must increment starting at 0 for this array.

var memberImg = new Array();

	memberImg[0] = '<a href="MEMBER_URL_1"><img src="FULL_URL_TO_IMAGE.PNG" alt="ALT TEXT HERE"></a>';

	memberImg[1] = '<a href="MEMBER_URL_2"><img src="FULL_URL_TO_IMAGE.PNG" alt="ALT TEXT HERE"></a>';

//This does the random picking on each load of the script.

var randomObjNum = Math.floor(Math.random()*memberImg.length);

document.write('<div class="RotatorScript" style="line-height:0; width: 165px; display: inline-block;">',headerimg,'<br>',memberImg[randomObjNum],'</div>');

What Members Used

Version 1 (White header, for dark themes)

<script type="text/javascript" src="COLLECTIVE_HOMEPAGE_ADDRESS/PATH/TO/ROTATOR/comic_rotator.js?white"></script>

Version 2 (Dark header, for light themes)

<script type="text/javascript" src="COLLECTIVE_HOMEPAGE_ADDRESS/PATH/TO/ROTATOR/comic_rotator.js?black"></script>

Example Results

You can change your images up as you want -- For simplicity's sake, make sure your header image and the ad image match in dimensions. Also, to avoid being blocked by adblockers, I advise leaving dimensions OUT of the file and folder names.

If you'd like to see the example file in question, you can view or download it here: Example.js

White	Black