Random Image script

Forum Moderators: open

Message Too Old, No Replies

Random Image script

should be in the <img> tag

MrH2o

2:24 pm on Feb 11, 2004 (gmt 0)

Hey

I have a problem, I've been working with a site that have tables, and i want a background image in my table to be a random image everytime i refresh, but I can't figure it out how to do it. Anyone that knows?

cheers

MrH2o

BlobFisk

3:42 pm on Feb 11, 2004 (gmt 0)

Welcome to WebmasterWorld, MrH2o!

If you want to this with a clienty side script like JavaScript you have 2 choices:

Dynamically write the <table> tag and as part of this add the dynamic naming of the background image.
Dynamically write some CSS in the <head> and change the background image dynamically (using a class name on the table tag).

HTH

isitreal

4:54 pm on Feb 11, 2004 (gmt 0)

This should work for you. Just replace the image path on the first style declaration for #bgChange to what you want your default image to be (what will always appear if users have javascript disabled that is), then add as many images to the image array as you want, the more you add the less likely you'll get repetition (make the paths start at the root of your site however to avoid possible errors on some browsers). The table will need an id, not a class, however, if you want this to work.

<html>
<head>
<title></title>
<style type="text/css">
#bgChange {
width:100px;
height:100px;
background-image:url(/images/image01.jpg);
}
</style>
<script type="text/javascript">
function random_image()
{
image_array = new Array();
image_array[0] = '/images/image02.jpg';
image_array[1] = '/images/image03.jpg';
image_array[2] = '/images/image04.jpg';

count = image_array.length;
random = Math.floor(Math.random() * count);

document.getElementById('bgChange').style.backgroundImage = "url(" + image_array[random] + ")";
}
</script>
</head>
<body onload="random_image();">
<table id="bgChange"><tr><td> </td></tr>
</body>
</html>

MrH2o

8:07 pm on Feb 11, 2004 (gmt 0)

I tried to look at your code, but i didnt understand much ;D well it worked so im happy :) thank you very much! do you mind to explain why you use id= and not class?

cheers

isitreal

10:02 pm on Feb 11, 2004 (gmt 0)

Yes, you can't use the document.getElementById() feature of javascript without there being an id for it to work with on an HTML tag on your webpage, that's what the Id part is referring to (get the element by id, then do something with it, that is), that's the main way you access stuff using Javascript now with DOM, which works much more reliably cross browser than the older versions.

There can be one and only one of those id names per page, id occurs once, classes can occur repeatedly, that's how javascript knows which element is being worked with.

The tag can have both an id and a class however, there's no problem with that, it just has to have the id at least.

To use that, all you have to do is not change a thing except add more image_array[] items, just number them consecutively like they are, 0,1, 2,3,4,5... dont' skip any numbers, and it will work fine always for you.

ofjurai

1:30 am on Feb 26, 2004 (gmt 0)

I have a random image script also:

------------

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var rand1 = 0;
var useRand = 0;

images = new Array;
images[1] = new Image();
images[1].src = "1.jpg";
images[2] = new Image();
images[2].src = "2.jpg";
images[3] = new Image();
images[3].src = "3.jpg";

function swapPic() {
var imgnum = images.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
document.randimg.src = images[useRand].src;
}
// End -->
</script>

---------------

What I wanted to know is..
If there is a way to add a form to the page with this script so that people can upload images they want to be included.
(I'm assuming something would have to add the new
images[xx] = new Image();
images[xx].src = "xx.jpg";
into the list at the top and I don't know how to do that.)