WordPress.org

Support

Support » Themes and Templates » [Resolved] how could i randomly change my header.jpg

[Resolved] how could i randomly change my header.jpg

  • Hi there,

    I was trying to spice up my blog a little and wanted to be able to tweak my themes code so as the header image is randomly chosen from a few variations. It does it on the pixar site http://www.pixar.com and i grabbed the code from there hoping that i could use something like it on my page but i couldn’t get it to work 🙁 I think it might have been a different scripting language.

    Anyway if anyone has any suggestions it would be cool
    Thanks
    Pete

    Oh, and here’s the excerpt of code from pixar the named the bit i was after 🙂 It makes sense to me even though i’m not a big scripter but yeah, just doesn’t work when used in my script.

    <!--begin random home image-->
          <script>
    	var rnumb = "";
    	var img = "";
    
    	rnumb += Math.floor(Math.random()*3);
    	img = rnumb;
    
    	if (img == "0") {
    		document.write('<table width="705" border="0" cellspacing="0" cellpadding="0"><tr><td><a href="http://www.pixar.com/theater/trailers/rat/index.html"><img src="images/rat1/rat_1_tl.jpg" width="235" height="156" alt="Ratatouille" border="0"></a></td><td><a href="http://www.pixar.com/theater/trailers/rat/index.html"><img src="images/rat1/rat_1_tc.jpg" width="235" height="156" alt="Ratatouille" border="0"></a></td><td><a href="http://www.pixar.com/theater/trailers/rat/index.html"><img src="images/rat1/rat_1_tr.jpg" width="235" height="156" alt="Ratatouille" border="0"></a></td></tr><tr><td><a href="http://www.pixar.com/theater/trailers/rat/index.html"><img src="images/rat1/rat_1_bl.jpg" width="235" height="157" alt="Ratatouille" border="0"></a></td><td><a href="http://www.pixar.com/theater/trailers/rat/index.html"><img src="images/rat1/rat_1_bc.jpg" width="235" height="157" alt="Ratatouille" border="0"></a></td><td><a href="http://www.pixar.com/theater/trailers/rat/index.html"><img src="images/rat1/rat_1_br.jpg" width="235" height="157" alt="Ratatoulle" border="0"></a></td></tr></table>')
    	}
    	if (img == "1") {
    		document.write('<table width="705" border="0" cellspacing="0" cellpadding="0"><tr><td><a href="http://www.pixar.com/theater/trailers/rat/index.html"><img src="images/rat2/rat_2_tl.jpg" width="235" height="156" alt="Ratatuille" border="0"></a></td><td><a href="http://www.pixar.com/theater/trailers/rat/index.html"><img src="images/rat2/rat_2_tc.jpg" width="235" height="156" alt="Ratatouille" border="0"></a></td><td><a href="http://www.pixar.com/theater/trailers/rat/index.html"><img src="images/rat2/rat_2_tr.jpg" width="235" height="156" alt="Ratatouille" border="0"></a></td></tr><tr><td><a href="http://www.pixar.com/theater/trailers/rat/index.html"><img src="images/rat2/rat_2_bl.jpg" width="235" height="157" alt="Ratatouille" border="0"></a></td><td><a href="http://www.pixar.com/theater/trailers/rat/index.html"><img src="images/rat2/rat_2_bc.jpg" width="235" height="157" alt="Ratatouille" border="0"></a></td><td><a href="http://www.pixar.com/theater/trailers/rat/index.html"><img src="images/rat2/rat_2_br.jpg" width="235" height="157" alt="Ratatouille" border="0"></a></td></tr></table>')
    	}
    	if (img == "2") {
    	document.write('<table width="705" border="0" cellspacing="0" cellpadding="0"><tr><td><a href="http://www.pixar.com/theater/trailers/rat/index.html"><img src="images/rat6/rat_6_tl.jpg" width="235" height="156" alt="Ratatouille" border="0"></a></td><td><a href="http://www.pixar.com/theater/trailers/rat/index.html"><img src="images/rat6/rat_6_tc.jpg" width="235" height="156" alt="ratatouille" border="0"></a></td><td><a href="http://www.pixar.com/theater/trailers/rat/index.html"><img src="images/rat6/rat_6_tr.jpg" width="235" height="156" alt="Ratatouille" border="0"></a></td></tr><tr><td><a href="http://www.pixar.com/theater/trailers/rat/index.html"><img src="images/rat6/rat_6_bl.jpg" width="235" height="157" alt="Ratatouille" border="0"></a></td><td><a href="http://www.pixar.com/theater/trailers/rat/index.html"><img src="images/rat6/rat_6_bc.jpg" width="235" height="157" alt="Ratatouille" border="0"></a></td><td><a href="http://www.pixar.com/theater/trailers/rat/index.html"><img src="images/rat6/rat_6_br.jpg" width="235" height="157" alt="Ratatouille" border="0"></a></td></tr></table>')
    	}
    	</script>
          <!--end random home image-->
Viewing 4 replies - 1 through 4 (of 4 total)
  • Hmmm.. you can try Random Image Rotator and place the rotator.php file as background image on your css, ex:

    #header {
    margin: 2px
    width: 800px
    background-color: 000;
    background-image: url(header-images/rotator.php);

    place your all header images in a folder like above. and lastly, place your code in (example):

    <div id="header">
    your code here
    </div>

    hope this help

    hey thanks wpers,
    unfortunately the link you had didn’t work but i found a really easy one at http://photomatt.net/scripts/randomimage/
    you just put his code as a php file into a dir with some images and then link to the .php file instead of an image (and the .php file does all the randomness)
    Thanks for your help!!

    I don’t want to change the image header in kubrick, but I do want to randomly change the color of the header with each refresh. What is the best way to do this?

    jkhertog111 – please start another thread.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Resolved] how could i randomly change my header.jpg’ is closed to new replies.
Skip to toolbar