randomly change div background image on page load

Question

Hi

I have a DIV background which I want to change randomly on page load from a selection of 3 PNGs.

I searched around and found this code:

$(document).ready(function() {
  var randomImages = ['img-restaurante-1','img-restaurante-2','img-restaurante-3'];
  var rndNum = Math.floor(Math.random() * randomImages.length);
  $("div.lacarta").css({ background: "url(/images/" + randomImages[rndNum] + ".png) no-repeat" });
});

But for some reason it’s not working, any ideas?

Answer 1

Open firebug and see if the browser tries to load the images. Does it? Are they 404s?

Answer 2

not sure how to do that I´m affraid. I do have firebug and work on mac. The page in question is= http://www.mesondedeus.com/new/lacarta.htm, and the div in question is #lacarta

Answer 3

The problem is that you are searching for a div with the class lacarte in your code, but you need to search for a div with the id lacarte, like this: $('#lacarte') instead of $('div.lacarte')

(Note how jQuery uses CSS selectors)

Edit in response to your comment
You next problem is that the images do not exist, if you change te selector as i said, the code runs, but the images do not exist in http://www.mesondedeus.com/images/. Try it yourself, try loading http://www.mesondedeus.com/images/img-restaurante-3.jpg (as the script will try) and note how it doesn't load. You should make sure you have your images in the right directory.

Answer 4

var rndNum = Math.floor(Math.random() * randomImages.length);

This will never give you the last image in the list, as far as I can tell.

Math.random() gives you a number between 0 and 1 (non-inclusive). And to get 2 [index of the last image] you should get floor(1*2)=2

Regarding the images not loading - just use #lacarta, instead of .lacarta (ID vs classname)

Answer 5

Try making these changes:

$(document).ready(function() {
  var randomImages = ['img-restaurante-1','img-restaurante-2','img-restaurante-3'];
  var rndNum = Math.floor(Math.random() * randomImages.length);
  $("div#lacarta").css({ background: "url(../images/" + randomImages[rndNum] + ".png) no-repeat" });
});

I changed the div.lacarta to div#lacarta and I changed your background url from "url(/images/" to "url(../images/"

Answer 6

finally got it to work with this code:

$(document).ready(function() { var randomImages = ['img-restaurante-1','img-restaurante-2','img-restaurante-3']; var rndNum = Math.floor(Math.random() * randomImages.length); $("div#lacarta").css({ background: "url(http://www.mesondedeus.com/new/images/" + randomImages[rndNum] + ".jpg) no-repeat" }); });

thanks for all your help