spoken for

I’ve had a few people ask me about how I did the random header, so I thought I’d clue you in. I also use this on Sheila’s site, for her little post icons. It’s really easy, so here goes.

First you, of course, should be able to use PHP on your site. You should also know a little bit about CSS. Those are the two things this technique will use. There are numerous ways this can be accomplished but this is the way I am currently using it on this site.

First, I have the area where I want the images to be randomized. This is my header image. I have a div for that and it has both an ID and a Class. This is what it looks like before I randomize it:

<div id=”random” class=”random”> </div>

I use the ID to define all the basics and styles other than the image to get that out of the way and free the Class up for the random background image.

Next, add in your random PHP snippet that will essentially change the Class with each page load:

<?php echo(rand(1,X)); ?>

So now the whole thing looks like this:

<div id=”random” class=”random<?php echo(rand(1,X)); ?>”> </div>

Just change that “X” to however many images you plan to have be it 5 or 20, it is your maximum value that you want outputted. When you load the page, that random PHP snippet will pick a number between 1 and that number, so you will end up with class=”random2″ or class=”random5″ and so on. Of course, if you want to get technical, you can also change that “1″ to something, so as to randomize between, say, 3 and 7, etc.

Now you need to tell it what to do with those classes. In your CSS, define what each and every one of those classes will do. If you’ve got three images you want to rotate between, you might do something like this:

.random1 {background: url(images/image1.jpg);}
.random2 {background: url(images/image2.jpg);}
.random3 {background: url(images/image3.jpg);}

See? Easy!

That’s just the bare minimum, you could even use the CSS to randomize anything: different colored text, different margins, padding, borders, etc. If you really wanted to waste a lot of time, you could use that PHP snippet in your call for a stylesheet and load a completely different stylesheet each time. Of course, that might make your visitors want to pluck out their eyes, but you get the idea.

As for me, I am currently using 12 random header images on this site (and, yes, every one of them is using a photo that I took, just fyi), which do you like best? ;-)