Comments on: Random Header Image With Javascript http://www.elanman.co.uk/2008/09/random-header-image-with-javascript/ ElanMan's Code Snippets Wed, 18 Jan 2012 12:55:26 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: andrytoshhttp://www.elanman.co.uk/2008/09/random-header-image-with-javascript/comment-page-1/#comment-350 andrytosh Wed, 19 Oct 2011 20:41:28 +0000 http://www.elanman.co.uk/?p=142#comment-350 excelent... excelent…

]]> By: Marshttp://www.elanman.co.uk/2008/09/random-header-image-with-javascript/comment-page-1/#comment-153 Mars Sat, 14 Nov 2009 10:07:16 +0000 http://www.elanman.co.uk/?p=142#comment-153 Hi. Anyone know how to change the site header when switching styles. I'm using a style switcher from <a href="http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm" rel="nofollow">dynamic drive</a>. Hi. Anyone know how to change the site header when switching styles. I’m using a style switcher from dynamic drive.

]]> By: thomashttp://www.elanman.co.uk/2008/09/random-header-image-with-javascript/comment-page-1/#comment-135 thomas Tue, 15 Sep 2009 19:17:38 +0000 http://www.elanman.co.uk/?p=142#comment-135 hi, yes this is what im looking for but i tried it on mine but nothing appears what things do i change in the code so it can work on mine i tried changing the pics do i put something in where it says url towards the end of the code i checked out the link & its exactly what i want anyways do i put my website in replacement of the one mentioned in the code?or do i not put one in there? like i said it seems to come up blank ty hope i can find a code that actually works cause i know this one is exactly what im looking for ty hi,
yes this is what im looking for but i tried it on mine but nothing appears what things do i change in the code so it can work on mine i tried changing the pics do i put something in where it says url towards the end of the code
i checked out the link & its exactly what i want
anyways do i put my website in replacement of the one mentioned in the code?or do i not put one in there? like i said it seems to come up blank
ty hope i can find a code that actually works cause i know this one is exactly what im looking for
ty

]]> By: ElanManhttp://www.elanman.co.uk/2008/09/random-header-image-with-javascript/comment-page-1/#comment-15 ElanMan Wed, 04 Mar 2009 22:18:01 +0000 http://www.elanman.co.uk/?p=142#comment-15 Hi BlueCougar. I'll make a new post which combines this one and the <a href="http://www.elanman.co.uk/2009/03/simple-javascript-style-switcher/" title="Simple Javascript Style Switcher" rel="nofollow">'Simple Javascript Style Switcher'</a>. Hi BlueCougar.
I’ll make a new post which combines this one and the ‘Simple Javascript Style Switcher’.

]]> By: BlueCougarhttp://www.elanman.co.uk/2008/09/random-header-image-with-javascript/comment-page-1/#comment-13 BlueCougar Sun, 01 Mar 2009 19:11:40 +0000 http://www.elanman.co.uk/?p=142#comment-13 So, how would this be done with a javascript style switcher? So, how would this be done with a javascript style switcher?

]]> By: ElanManhttp://www.elanman.co.uk/2008/09/random-header-image-with-javascript/comment-page-1/#comment-12 ElanMan Wed, 18 Feb 2009 17:05:46 +0000 http://www.elanman.co.uk/?p=142#comment-12 Hi Rob, To have the image change after a period of time, you could wrap the above code in its own function then use setTimeout to call it. Example <p class="code"><code> <script type="text/javascript"> function RandImg() { var header = document.getElementById('header'); var pictures = new Array('images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg','images/image5.jpg'); var numPics = pictures.length; if (document.images) { var chosenPic = Math.floor((Math.random() * numPics)); header.style.background = 'url(' + pictures[chosenPic] + ')'; } setTimeout(RandImg,2000); } window.onload = RandImg; </script> </code></p> I've put an example here which changes the image every 2 seconds. <a href="http://www.elanman.co.uk/js_examples/random_image2.html" rel="nofollow">http://www.elanman.co.uk/js_examples/random_image2.html</a>. Notice that sometimes the image doesn't appear to change. That's because the same image can be selected randomly the next time the function is called. Having more images in the array will lessen the chances of this happening. Hi Rob,
To have the image change after a period of time, you could wrap the above code in its own function then use setTimeout to call it.
Example


<script type="text/javascript">
function RandImg() {
var header = document.getElementById('header');
var pictures = new Array('images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg','images/image5.jpg');
var numPics = pictures.length;
if (document.images) {
var chosenPic = Math.floor((Math.random() * numPics));
header.style.background = 'url(' + pictures[chosenPic] + ')';
}
setTimeout(RandImg,2000);
}
window.onload = RandImg;
</script>

I’ve put an example here which changes the image every 2 seconds.
http://www.elanman.co.uk/js_examples/random_image2.html.
Notice that sometimes the image doesn’t appear to change.
That’s because the same image can be selected randomly the next time the function is called. Having more images in the array will lessen the chances of this happening.

]]> By: Rob Masonhttp://www.elanman.co.uk/2008/09/random-header-image-with-javascript/comment-page-1/#comment-11 Rob Mason Wed, 18 Feb 2009 14:41:27 +0000 http://www.elanman.co.uk/?p=142#comment-11 Good article. Could you extend it to not only randomise the image, but also switch it after a set period of time to another random image? Good article. Could you extend it to not only randomise the image, but also switch it after a set period of time to another random image?

]]>