Solved

# Random

Posted on 1998-10-28
261 Views
I want to be able to use a javascript to display a random image out of a set of 4 on my web page. Anyone know the code for this?
0
Question by:Bishma
• 2
• 2
• 2
• +1

LVL 10

Expert Comment

Here you go:

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
numpics = 4
day = new Date()
z = day.getTime()
y = (z - (parseInt(z/1000,10) * 1000))/10
x = parseInt(y/100*nummidi,10) + 1
if (x == (1))
pic=("pic1.gif")
if (x == (2))
pic=("pic2.gif")
if (x == (3))
pic=("pic3.gif")
if (x == (4))
pic=("pic4.gif")
document.write('<IMG SRC= ' + pic + ' >')
// End -->
</SCRIPT>

0

LVL 4

Expert Comment

If your images are named "pic1.gif" to "pic4.gif" this:
if (x == (1))
pic=("pic1.gif")
if (x == (2))
pic=("pic2.gif")
if (x == (3))
pic=("pic3.gif")
if (x == (4))
pic=("pic4.gif")
Can be replace with this:
pic = "pic" + x + ".gif";

Martin
0

Author Comment

It didn't work. Is there a line that should be in the body to accompany this? Keep in mind I know very little about javascript
0

LVL 2

Accepted Solution

Grdv earned 60 total points
<html>
<script language="javascript">
function rand(n){
var now = new Date();
var seed = now.getTime() % 0xffffffff;
seed = (0x015a4e35 * seed) % 0x7fffffff;
return (seed >> 16) % n;
}

function splash(){
if (document.images) document.images["splash"].src = "img/splash" + rand(4) + ".gif";
}
</script>
<title>Splash Screen Page</title>
<body bgcolor="#cccc66" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" onLoad="splash()">
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td align="center" valign="middle" colspan="2">
<img src="img/bl.gif" alt="splashpicture" width="370" height="370" border="0" name="splash"></a>
</td>
</tr>
</table>
</body>
</html>
this is very simple... all you do is to place your pictures in a subdir, called img and then name them:
splash0.gif,splash1.gif,splash2.gif,splash3.gif

and then this image tag is the keytag:
<img src="img/bl.gif" alt="splashpicture" width="370" height="370" border="0" name="splash">
first of all the src= points to a blank image, just to have an image then the name "splash" is the one used of the javascript function splash()

if (document.images) document.images["splash"].src = "img/splash" + rand(4) + ".gif";
checks if there is possible to change the image, if it is, then change the image named "splash" into the random splash screen...

hope that helped...

//Grdv
0

Author Comment

Not exactly what I wanted but it only took 2 small changes to get it to work. Thanks.
0

LVL 10

Expert Comment

That is exactly what mine did!
0

LVL 2

Expert Comment

no it's not.... you're using this line:

document.write('<IMG SRC= ' + pic + ' >')

while I'm using dynamic images, then which one of them's best can be discussed...

//Grdv
0

## Featured Post

### Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …