Random image from array

needMajorHelp · 11-12-2008, 05:18 AM

its a demonstration on being safe on the internet. Click a box: maybe its a prize, maybe its a hazard.

screen shot attached.

Only the first image works and the virus function always pops up after every click. I don't even need to click on the image it just changes after a click anywhere on the screen.

Is it the id of the images being the same? or that they all point to the same function?

<script type="text/javascript">

</script>

</head>
<body align="left" bgcolor="white">

<table>
<tr>
<td align="center"><img src="banner.jpg"/></td>
</tr>
<tr>
<td align="center">

<img id="imageflip" src="caseNew.jpg" width="100" height="100" onClick="swapOut()" />
<img id="imageflip" src="caseNew.jpg" width="100" height="100" onClick="swapOut()" />
<img id="imageflip" src="caseNew.jpg" width="100" height="100" onClick="swapOut()"/>
<img id="imageflip" src="caseNew.jpg" width="100" height="100" onClick="swapOut()"/>
<img id="imageflip" src="caseNew.jpg" width="100" height="100" onClick="swapOut()"/>
</td>
</tr>

needMajorHelp · 11-12-2008, 05:21 AM

HELP!!

I still have not figured out how to make the virus method appear randomly. It still appears with each click. The virus appearing randomly is the most important part!!

my Progress so far:

I've separated the array from the swapOut function. Then I wrote swapOut to call the array. The problem is that for each image that I need flipped I have to make a new function(swapOutA, swapOutB, swapOutC...). This does work, but its bulky. There has to be a better way.

var images = new Array(25);

images[0] = 'case00.jpg';
images[1] = 'case01.jpg';
images[2] = 'case02.jpg';
images[3] = 'case03.jpg';
images[4] = 'case04.jpg';
images[5] = 'case05.jpg';
images[6] = 'case06.jpg';
images[7] = 'case07.jpg';
images[8] = 'case08.jpg';
images[9] = 'case09.jpg';
images[10] = 'case10.jpg';
images[11] = 'case11.jpg';
images[12] = 'case12.jpg';
images[13] = 'case13.jpg';
images[14] = 'case14.jpg';
images[15] = 'case15.jpg';
images[16] = 'case16.jpg';
images[17] = 'case17.jpg';
images[18] = 'case18.jpg';
images[19] = 'case19.jpg';
images[20] = 'case20.jpg';
images[21] = 'case21.jpg';
images[22] = 'case22.jpg';
images[23] = 'case23.jpg';
images[24] = 'case24.jpg';

function swapOutA()
{
var index = Math.floor(Math.random() * images.length);

document.imageflipA.src= images[index];
}
function swapOutB()
{
var index = Math.floor(Math.random() * images.length);

document.imageflipB.src= images[index];
}

jmrker · 11-13-2008, 03:57 AM

I'm nor sure of your intent, but try this to see how close I can guess to what you want to do.

PHP Code:


			
<html>

<head>

<title>Image Swaps</title>

<script type="text/javascript">

// From: http://www.codingforums.com/showthread.php?t=152088



var images = new Array(26);

    images[0] = 'case00.jpg';

    images[1] = 'case01.jpg';

    images[2] = 'case02.jpg';

    images[3] = 'case03.jpg';

    images[4] = 'case04.jpg';

    images[5] = 'case05.jpg';

    images[6] = 'case06.jpg';

    images[7] = 'case07.jpg';

    images[8] = 'case08.jpg';

    images[9] = 'case09.jpg';

    images[10] = 'case10.jpg';

    images[11] = 'case11.jpg';

    images[12] = 'case12.jpg';

    images[13] = 'case13.jpg';

    images[14] = 'case14.jpg';

    images[15] = 'case15.jpg';

    images[16] = 'case16.jpg';

    images[17] = 'case17.jpg';

    images[18] = 'case18.jpg';

    images[19] = 'case19.jpg';

    images[20] = 'case20.jpg';

    images[21] = 'case21.jpg';

    images[22] = 'case22.jpg';

    images[23] = 'case23.jpg';

    images[24] = 'case24.jpg';

    images[25] = 'virus.jpg';



function swapOut(IDS) {

  var index = Math.floor(Math.random() * images.length);

  document.getElementById(IDS).src= images[index];

  document.getElementById(IDS).alt= images[index];

  if (images[index] == 'virus.jpg') { virusA(); }

}



function virusA() {

  alert("poopie");

}

</script>



</head>

<body align="left" bgcolor="white">



<table>

<tr>

 <td align="center">

  <img src="banner.jpg" alt='banner.jpg' />

 </td>

</tr>

<tr>

 <td align="center">

  <img id="imageflip0" src="caseNew.jpg" alt="caseNew.jpg" width="100" height="100" onClick="swapOut(this.id)" />

  <img id="imageflip1" src="caseNew.jpg" alt="caseNew.jpg" width="100" height="100" onClick="swapOut(this.id)" />

  <img id="imageflip2" src="caseNew.jpg" alt="caseNew.jpg" width="100" height="100" onClick="swapOut(this.id)" />

  <img id="imageflip3" src="caseNew.jpg" alt="caseNew.jpg" width="100" height="100" onClick="swapOut(this.id)" />

  <img id="imageflip4" src="caseNew.jpg" alt="caseNew.jpg" width="100" height="100" onClick="swapOut(this.id)" />

 </td>

</tr> 

</table>

</body>

</html>

I didn't have the images you are to display so I added the 'alt=' to the tags.

needMajorHelp · 11-13-2008, 04:18 AM

I ended up creating a function for each image id. So by just this portion it works perfectly!! Thankyou!!

if (images[index] == 'virus.jpg') { virusA(); }
}

I will test this out to see what it does. Thank you!!!!!

document.getElementById(IDS).src= images[index];
document.getElementById(IDS).alt= images[index];

jmrker · 11-13-2008, 04:36 AM

Quote:

Originally Posted by needMajorHelp

I ended up creating a function for each image id.

Would seem to be overkill to create 26 functions.

In this

Quote:

Originally Posted by needMajorHelp

document.getElementById(IDS).src= images[index];
document.getElementById(IDS).alt= images[index];

you won't see much different unless the images are not available.
Add an X to your image filenames to see what I mean.