...
PDA

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">
<!--

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(){
RandomNu=Math.floor(Math.random()*(ImgAry.length-1));
if (ImgAry[RandomNu]!='X'){
document.getElementById('I'+ImgCnt).src=ImgPath+ImgAry[RandomNu];
ImgAry[RandomNu]='X';
ImgCnt++;
}
if (ImgCnt<ImgAry.length){ setTimeout('ShufImages()',10); }
}

//-->
</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



<!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">

<!--
onload="ShufImages();"
var ImgPath='../../images/100x133/';
var ImgAry=new Array('5001.jpg','5500_A.jpg','9404_A.jpg','20153.jpg','29001_B.jpg','29001_C.jpg');
var RandomNu;
var ImgCnt=1;

function ShufImages(){
RandomNu=Math.floor(Math.random()*(ImgAry.length-1));
if (ImgAry[RandomNu]!='X'){
document.getElementById('I'+ImgCnt).src=ImgPath+ImgAry[RandomNu];
ImgAry[RandomNu]='X';
ImgCnt++;
}
if (ImgCnt<ImgAry.length){ setTimeout('ShufImages()',10); }

}

//-->
</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


<!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

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum