Random Image shuffle works perfectly, but.....

lantafly · 04-12-2005, 07:42 AM

I tested the script and it's perfect, only thing is I need the random images to load within a set table/cell. The " onload="ShufImages();" function needs to be confined within a set table/cell.

I've tried placing the function in the header but it errors.

Any help would be greatly appreciated.

Thanks in advanced.

Script in question:

----------------START

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">

</script>

</head>

<body onload="ShufImages();" >
<img id="I1" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100">
<img id="I2" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100">
<img id="I3" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100">
<img id="I4" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100">
</body>

</html>

--------------------------END

vwphillips · 04-12-2005, 12:59 PM

This seems to work so I dont understand you problem

PHP Code:


			


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

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



<html> 



<head> 

<title></title> 

<script language="JavaScript" type="text/javascript"> 

<!-- 



var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/'; 

var ImgAry=new Array('One.gif','Two.gif','Three.gif','Four.gif','Five.gif'); 

var RandomNu; 

var ImgCnt=1; 



function ShufImages(){ 

 while (ImgCnt<ImgAry.length){

  RandomNu=Math.floor(Math.random()*(ImgAry.length-1)); 

  if (ImgAry[RandomNu]!='X'){ 

   document.getElementById('I'+ImgCnt).src=ImgPath+ImgAry[RandomNu]; 

   ImgAry[RandomNu]='X'; 

   ImgCnt++; 

  } 

 }

} 



//--> 

</script> 



</head> 



<body onload="ShufImages();" > 



<table width="400" border="1" >

<tr>

<td>

<img id="I1" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100"> 

</td>

<td>

<img id="I2" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100"> 

</td>

<td>

<img id="I3" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100"> 

</td>

<td>

<img id="I4" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100"> 

</td>



</body> 



</html>

lantafly · 04-13-2005, 03:22 AM

It works fine in a new document without any page elements, but when I add it to my existing page it gives an error:

'document.getElemenetById(...)' is null or not an object

Here's what I've modified/added to your original code:

-----------------START------------------

<script language="JavaScript" type="text/javascript">


</script>

******onload function in body*******

<body onload="ShufImages();" topmargin="0" leftmargin="20" link="#000000" vlink="#000000" alink="#000000" background="../../images/common/bkg_tile_3.gif">

******remaining script below********

<td height="133">
<img id="I1" src="../../images/100x133/" width="100" height="133"></td>

<td height="133">
<img id="I2" src="../../images/100x133/" width="100" height="133"></td>

<td height="133">
<img id="I3" src="../../images/100x133/" width="100" height="133"></td

----------------END------------------------

I want to be able to shuffle 6+ images.

Thanks!

vwphillips · 04-13-2005, 05:29 PM

Ive done this with other elements on the page

seems to work fine

PHP Code:


			
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

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



<html>



<head>

<title></title>

<script language="JavaScript" type="text/javascript">

<!--



var ShufImgPath='http://www.vicsjavascripts.org.uk/StdImages/';

var ShufImgAry=new Array('One.gif','Two.gif','Three.gif','Tick1.gif','Four.gif','Five.gif');

var ShufRandomNu;

var ShufImgCnt=1;



function ShufImages(){

 while (ShufImgCnt<=ShufImgAry.length){

  ShufRandomNu=Math.floor(Math.random()*(ShufImgAry.length));

  if (ShufImgAry[ShufRandomNu]!='X'){

   document.getElementById('ShufI'+ShufImgCnt).src=ShufImgPath+ShufImgAry[ShufRandomNu];

   ShufImgAry[ShufRandomNu]='X';

   ShufImgCnt++;

  }

 }

}



//-->

</script>



</head>



<body onload="ShufImages();" >



<center>

<table width="400" border="1" >

<tr>

<td>

<img id="ShufI1" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100">

</td>

<td>

<img id="ShufI2" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100">

</td>

<td>

<img id="ShufI3" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100">

</td>

<td>

<img id="ShufI4" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100">

</td>

<td>

<img id="ShufI5" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100">

</td>

<td>

<img id="ShufI6" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width="100" height="100">

</td>

</tr>

</table>

</center>



<img  src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100">

<br>

<table width="200" height="200" border="1">

  <tr>

    <td>.</td>

    <td>.</td>

  </tr>

  <tr>

    <td>.</td>

    <td>.</td>

  </tr>

</table>

</body>



</html>

you will need to give me your full code if you still have problems