Random CSS with JavaScript
I was just working on a site that required a random header image. I’ve done random images with JavaScript before, but the script I’ve used writes out an image tag. This site was built using a CSS background-image for the header so I needed something a little different. I came up with the following after a bit of googling around and trial and error. If you have suggestions to improve this, please feel free to share in the comments. 
First, put the following code into a file called random_styles.js:
<!-- Begin
var random=Math.floor(2*Math.random());
random=random+1;
style='<! @import url( css/' + random + '.css )\; -->';
document.write('
<!-- '); document.write(style); document.write(' --> ‘);
// End –>
Where the “random” variable is set, change the number 2 to match the total number of stylesheets you will switch between.
Where the “style” variable is set, adjust if your css path is different from mine.
(You don’t really need to add 1 to random, but I did that so the first number can be equal to the number of stylesheets…)
Then, in the head of your html page, just include the file random_style.js like so (with the src path altered to suit of course):
<script src="js/random_style.js" type="text/javascript"></script>
Note: you must put it after the main stylesheet!
You also need to create one css file for each style. So in my case I had a main stylesheet for the site, which set a default background image in case javascript was turned off. Then, in a file called 1.css I set the same background image again. In another file called 2.css I set the image to be different.
I’m sure this could be improved, so like I said, feel free to share your comments.
UPDATE: Further to Sebastian’s comment below, here’s a stab at how to use this to put a random image tag in your html. This is untested but if it works it would print an image tag for a random 100×100 jpg at whatever point in the html you placed the script tag.
<!-- Begin
var random=Math.floor(2*Math.random());
random=random+1;
document.write('<img src="/my-image-path/');
document.write(random);
document.write('.jpg'" width="100" height="100" alt="a random image" />');
// End -->If anyone gets a chance to test it, let me know how it goes.
Posted: May 2nd, 2008 under Web Tips.
Comments: 8
Comments
Hi! Thanks a lot for your code. I’m just experimenting with random background images. I wanted to use load a random CSS to output a random BG image, but I also want that image stretched and CSS doesn’t support that :S
There are loads of randomising JS scripts out there but yours is especially neat as it uses maths and naming convention as opposed to loading a whole array of file names.
I was wondering whether you could suggest a way to adopt this script to load a random img into the html? I thought I could use adopt your document.write and change the .css to .jpg to inject the code directly into the html, but unsuprisingly it doesn’t work…
Any ideas? Thanks.
here’s what I was was playing with, probably complete trash:
Untitled Document
var random=Math.floor(3*Math.random());
random=random+1;
style=’‘;
document.body.write(”);
test
Comment from Sebastian Thomas at 8:35 am, June 19, 2009
Ok that didn’t post correctly:
Untitled Document
var random=Math.floor(3*Math.random());
random=random+1;
style=’‘;
document.body.write(”);
test
Comment from Sebastian Thomas at 8:36 am, June 19, 2009
Still not working. Sorry.
Comment from Sebastian Thomas at 8:36 am, June 19, 2009
Hi Sebastian
I’m glad you found it useful.
Sorry script stuff doesn’t come through well in the comments. I’ll comment a bit here and then update the post.
I’m sure you could adapt the script for that. You’d need to:
1. move the location of where you include the script tag. In my example I had it in the Head, the usual place of a css file. You’d want it wherever you want the image to show up.
2. change the value you’re setting for the variable “style”. I’d probably change the name of the variable to reflect that we’re not setting a style. So you might have the variable “image”, and instead of setting it to be css stuff, you’d set it to the image file name perhaps. I changed my mind when I wrote it – I don’t think you need to set a variable there unless you want to rewrite it later.
3. adjust the document write statements accordingly, so that all the document.writes put together make the complete image tag.
Hope that helps.
Comment from Tzaddi at 4:32 pm, June 21, 2009
Hi Tzaddi!
Thinks very much for the script!!
I was wondering… it it at all possible for the Script to load a random CSS file and also a flash file that ties in with that CSS?
If say if the Java pick CSS style 1, Flash file 1 is picked also, CSS3 picked – Flash file 3 picked also.
Thanks for any help you can give!!
Chris.
Comment from Chris Rouxel at 2:55 am, July 15, 2009
Hey, that was interesting,
I don’t think this concept is widely used but the way you implemented it was intersting giving the same name to all CSS file with a numeric number at the end wasa so wise
Anyway, thanks for the post
Comment from software development uk at 12:53 am, August 18, 2009
Thanks for this script we managed to get it working last night with a couple of alterations.
Comment from Canvas Prints at 5:34 am, March 2, 2010
Yes so did I, thanks
Comment from blog at 5:35 am, March 2, 2010
Next post: In praise of days off »
Write a comment