Hello folks,
I’m working on a little web site that has a “home page” that consists of 100px x 100px thumbnail images that link to separate info pages. I’d like to randomise the thumbnails each time the page is loaded. But I have no idea how too. Can anyone help me out?
Thumbnail code:
<div id="holder" style="background-image: url(images/100-mini-adventures.jpg)"><div id="overlay"><a href="compass-points.html" id="link"></a></div></div>
CSS code that configures the thumbnail:
#holder { width: 100px; height: 100px; -webkit-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0px 0px 4px 1px #5c2b00; box-shadow: 0px 0px 4px 1px #5c2b00; float: left; margin: 3px;}
#overlay { width: 98px; height: 98px; background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3ffffff', endColorstr='#00ffffff',GradientType=0 ); -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #FFF;}
#link { display: block; height: 98px; width: 98px;}
A sample of how the thumbnails appear on the page, can be found here: http://mobile.wyldfurr.com/
So what i am trying to do, is when the page is loaded, the thumbnails might be arranged as A, B, C, D, E. But load the page again and it could be: B, E, A, C, D. Load the page again, and the boxes are jumbled up again.
