random picture

meagain

unread,

Mar 21, 2013, 8:42:52 PM3/21/13

to

I've used javascript to generate a random number,
but can you tell me how to choose a random "img"?

--
www.BoltonAccess.TV

Chris F.A. Johnson

unread,

Mar 21, 2013, 9:19:05 PM3/21/13

to

On 2013-03-22, meagain wrote:
> I've used javascript to generate a random number,
> but can you tell me how to choose a random "img"?

I use this CGI script: <http://b.cfaj.ca/rpic.cgi>

#!/bin/bash
name=rpic.cgi
version=1.0
description=
author='Chris F.A. Johnson'
created='2013-03-14 14:34:55'
modified=2013-03-21T21:15:42

printf 'Content-type: image/jpeg\n\n'

list=( *.jpg )

cat "${list[RANDOM % ${#list[@]}]}"

--
Chris F.A. Johnson
<http://torontowebdesign.cfaj.ca/>

123Jim

unread,

Mar 21, 2013, 9:40:03 PM3/21/13

to

On 22/03/2013 00:42, meagain wrote:
> I've used javascript to generate a random number,
> but can you tell me how to choose a random "img"?
>

This looks quite good:
http://www.dyn-web.com/code/basics/random_image/random_img_js.php

Not tested by myself however.

richard

unread,

Mar 22, 2013, 11:37:24 AM3/22/13

to

On Thu, 21 Mar 2013 20:42:52 -0400, meagain wrote:

> I've used javascript to generate a random number,
> but can you tell me how to choose a random "img"?

fairly simple to do in PHP.
create an array with img names.
then use the random function to select one.
show the img.

Tim W

unread,

Mar 23, 2013, 8:33:11 AM3/23/13

to

Or get a random image script off the internet like this one I have used
http://www.phpjunkyard.com/random-image.php

meagain

unread,

Mar 24, 2013, 7:58:35 PM3/24/13

to

Thanks to all respondents for their tips and hints!

Denis McMahon

unread,

Apr 2, 2013, 12:52:51 AM4/2/13

to

On Thu, 21 Mar 2013 20:42:52 -0400, meagain wrote:

> I've used javascript to generate a random number,
> but can you tell me how to choose a random "img"?

The following is one way to do so in javascript, as you said you've used
javascript, but I actually have no idea whether you want to use javascript
for this or not .....

You can load an array of n image locations into a document thus:

<script type="text/javascript">
var images = new Array();
images.push("http://host1.domain1.tld1/path1/imagefile1.ext1");
images.push("http://host2.domain2.tld2/path2/imagefile2.ext2");
images.push("http://host3.domain3.tld3/path3/imagefile3.ext3");
.......
images.push("http://hostn.domainn.tldn/pathn/imagefilen.extn");
</script>

You can define an image in html thus:

<img id="randomImage">

or in xhtml thus:

<img id="randomImage1">

And then you can load a random image from your array of images with:

<script type="text/javascript">
var index = floor(random()*images.count);
document.getElementById("randomImage1").src = images[index];
</script>

It may be better to put the latter javascript in a function called from
the onload event of the document body:

<html>
<head>
<title>random image</title>
<script type="text/javascript">
var images = new Array();
images.push("http://www.sined.co.uk/tmp/sq-1-3.jpg");
images.push("http://www.sined.co.uk/tmp/sq-20-27.jpg");
images.push("http://www.sined.co.uk/tmp/sq-28-35.jpg");
images.push("http://www.sined.co.uk/tmp/sq-36-39.jpg");
images.push("http://www.sined.co.uk/tmp/sq-40.jpg");
images.push("http://www.sined.co.uk/tmp/sq-4-19.jpg");
images.push("http://www.sined.co.uk/tmp/square_base.jpg");
function pageLoaded() {
var index = Math.floor(Math.random()*images.length);
document.getElementById("randomImage1").src = images[index];
}
</script>
</head>
<body onload="pageLoaded();">
<p><img id="randomImage1"></p>
</body>
</html>

This "Random Image with Javascript" web page can be seen at http://
www.sined.co.uk/tmp/randomimg.htm

--
Denis McMahon, denismf...@gmail.com

Denis McMahon

unread,

Apr 2, 2013, 3:50:38 AM4/2/13

to

On Tue, 02 Apr 2013 04:52:51 +0000, Denis McMahon wrote:

> or in xhtml thus:

> <img id="randomImage1"> <---- this

Should have been this:

<img id="randomImage1" />

--
Denis McMahon, denismf...@gmail.com

Jan Clemens Faerber

unread,

Apr 4, 2013, 11:11:02 AM4/4/13

to rick0....@gmail.com.spamless

On Friday, March 22, 2013 1:42:52 AM UTC+1, meagain wrote:
> I've used javascript to generate a random number,
>
> but can you tell me how to choose a random "img"?

Which random number?
A random number between 1 and 20
or a random number between 0 and 1?
There are many possible ranges of numbers.

Jan Clemens Faerber

unread,

Apr 4, 2013, 1:02:41 PM4/4/13

to

On Tuesday, April 2, 2013 6:52:51 AM UTC+2, Denis McMahon wrote:
> On Thu, 21 Mar 2013 20:42:52 -0400, meagain wrote:
> > I've used javascript to generate a random number,
> > but can you tell me how to choose a random "img"?
>
> The following is one way to do so in javascript, as you said you've used
> javascript, but I actually have no idea whether you want to use javascript
> for this or not .....

your javascript example looks well -
but isn't it much more easy (in case
there is a relation:
"random number"~"number of pics")
to use document.writeln(... and here
you use the random number to write
the number of the gif (.jpg, whatever)?

Denis McMahon

unread,

Apr 5, 2013, 1:29:33 AM4/5/13

to

Yes, you can do it that way, but working through the DOM seems to be
generally considered as better practice than document.write/ln, and
provides a method that can be used to, for example, change the random
image to another one when it is clicked on. I'm not sure that's so easy
to do with document.write/ln

http://www.sined.co.uk/tmp/randomimg2.htm

Note that sometimes it will choose the current image as the new random
image, so if it doesn't change when you click it, just click it again.

--
Denis McMahon, denismf...@gmail.com

Jan Clemens Faerber

unread,

Apr 6, 2013, 3:49:39 AM4/6/13

to

On Friday, April 5, 2013 7:29:33 AM UTC+2, Denis McMahon wrote:

> Yes, you can do it that way, but working through the DOM seems to be
> generally considered as better practice than document.write/ln, and
> provides a method that can be used to, for example, change the random
> image to another one when it is clicked on. I'm not sure that's so easy
> to do with document.write/ln
>
> http://www.sined.co.uk/tmp/randomimg2.htm
>
> Note that sometimes it will choose the current image as the new random
> image, so if it doesn't change when you click it, just click it again.

I understand.
Last time I even saw a way to switch the css style sheet with a few lines js using a cookie which is written again after a reload :)

For more css reload check out maybe
https://github.com/auchenberg/css-reloader
It's currently available as addon/extension
for Mozilla Firefox and Google Chrome.