how could i randomly change my header.jpg

  • Resolved petertleary

    (@petertleary)


    16 years, 7 months 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-->
Viewing 4 replies - 1 through 4 (of 4 total)
  • wpers

    (@wpers)

    16 years, 7 months 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

    Thread Starter petertleary

    (@petertleary)

    16 years, 7 months 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!!

    jkhertog111

    (@jkhertog111)

    15 years, 11 months 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?

    MichaelH

    (@michaelh)

    15 years, 11 months ago

    jkhertog111 – please start another thread.

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