I was recently asked by a friend for information about how to have a random background image. Well not completely random, the background image should be from a set of images. My idea: add a class, randomly from a set, to the body (or another element) with Javascript. I could just change the style attribute for the background image; but, what if the text is white and one of the images happens to be very light in color? So now I have the issue of ensure that there is adequate contrast in color between the background and text. Plus there could always be other wishes such as being able to change the border color. So, for me, changing the class gives far greater flexibility for a script. Now I show you my very simple example of the code.
How to use:
- Download JQuery
- Download AddAClassNameAtRandomToAnElement.js
- Include jquery.js and AddAClassNameAtRandomToAnElement.js in your html:
<script src="jquery.js"></script>
<script src="AddAClassNameAtRandomToAnElement.js"> - Create the set of classes to have randomly selected and the query of the element to add the class to:
<script>
var setOfRandomClassNames = new Array("aa", "bb", "cc"); // three classes with the names: aa, bb, and cc
//var queryForElementsToAddRandomClassTo = "body"; // adds the class name to the body
var queryForElementsToAddRandomClassTo = "#cow"; // adds the class name to an element with the id of cow
… - Add the call to add the class:
…
$(document).ready(function(){
$(queryForElementsToAddRandomClassTo).addRandomClass(setOfRandomClassNames);}
});
…</script>
Update
I changed it from an independent function to a method (JQuery Plugin) of the $ as John Resig suggested. Keep up the good work on JQuery John!
I’ll take a stab at your function:
$.fn.addRandomClass = function (setOfClassNames){
return this.addClass(RandomValueFromSet(setOfClassNames));
};
and now you can do:
$(”div”).addRandomClass([ “aa”, “bb”, “cc” ]);
the nice “jQuery” way
Keep up the good work!
Very cool. I have to admit this is my first script with JQuery. I have only recently decided (and had the time) to dive more in depth with Javascript. My first look at JQuery did not impress me much; but after doing stuff by hand, then with Prototype, and then with YUI, JQuery made a big, no huge, no awestruck second impression.
For anyone who wants to know (such as I did) what John’s script is about, it is a JQuery plugin.
Haven’t done a complete test yet, but this could be a possibility:
CSS:
.image1 { background: url(../images/image-1.jpg) no-repeat; }
.image2 { background: url(../images/image-2.jpg) no-repeat; }
.image3 { background: url(../images/image-3.jpg) no-repeat; }
JS:
var imageClasses = new Array(”image1″, “image2″, “image3″);
$(document).ready(function(){
$(”#bannerImage”).addClass(imageClasses[Math.round(Math.random())*2]);
});
HTML:
Hmm, chopped off the HTML code. Anyways, make an empty div with an ID of bannerImage to finish off the example.
Thank You
Your site is perfect!
Hello, very nice site, keep up good job!
Admin good, very good.
Hello, very nice site, keep up good job!
Admin good, very good.