Random web banners with iframe rotator

Another widget that functions like other random banner codes. But this time its more controllable with the use of HTML. This tutorial will start from HTML then javascript, and lastly the iframe.

To start, create a Microsoft Office Live account first. We'll use this service to host our HTML files so that we can use them for later, plus it's free!

After creating an account, stay logged in.


HTML
Create a new text document (.txt) first. Right-click on your desktop then go to New > Text Document. Open the text document and copy and paste this code.

<div class="iframe-ads-rotate"><a href="URL-HERE" target="_blank" title="TITLE_HERE" rel="nofollow"><img alt="ALT_TEXT" src="http://4.bp.blogspot.com/-IcIZQSW3TTQ/TY7TxeACMCI/AAAAAAAACOY/B4tKu9KRWCw/HTML-random-banner1.png" style="border:0;margin:0;padding:0;width:468px;height:60px;"/></a></div>

Saving the file
File name: iframe-rotator-1.html (include .html as file extension)
Save as type: All Files

Say, if want to randomly display 4 different images, you'll have to create 4 separate .html files, then upload all on your Office Live account.


JavaScript
We will use the same steps here. Copy paste the code on your text document and save as html. Get the link of the uploaded HTML files and replace the URLs in bold with yours.

<script language="JavaScript1.2">
//Random iframe content- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, and Terms Of use, visit http://dynamicdrive.com
//This credit MUST stay intact for use

var ie=document.all&&navigator.userAgent.indexOf("Opera")==-1
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

//Specify IFRAME display attributes
var iframeprops='width=130 height=130 marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"'

//Specify random URLs to display inside iframe
var randomcontent=new Array()
randomcontent[0]="http://jacobmt.web.officelive.com/Documents/iframe-rotator-1.html"
randomcontent[1]="http://jacobmt.web.officelive.com/Documents/iframe-rotator-2.html"
randomcontent[2]="http://jacobmt.web.officelive.com/Documents/iframe-rotator-3.html"
randomcontent[3]="http://jacobmt.web.officelive.com/Documents/iframe-rotator-4.html"

//No need to edit after here
if (ie||dom)
document.write('<iframe id="dynstuff" src="" '+iframeprops+'></iframe>')

function random_iframe(){
if (ie||dom){
var iframeobj=document.getElementById? document.getElementById("dynstuff") : document.all.dynstuff
iframeobj.src=randomcontent[Math.floor(Math.random()*randomcontent.length)]
}
}

window.onload=random_iframe
</script>

By now, you already have 5 HTML files - 4 for the images and 1 for the script that contains the 4 images.


Iframe
Install this code anywhere on your site then replace the url in bold with the link of html that contains the javascript.

<iframe style="width:468px;height:60px;padding:0;margin:0;border:0;" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no" src="http://jacobmt.web.officelive.com/Documents/iframe-rotate-wrk.html"></iframe>

Live Demo
You will need to refresh this page to see the how the image will change. Any 1 of 4 images will randomly display.



And done! Don't forget to save. For more questions and or comments just leave them below. Enjoy!