JavaScript Background Image Change on page load on Impresspages

Question

I would like implement the javascript background image changer on page load on Impresspages 4.2.3 as described on http://www.9lessons.info/2011/03/background-image-change-on-refresh-with.html . It works on my localhost but not working when moved to my hosting server.

I put this code below on "_header.php" between the tag:

<script type="text/javascript"> 
var totalCount = 4;
function ChangeIt() 
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'http://localhost/halmaheradivecruise.com/theme/air/assets/img/'+num+'.jpg';
document.body.style.backgroundRepeat = "repeat";// Background repeat
}
</script>

and this code below in tag:

<script type="text/javascript"> 
ChangeIt();
</script>

Answer 1

Before hacking the code, check whether the image you're trying to load actually exists.

Taking your code you get something like this:

http://www.halmaheradivecruise.com/theme/air/assets/img/2.jpg

If you follow this link, you'll get "404 not found" error. So the problem is with link and not script.

The real problem lies in case sensitivity by Unix based systems. ImpressPages doesn't have folder "theme". All themes are placed in "Theme". And themes most of the time are named in capital letter, too. Therefore, your images are here:

http://www.halmaheradivecruise.com/Theme/BantikAir/assets/img/3.jpg

On a localhost it worked because Windows don't see any difference between lowercase and uppercase letters. While Unix systems treat them as different paths.

Answer 2

Other than the localhost path, there's nothing visibly incorrect with your code

• Use the developer tools inspector to make sure (usualy cmd + alt + i on mac or f12 on windows) and select the networks tab to make sure the image is not getting a 404.
• also in developer tools use the javascript console to ensure there are no javascript errors
• If you are still having trouble, try making sure your call to ChangeIt() is made after all the scripts have loaded by manually typing it into the javascript console of your browser's develop tools

Also, instead of:

var num = Math.ceil( Math.random() * totalCount );

Try

var num = Math.floor(Math.random() * totalCount) + 1

More info on why that's a better method (uniform distribution etc.) here: Generate random number between two numbers in JavaScript