/    Sign up×
Community /Pin to ProfileBookmark

Random Images

Copy linkTweet thisAlerts:
Nov 22.2004

Hey guys, I’ve set up 5 images that are loaded into an array variable, but I want to make it so that the images are loaded randomly everytime the button is clicked. Can someone help me out? Am I supposed to change the function where it says onClick? If it’s not too much trouble, can someone write a function so that it displays the images randomly? Thank you so much.
Here is the script:

<HTML>
<TITLE>HTML and JavaScript</TITLE>
<HEAD>

<SCRIPT>

/define image width and height/

var pic_width=400;
var pic_height=300;

/define text to show on button/

button_text=”Next Image”;

/define image urls/

if (document.images)
{
pic1= new Image(pic_width,pic_height);
pic1.src=”http://img81.exs.cx/img81/5639/teg01.jpg“;

pic2= new Image(pic_width,pic_height);
pic2.src=”http://img81.exs.cx/img81/7490/teg02.jpg“;
pic3= new Image(pic_width,pic_height);
pic3.src=”http://img81.exs.cx/img81/1530/teg03.jpg“;

pic4= new Image(pic_width,pic_height);
pic4.src=”http://img81.exs.cx/img81/4548/teg04.jpg“;

pic5= new Image(pic_width,pic_height);
pic5.src=”http://img115.exs.cx/img115/7497/teg05.jpg“;
}

var pics= new Array(5)
pics[0]=pic1.src;
pics[1]=pic2.src;
pics[2]=pic3.src;
pics[3]=pic4.src;
pics[4]=pic5.src;

var numpics=5;
var thenum=0;
imgName=”img1″;

function change_it()
{
if (document.images)
{
document.write(“<IMG SRC='”+pics[thenum]+”‘ border=’0’ width='”+pic_width+”‘

height='”+pic_height+”‘ name=’img1’>n”);
document.write(“<BR><FORM><INPUT TYPE=’button’ value='”+button_text+”‘

onClick=’change_it2()’></FORM>”);
}
}

function change_it2()
{
var x=0;
thenum+=1;

if (thenum>numpics-1)
{
document[imgName].src=pics[0];
thenum=0;
}
else
{
document[imgName].src=pics[thenum];
x+=1;
}

}

</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<SCRIPT>

change_it()

</SCRIPT>
</CENTER>
</BODY>
</HTML>

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@JonaNov 22.2004 — [font=trebuchet ms]Will the following article help? <http://www.webreference.com/programming/javascript/jf/column6/>[/font]
Copy linkTweet thisAlerts:
@tainted_soulauthorNov 22.2004 — I think that script refers to a random image being displayed everytime u load the page.

I need a script that shows how to display it randomly when the button is clicked.

But thanks anyway!!?
Copy linkTweet thisAlerts:
@CharlesNov 23.2004 — [font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="Content-Script-Type" content="text/javascript">

<meta name="Content-Style-Type" content="text/css">

<title>Example</title>

<script type="text/javascript">

<!--

Array.prototype.random = function () {return this[Math.floor(Math.random() * this.length)]};

pic1= new Image();

pic1.src="http://img81.exs.cx/img81/5639/teg01.jpg";

pic2= new Image();

pic2.src="http://img81.exs.cx/img81/7490/teg02.jpg";

pic3= new Image();

pic3.src="http://img81.exs.cx/img81/1530/teg03.jpg";

pic4= new Image();

pic4.src="http://img81.exs.cx/img81/4548/teg04.jpg";

pic5= new Image();

pic5.src="http://img115.exs.cx/img115/7497/teg05.jpg";

var pics= new Array(5)

pics[0]=pic1.src;

pics[1]=pic2.src;

pics[2]=pic3.src;

pics[3]=pic4.src;

pics[4]=pic5.src;

// -->

</script>

</head>

<body>

<script type="text/javascript">

<!--

document.write ('<p><button id="random">Next Image</button></p>');

document.getElementById ('random').onclick = function () {document.getElementById ('randomImage').src = pics.random()}

// -->

</script>

<p><img alt="[random image]" name="randomImage" src="JavaScript-free-default-image.png"></p>

</body>

</html>[/font]
Copy linkTweet thisAlerts:
@tainted_soulauthorNov 23.2004 — Thanks for the script!!

Is there another way to make the images show randomly?

I'm taking a beginner's course for JavaScript and by the looks of it, the script looks complicated. Don't get me wrong, I really appreciate it.

Is there a way so that i can just replace the change_it2 function so that, lets say, i use onClick=randomImage and state the function of randomImage?
Copy linkTweet thisAlerts:
@CharlesNov 23.2004 — That's essentially what my script does. It gives every Array the method "random" such that for any Array "a", "a.random()" returns a random element of that array. The rest is just hiding the button from the one in ten who do not use JavaScript. You wouldn't want the embarrassment of a button that does nothing so we hide it unless it's going to work.
Copy linkTweet thisAlerts:
@tainted_soulauthorNov 23.2004 — Thanks.

I'm not too clear as to what you said, so there are elements in ur script that is not JS?

If so, is it possible do make it work so that only JS is used?

Also, the original script that i posted, how do re-write the one you made so that it is displayed in the same format...ie) the Next Image button is centered underneath the pic, which is also centered.

Thank you so much for ur help. There are actually five programs which I have to write which are somewhat similar to one another. If you don't mind I would like ur help or anyone's help if you have the time. They are fairly simple programs.

Again, thanks.
Copy linkTweet thisAlerts:
@CharlesNov 23.2004 — Here's your minimal version. Just do not use this on the web!

[font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="Content-Script-Type" content="text/javascript">

<meta name="Content-Style-Type" content="text/css">

<title>Example</title>

<script type="text/javascript">

<!--

Array.prototype.random = function () {return this[Math.floor(Math.random() * this.length)]};

images = new Array();

images[0]= new Image();

images[0].src="http://img81.exs.cx/img81/5639/teg01.jpg";

images[1]= new Image();

images[1].src="http://img81.exs.cx/img81/7490/teg02.jpg";

images[2]= new Image();

images[2].src="http://img81.exs.cx/img81/1530/teg03.jpg";

images[3]= new Image();

images[3].src="http://img81.exs.cx/img81/4548/teg04.jpg";

images[4]= new Image();

images[4].src="http://img115.exs.cx/img115/7497/teg05.jpg";

pics= new Array();

for (i = 0; i < images.length; i++) {pics [i] = images [i].src}

// -->

</script>



<style type="text/css">

<!--

button, img {display:block; margin:auto}

-->

</style>



</head>

<body>

<div>

<img alt="[random image]" src="">

<button onclick="document.images[document.images.length-1].src = pics.random()">Next Image</button>

</div>

</body>

</html>[/font]
Copy linkTweet thisAlerts:
@tainted_soulauthorNov 23.2004 — It worked the way I wanted it to.

Thanks Charles!!
×

Success!

Help @tainted_soul spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...