Change the image on refresh - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Change the image on refresh

with a catch multiple images.

mcsacks

9:40 am on Jan 10, 2005 (gmt 0)

10+ Year Member

I have the following code that i found from someones post in an earlier discussion and i edited it a bit to suit myself.

<html>
<head>
<title>Javascript Test</title>

<script type="text/javascript">
//<![CDATA[
var imagesA=new Array();
imagesA[0]="/justice/images/corrservs/photos/croc.jpg";
imagesA[1]="/justice/images/corrservs/photos/kakadu.jpg";
var imagesB=new Array();
imagesB[0]="/justice/images/corrservs/photos/magpie_geese.jpg";
imagesB[1]="/justice/images/corrservs/photos/rocks.jpg";
var imagesC=new Array();
imagesC[0]="/justice/images/corrservs/photos/magpie_geese.jpg";
imagesC[1]="/justice/images/corrservs/photos/rocks.jpg";
var imagesD=new Array();
imagesD[0]="/justice/images/corrservs/photos/magpie_geese.jpg";
imagesD[1]="/justice/images/corrservs/photos/rocks.jpg";

function randomImage() {
var i=Math.floor(Math.random()*imagesA.length);
document.getElementById("randomA").src=imagesA[i];
var j=Math.floor(Math.random()*imagesB.length);
document.getElementById("randomB").src=imagesB[j];
var k=Math.floor(Math.random()*imagesC.length);
document.getElementById("randomC").src=imagesC[k];
var l=Math.floor(Math.random()*imagesD.length);
document.getElementById("randomD").src=imagesD[l];
}

onload=randomImage;
//]]>
</script>
</head>

<body>
<img id="randomA" />
<img id="randomB" />
<img id="randomC" />
<img id="randomD" />
</body>

The problem that i have with this code is that you are only rotating through 2 pictures for each image. How can i set it up so that

randomA = any picture
randomB = any picture that isn't A
randomC = any picture that isn't A or B
randomD = any picutre that isn't A or B or C

Please note that i am aware that i have duplicated the names of some of the pictures above. The problem i wish to solve is stated above.

orion_rus

3:46 pm on Jan 10, 2005 (gmt 0)

10+ Year Member

To solve it u can use following:


images=imagesD.concat(imagesA,imagesB,imagesC);
u have a new array what consist all 4 images array. 
var i=Math.floor(Math.random()*images.length);
document.getElementById("randomA").src=images[i];

This means what i now = randomA in ur specification,
if images=imagesD.concat(imagesB,imagesC);
This means what i now = randomB in ur specification and so on.
I hope i help u. Good luck to you

mcsacks

10:29 am on Jan 12, 2005 (gmt 0)

10+ Year Member

Hey I can't get this to work. I am new to javascript so I am having a couple of problems.

Basically I want to use the following code:

<script type="text/javascript">
//<![CDATA[
var images=new Array();
images[0]="./images/01.jpg";
images[1]="./images/02.jpg";
images[2]="./images/03.jpg";
images[3]="./images/04.jpg";
images[4]="./images/05.jpg";
images[5]="./images/06.jpg";
images[6]="./images/07.jpg";

function randomImage() {
var i=Math.floor(Math.random()*images.length);
document.getElementById("random").src=images[i];
}

onload=randomImage;
//]]>
</script>

<body>
<img id="random" src="" alt=""/>
</body>

please note that i would also like to add in another picture that is not the same as 'random'

ie...
<body>
<img id="random" src="" alt=""/>
<img id="random2" src="" alt=""/>
</body>

I can get this to work but i have the problem that sometime the same picture occurs. How can I make it so that 'random2' is not equal to 'random'
(What changes need to be added to the code)
(I am aware that i have left out the code for random2 that is not the problem)
The problem is to ensure that the same picture isnt displayed in two places.

Please Note:
I have approximately 20 images in total and would like to cycle through them in four different locations on the page. Will this still work.

Can you please write the code as i am only a beginner and am not sure where to insert the changes.

