[SOLVED] Randomizing BG Tiles

nastybadger · #1 (**permalink**) Oct 2nd, 2007, 16:07

Hi, I have a bit of an unusual task and cant work this one out, wondered if anyone here can help me out.

I need to randomize a tiled background so that each tile is different to the next and when refresh is hit the order changes again.

I have 20 tiles 200x50 and will be adding more, so far I can randomize them but its all the same one on the page.

It does not matter if the same 2 tiles are next to each other as the more I add the less likely this will occur.

alexgeek · #2 (**permalink**) Oct 2nd, 2007, 16:08

you'd have to use javascript or php for this I guess.
is your site using PHP? if not, resort to JS.

welshstew · #3 (**permalink**) Oct 2nd, 2007, 16:30

a list apart has a good tutorial on randomizing images
you can also start with this code that I *borrowed* from codingforums and amend as you require

Code: Select all

<script language="javascript">
<!--
var gallery = new Array();
gallery[0] = new Array("01.jpg","02.jpg","03.jpg","04.jpg","05.jpg");
gallery[1] = new Array("06.jpg","07.jpg","08.jpg","09.jpg","10.jpg");
gallery[2] = new Array("11.jpg","12.jpg","13.jpg","14.jpg","15.jpg");
gallery[3] = new Array("16.jpg","17.jpg","18.jpg","19.jpg","20.jpg");
gallery[4] = new Array("21.jpg","22.jpg","23.jpg","24.jpg","25.jpg");

function pickImageFrom(whichGallery)
    {
    var idx = Math.floor(Math.random() * gallery[whichGallery].length);
    document.write('<img src="images/random/' + gallery[whichGallery][idx] + '">');
}
//-->
</script>
</head>
<body>

<div align="center"><script language="javascript">pickImageFrom(0);</script><br /><br />
<script language="javascript">pickImageFrom(1);</script><br /><br />
<script language="javascript">pickImageFrom(2);</script><br /><br />
<script language="javascript">pickImageFrom(3);</script><br /><br />
<script language="javascript">pickImageFrom(4);</script>
</div>

let me know if that helps

nastybadger · #4 (**permalink**) Oct 3rd, 2007, 14:07

Thanks for the help, it sent me in just the right direction.

I have an idea of using the tiles down each side of the page with the main site in the middle, every time the page is revisited the borders look different.

I wanted it to always finish at the bottom of the page no matter what size the window was and now it adds more as the window is stretched.

It also now randomizes again when the page is resized too, which I like.

Code: Select all

<script language="javascript">
<!--
var gallery = new Array();
gallery[1] = new Array("Tile1.jpg","Tile3.jpg","Tile5.jpg","Tile7.jpg","Tile9.jpg");
gallery[2] = new Array("Tile2.jpg","Tile4.jpg","Tile6.jpg","Tile8.jpg","Tile10.jpg");

function outputImages(imgh)
    {
    var maindiv = document.getElementById('centerdiv');
    var divh = maindiv.offsetHeight;
    var pageh = window.innerHeight;
    var workingheight = pageh > divh ? pageh : divh;
    var nimg = Math.floor(workingheight/imgh);
    for (i=0; i<nimg; i++)
    {
        whichGallery = (Math.floor(i/2) == Math.ceil(i/2)) ? 2 : 1;
        var idx = Math.floor(Math.random() * gallery[whichGallery].length);
        document.write('<img src="http://www.webforumz.com/images/' + gallery[whichGallery][idx] + '"><br />');
    }
}
    
//-->
</script>
<div id="centerdiv" class="centerdiv">
<p align="center" class="style1">Main page goes here</p>
</div>
<div id="leftdiv" class="leftdiv"><script language="javascript">outputImages(50);</script></div>
<div id="rightdiv" class="rightdiv"><script language="javascript">outputImages(50);</script></div></body>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] 1 solved problem causes another	delusion	Web Page Design	9	Dec 21st, 2007 08:12
Adding "Topic Solved" for solved topics	AdRock	Webforumz Suggestions and Feedback	21	Oct 4th, 2007 15:08
Randomizing Display Trouble	coastercraverjim	PHP Forum	0	Jun 5th, 2006 18:27

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
[SOLVED] Randomizing BG Tiles