RESOLVED- Load rnd image on click without preloading

**mr_metal_hed** · Nov 16th, 2002, 05:54 PM

I'm pretty sure this is easy to do someone that knows javascript. I've have been looking at examples, but I just can't seem to accomplish my goal.

I have a growing series of images named in sequence starting at 1.jpg. Right now just 1 - 30. I'd like to load a random image 1-30 by clicking the image without reloading the entire page. I plan to have more pictures later, so a function that generates a random number based on how many images I have would be nice.

I would appreciate help I get in any form (links, examples, abusive language, etc). Thank you.

**Sastraxi** · Nov 16th, 2002, 06:01 PM

Here's a few tips to get you in the right direction.

- You can set the .src of an <IMG> tag through javascript, make sure to set an ID and use that
- Math.Rnd or Math.Random creates a random number 0 to 1 (ex. 0.6791)
- Math.Floor(x) returns the rounded-down value of a fractional number

**mr_metal_hed** · Nov 16th, 2002, 06:21 PM

I've managed to get this working from some other examples. This works on the page load though, and I'd like to be able to call it when I click the image. It seems to me it should be easy to convert, or am I wrong? I just can't figure it out.

Code:

<script>
<!--
// Begin random script

rnd.today=new Date();
rnd.seed=rnd.today.getTime();

function rnd() {
        rnd.seed = (rnd.seed*9301+49297) % 233280;
        return rnd.seed/(233280.0);
};

function rand(number) {
        return Math.ceil(rnd()*number);
};

// end central randomizer. -->
</SCRIPT>



<script language="JavaScript"><!--
            document.write('<img src="http://img.ranchoweb.com/images/' + rand(30) + '.jpg" BORDER=0 align=middle height=68 width=68 suppress=true ALT="random image">');
//--></script>

**Sastraxi** · Nov 16th, 2002, 06:33 PM

No clue what the rnd() function is doing all that work for, but hey! If it's working...

Here's what I'd do:

Code:

.....
.....
.....
<img src="" BORDER=0 align=middle height=68 width=68 onClick="javascript:this.src='http://img.ranchoweb.com/images/' + rand(30) + '.jpg';" ALT="random image">

I wouldn't use Document.Write to put it in, just put it in like a normal image. And if you need to set it at load-time, give it an ID and call it like that.

**mr_metal_hed** · Nov 16th, 2002, 06:46 PM

Thanks. That works well. What is it that's wrong with the rnd? I don't get it either, but it was an example for loading random images that I found...

Like you said, if it works- it works.

As far as calling this click event when the page loads, do I need to give the <img> a name? Then I'm think <body onload something... uh I'm just guesing based on what I've seen. I'm sorry I'm clueless.

Again, I really appreciate your help and patience.

**Sastraxi** · Nov 16th, 2002, 06:48 PM

Yeah, you're right. Give the IMG an ID:

Code:

<IMG ID="RandomImage" ....>

And now, do the onLoad event:

Code:

<BODY onLoad="javascript:this.src='http://img.ranchoweb.com/images/' + rand(30) + '.jpg';" .......>

Cheers!

**mr_metal_hed** · Nov 16th, 2002, 07:03 PM

.....back again.....

Apparently I am a complete idiot. I can't figure this out!

**Sastraxi** · Nov 16th, 2002, 07:19 PM

This worked for me... YMSV (your mileage SHOULDNT vary

)

Code:

<html>
<head>
<script>
<!--
// Begin random script

rnd.today=new Date();
rnd.seed=rnd.today.getTime();

function rnd() {
        rnd.seed = (rnd.seed*9301+49297) % 233280;
        return rnd.seed/(233280.0);
};

function rand(number) {
        return Math.ceil(rnd()*number);
};

// end central randomizer. -->
</SCRIPT>
</head>
<body onLoad="javascript:myimg.src='http://img.ranchoweb.com/images/' + rand(30) + '.jpg';">

<img id="myimg" src="" BORDER=0 align=middle height=68 width=68 

onClick="javascript:this.src='http://img.ranchoweb.com/images/' + rand(30) + '.jpg';" ALT="random image">

</body>
</html>

**mr_metal_hed** · Nov 16th, 2002, 07:40 PM

You should be pleased to know that your code works like a charm, and more importantly... I want be bothering you anymore.

"Thanks" one last time.

**Sastraxi** · Nov 17th, 2002, 12:16 AM

You're welcome... but the meaning of this post was to say "Nice avatar, BTW

".

So....

Nice avatar, BTW

Thread: RESOLVED- Load rnd image on click without preloading

Thread Tools

Display

RESOLVED- Load rnd image on click without preloading

Posting Permissions