WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [closed] how could i randomly change my header.jpg (5 posts)

  1. petertleary
    Member
    Posted 6 years ago #

    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-->
  2. WPers
    Member
    Posted 6 years ago #

    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

  3. petertleary
    Member
    Posted 6 years ago #

    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!!

  4. jkhertog111
    Member
    Posted 6 years ago #

    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?

  5. MichaelH
    Member
    Posted 6 years ago #

    jkhertog111 - please start another thread.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.