RESOLVED- Load rnd image on click without preloading

Printable View

Nov 16th, 2002, 05:54 PM
mr_metal_hed

RESOLVED- Load rnd image on click without preloading

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.
Nov 16th, 2002, 06:01 PM
Sastraxi

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
Nov 16th, 2002, 06:21 PM
mr_metal_hed

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>  </SCRIPT> <script language="JavaScript"></script>
Nov 16th, 2002, 06:33 PM
Sastraxi

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

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.
Nov 16th, 2002, 06:46 PM
mr_metal_hed

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... :p 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.
Nov 16th, 2002, 06:48 PM
Sastraxi

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!
Nov 16th, 2002, 07:03 PM
mr_metal_hed

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

Apparently I am a complete idiot. I can't figure this out!
Nov 16th, 2002, 07:19 PM
Sastraxi

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

Code:

<html> <head> <script>  </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>
Nov 16th, 2002, 07:40 PM
mr_metal_hed

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

"Thanks" one last time.
Nov 17th, 2002, 12:16 AM
Sastraxi

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

So....

Nice avatar, BTW :D