Thanks

orion_rus

11:22 am on Jan 12, 2005 (gmt 0)

10+ Year Member

<html>
<head>
<title>Javascript Test</title>

<script type="text/javascript">
//<![CDATA[
var imagesA=new Array();
imagesA[0]="/justice/images/corrservs/photos/croc.jpg";
imagesA[1]="/justice/images/corrservs/photos/kakadu.jpg";
var imagesB=new Array();
imagesB[0]="/justice/images/corrservs/photos/magpie_geese.jpg";
imagesB[1]="/justice/images/corrservs/photos/rocks.jpg";
var imagesC=new Array();
imagesC[0]="/justice/images/corrservs/photos/magpie_geese.jpg";
imagesC[1]="/justice/images/corrservs/photos/rocks.jpg";
var imagesD=new Array();
imagesD[0]="/justice/images/corrservs/photos/magpie_geese.jpg";
imagesD[1]="/justice/images/corrservs/photos/rocks.jpg";

function randomImage() {
images=imagesD.concat(imagesA,imagesB,imagesC);
u have a new array what consist all 4 images array.
var i=Math.floor(Math.random()*images.length);
document.write("<img src='"+images[i]+"' />");
}
// ]]>
</script>
</head>

<body>
<script>
randomImage();
</script>
</body>
</html>

I think it should work fine. Good luck to you

mcsacks

1:54 pm on Jan 12, 2005 (gmt 0)

10+ Year Member

Ok sorry to be a hassle i think that i am not making myself clear.

This is the code i would like to use something like the following if it is possible.

<script type="text/javascript">
//<![CDATA[
var images=new Array();
images[0]="./images/01.jpg";
images[1]="./images/02.jpg";
images[2]="./images/03.jpg";
images[3]="./images/04.jpg";
images[4]="./images/05.jpg";
images[5]="./images/06.jpg";
images[6]="./images/07.jpg";

function randomImage() {
var i=Math.floor(Math.random()*images.length);
document.getElementById("random").src=images[i];
}

onload=randomImage;
//]]>
</script>

</head>
<body >

<img id="random" src="" alt=""/>
---------THIS IS THE PART THAT I NEED HELP WITH----------
(I would like to have another 3 images displaying in the browser - however i do not want them to be the same as the others)

FOR EXAMPLE
randomB = any image except 'random'
randomC = any image except 'random' or 'randomB'
randomD = any image except 'random' or 'randomB' or 'randomC'

</body>

orion_rus

7:33 pm on Jan 12, 2005 (gmt 0)

10+ Year Member

May be i was not clear, to make all what u want u can make the follows:
<html>
<head>
<title>Javascript Test</title>

<script type="text/javascript">
//<![CDATA[
var imagesA=new Array();
imagesA[0]="/justice/images/corrservs/photos/croc.jpg";
imagesA[1]="/justice/images/corrservs/photos/kakadu.jpg";
var imagesB=new Array();
imagesB[0]="/justice/images/corrservs/photos/magpie_geese.jpg";
imagesB[1]="/justice/images/corrservs/photos/rocks.jpg";
var imagesC=new Array();
imagesC[0]="/justice/images/corrservs/photos/magpie_geese.jpg";
imagesC[1]="/justice/images/corrservs/photos/rocks.jpg";
var imagesD=new Array();
imagesD[0]="/justice/images/corrservs/photos/magpie_geese.jpg";
imagesD[1]="/justice/images/corrservs/photos/rocks.jpg";

function randomImage(images) {
u have a new array what consist all 4 images array.
var i=Math.floor(Math.random()*images.length);
document.write("<img src='"+images[i]+"' />");
}
// ]]>
</script>
</head>

<body>
<script>
<--
images=imagesD.concat(imagesA,imagesB,imagesC);
randomImage(images);
images=imagesD.concat(imagesB,imagesC);
randomImage(images);
images=imagesD.concat(imagesC);
randomImage(images);
// and so on
//-->
</script>
</body>
</html>

Good luck to you