Random Cell Image

  • lomilmand
  • Student
  • Student
  • lomilmand
  • Posts: 91
  • Loc: Bournemouth, UK

Post 3+ Months Ago

I knows it quite easy to make a random image script (and I have one of those already), but also on that page, I have an image as the background to a cell.

Is there a script to randomise that cell background image, because I can't seem to find one.

The current code reads like this:
Code: [ Select ]
<td width="257" background="images/backgrounds/juliet_bk.jpg">


What would I have to add to this or do to be able to make it a random image with say files named "other_bk.jpg" and "this_bk.jpg"

This image has to be the background to a cell!, thats why im finding this difficult.

Thanks for your help.
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

What is the current script you have to randomize stuff? We should be able to adapt it for this purpose.
  • lomilmand
  • Student
  • Student
  • lomilmand
  • Posts: 91
  • Loc: Bournemouth, UK

Post 3+ Months Ago

Cool. This just sits in the body

Code: [ Select ]
<SCRIPT LANGUAGE="Javascript"><!--

function image() {
};

image = new image();
number = 0;

// imageArray
image[number++] = "<img src='images/gallery/home_randoms/random1.jpg' border='0'>"
image[number++] = "<img src='images/gallery/home_randoms/random2.jpg' border='0'>"
image[number++] = "<img src='images/gallery/home_randoms/random3.jpg' border='0'>"
image[number++] = "<img src='images/gallery/home_randoms/random4.jpg' border='0'>"
image[number++] = "<img src='images/gallery/home_randoms/random5.jpg' border='0'>"
image[number++] = "<img src='images/gallery/home_randoms/random6.jpg' border='0'>"
image[number++] = "<img src='images/gallery/home_randoms/random7.jpg' border='0'>"
image[number++] = "<img src='images/gallery/home_randoms/random8.jpg' border='0'>"
image[number++] = "<img src='images/gallery/home_randoms/random9.jpg' border='0'>"
image[number++] = "<img src='images/gallery/home_randoms/random10.jpg' border='0'>"
image[number++] = "<img src='images/gallery/home_randoms/random11.jpg' border='0'>"
image[number++] = "<img src='images/gallery/home_randoms/random12.jpg' border='0'>"
// keep adding items here...

increment = Math.floor(Math.random() * number);

document.write(image[increment]);

//--></SCRIPT>
  1. <SCRIPT LANGUAGE="Javascript"><!--
  2. function image() {
  3. };
  4. image = new image();
  5. number = 0;
  6. // imageArray
  7. image[number++] = "<img src='images/gallery/home_randoms/random1.jpg' border='0'>"
  8. image[number++] = "<img src='images/gallery/home_randoms/random2.jpg' border='0'>"
  9. image[number++] = "<img src='images/gallery/home_randoms/random3.jpg' border='0'>"
  10. image[number++] = "<img src='images/gallery/home_randoms/random4.jpg' border='0'>"
  11. image[number++] = "<img src='images/gallery/home_randoms/random5.jpg' border='0'>"
  12. image[number++] = "<img src='images/gallery/home_randoms/random6.jpg' border='0'>"
  13. image[number++] = "<img src='images/gallery/home_randoms/random7.jpg' border='0'>"
  14. image[number++] = "<img src='images/gallery/home_randoms/random8.jpg' border='0'>"
  15. image[number++] = "<img src='images/gallery/home_randoms/random9.jpg' border='0'>"
  16. image[number++] = "<img src='images/gallery/home_randoms/random10.jpg' border='0'>"
  17. image[number++] = "<img src='images/gallery/home_randoms/random11.jpg' border='0'>"
  18. image[number++] = "<img src='images/gallery/home_randoms/random12.jpg' border='0'>"
  19. // keep adding items here...
  20. increment = Math.floor(Math.random() * number);
  21. document.write(image[increment]);
  22. //--></SCRIPT>
  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

Well you could replace that with the <td stuff above, and then change all the img tags in the script to the <td with the proper file.

Do you have acccess to php? randomized jS can make websites very large filesize wise.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

You could try something like this in the head:

Code: [ Select ]
<script type="text/javascript">
<!--
var path = 'images/gallery/home_randoms/';
var images = new Array();
var i, numImages = 12;

for(i = 1; i <= numImages; i++) {
    images[i] = path + 'random' + i + '.jpg';
}

function randomChange() {
    var cell = document.getElementById('td1');
    var randomIndex = Math.floor(Math.random() * numImages)+1;
    cell.style.backgroundImage = 'url(' + images[randomIndex] + ')';
}
window.onload = randomChange;
// -->
</script>
  1. <script type="text/javascript">
  2. <!--
  3. var path = 'images/gallery/home_randoms/';
  4. var images = new Array();
  5. var i, numImages = 12;
  6. for(i = 1; i <= numImages; i++) {
  7.     images[i] = path + 'random' + i + '.jpg';
  8. }
  9. function randomChange() {
  10.     var cell = document.getElementById('td1');
  11.     var randomIndex = Math.floor(Math.random() * numImages)+1;
  12.     cell.style.backgroundImage = 'url(' + images[randomIndex] + ')';
  13. }
  14. window.onload = randomChange;
  15. // -->
  16. </script>


You'll have to add id="td1" to the td tag in question, and you'll have to remember to change the numImages variable if you add or remove images. If you're going to use this on multiple pages it would make sense to put the code in an external .js file (without the script and comment tags) and include it on the pages you want.

Code: [ Select ]
<script type="text/javascript" src="path/filename.js"> </script>
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

CSS + PHP would be the way to go on this. It'd take only a tiny bit of code and would load very fast. JS tends to slow things down.
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

RichB, couldn't your code be slightly optimized so as to not require an array or a for loop? Something like....
Code: [ Select ]
<script type="text/javascript">
<!--
var path = 'images/gallery/home_randoms/';
var i, numImages = 12;

function randomChange() {
  var cell = document.getElementById('td1');
  var randomIndex = Math.floor(Math.random() * numImages)+1;
  cell.style.backgroundImage = 'url(' + String(path + 'random' + randomIndex + '.jpg') + ')';
}
window.onload = randomChange;
// -->
</script>
  1. <script type="text/javascript">
  2. <!--
  3. var path = 'images/gallery/home_randoms/';
  4. var i, numImages = 12;
  5. function randomChange() {
  6.   var cell = document.getElementById('td1');
  7.   var randomIndex = Math.floor(Math.random() * numImages)+1;
  8.   cell.style.backgroundImage = 'url(' + String(path + 'random' + randomIndex + '.jpg') + ')';
  9. }
  10. window.onload = randomChange;
  11. // -->
  12. </script>
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

Yep, you're right. For some reason when I saw the array example he posted I just automatically thought loop.
  • lostinbeta
  • Guru
  • Guru
  • User avatar
  • Posts: 1402
  • Loc: Philadelphia, PA

Post 3+ Months Ago

I did too, but then I started staring at the code and playing with it in my head....lol.

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: No registered users and 46 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.