How to make a randomly changing header

Happy Wednesday everybody! Today I've decided to do another tutorial cus this has been requested numerous amounts of times.

So you all know how we have different headers every time you refresh the page on here. We don't have a different header for each page... but we DO have a randomly generating header, so you could either see one header or the other. Let's get started!

How to make a randomly changing header

1. Making our headers

The first step is to make our header images. Stick with the max at four - otherwise it'll just be a pain for you.

I suggest making all your images the same size, but not necessarily the same when it comes to design! Be as creative as you want. When you're done, upload your image to an image hosting site like Tinypic.

2. The Code

Here's the simple yet plain code in order to make your headers:

<script type="text/javascript">
var banner= new Array()
banner[1]="HEADER1"
banner[2]="HEADER2"
banner[3]="HEADER3"
banner[4]="HEADER4"
var random=Math.floor(4*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script>

3. The Coding...

Now comes the pain in the butt - the coding. Here's the color coded version of the code so it'll be easier for me to explain this to you.

<script type="text/javascript">
var banner= new Array()
banner[1]="HEADER1"
banner[2]="HEADER2"
banner[3]="HEADER3"
banner[4]="HEADER4"
var random=Math.floor(4*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat top left;');
document.write(" }");
document.write("</style>");
</script> 

1, 2, 3, 4: The banner (or should I say, the header)'s "id". You DON'T need to change this at all... I'm just pointing this out ;P
HEADER(1, 2, 3, 4): Replace these to the URLS to your headers.
4: Now this is important. The 4 stands for how many headers are there so that the code can randomize your headers. Basically, if you leave the code as it is, with four banners, don't change the four. If you decide to add or remove some or one of the headers, change the 4 to how many headers you have.

5. Add the code

Once you're done editing your code, go to Design>Page Elements and Add a Gadget. Click HTML/Javascript and paste your code! Now you can just place this widget anywhere.

OH YEAH!

So, you probably would've seen that both your existing header AND your random headers will be showing.

In order to solve this, you'll need to change your header to a transparent header so that you can see your random headers.

Here's the URL to a transparent header image. Oh and btw, if you add it, be sure to hit the little "shrink to fit" button.

http://i868.photobucket.com/albums/ab244/aalexa555/trans.png

That's it! I hope this tutorial makes as much sense as I could make it. If it doesn't, feel free to ask questions...

Until next time,