random pic doesn't work- Help!? 1

lisege01 · Dec 1, 2002

hello everyone,

i cannot get this script to work. i get an error that says "causewaypics[...]src'is null or not an object". can someone please help me, i've been staring at this for too long!

thanks
=======================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Causeway Photo Album</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
causewaypics=new Array(5);
causewaypics[0]=new Image();
causewaypics[0].src="ultimate1.jpg";
causewaypics[1]=new Image();
causewaypics[1].src="ultimate2.jpg";
causewaypics[2]=new Image();
causewaypics[2].src="ultimate3.jpg";
causewaypics[3]=new Image();
causewaypics[3].src="ultimate4.jpg";
causewaypics[4]=new Image();
causewaypics[4].src="ultimate5.jpg";
causewaypics[5]=new Image();
causewaypics[5].src="xmascards.jpg";
causewaypics=new Array("ultimate1.jpg","ultimate2.jpg","ultimate3.jpg",
"ultimate4","ultimate5.jpg","xmascards.jpg&quot

;
function randomPic(){
var element=Math.round(Math.random()*3);
var element2=Math.round(Math.random()*3)+4;
document.pic1.scr=causewaypics[element].src;
document.pic2.scr=causewaypics[element2].src;
setTimeout("randomPic()",2000);
}
//-->
</script>
</head>
<body onLoad="randomPic()">
<center><h3>Causeway Photo Album</h3>
<table>
<tr>
<td><img src="images/ultimate1.jpg" name="pic1"></td>
<td><img src="images/xmascards.jpg" name="pic2"></td>
</tr>
</table>
</center>
</body>
</html>

coracal · Dec 1, 2002

Hello,

1) scr isnt the same as src!

2)
I mean that isnt good:
document.pic1.scr=causewaypics[element].src;
document.pic2.scr=causewaypics[element2].src;

but:
document.pic1.scr=causewaypics[element];
document.pic2.scr=causewaypics[element2];

Coracal

sundemon · Dec 2, 2002

Hi,
There are more streamlined solutions, but here is a working version similar to yours. I left out the timer. I think your problems were in part coming from simply adding four to the array index to get the url of your second element. Sometimes that number will exceed the array length and cause an error. You don't have to preload, either. If you ultimately don't use 4 of the images you're wasting page loading time, but it does make for a seamless opening.ALso, see xutopia'a FAQ about adding strings together for most efficient load times. (I did it the slower way, which I'm more familiar with.)

<html>
<head>
<title>Causeway Photo Album
</title>
<script language="javascript">
//array of image names/urls
var causewaypics=["ultimate1.jpg","ultimate2.jpg","ultimate3.jpg","ultimate4.jpg","ultimate5.jpg","xmascards.jpg"];

//preload them if you want
var preloads=new Array();
for(var i=0;i<causewaypics.length;i++){
preloads=new Image();
preloads.src=causewaypics;
}

//create index for first image
var picIndex=Math.floor(Math.random()*causewaypics.length);

//create index for second image
var picIndex2=picIndex+4;

//correct picIndex2 if number exceeds array length
if(picIndex2>=causewaypics.length){
picIndex2-=causewaypics.length;
}

//write html string as desired
var htmStr='<table align=center><tr><td>';
htmStr+='<img src="'+causewaypics[picIndex]+'">';
htmStr+='</td><td>';
htmStr+='<img src="'+causewaypics[picIndex2]+'">';
htmStr+='</td></tr></table>';
</script>
</head>
<body onload="document.write(htmStr);">
</body>
</html>

sundemon · Dec 2, 2002

On looking over your script after I posted, I see you want to auto-rotate the random images (it's late!). Now i see about the preloads. Sorry I didn't notice that. coracal is right about the urls.

sundemon · Dec 2, 2002

<html>
<head>
<title>Causeway Photo Album
</title>
<script language="javascript">
var d=document;
var timerID=null;
var causewaypics=["ultimate1.jpg","ultimate2.jpg","ultimate3.jpg","ultimate4.jpg","ultimate5.jpg","xmascards.jpg"];
var preloads=new Array();
for(var i=0;i<causewaypics.length;i++){
preloads=new Image();
preloads.src="images/"+causewaypics;
}
function randPic(){
var picIndex=Math.floor(Math.random()*causewaypics.length);

var picIndex2=picIndex+4;
if(picIndex2>=causewaypics.length){
picIndex2-=causewaypics.length;
}
d.images["pic1"].src="images/"+causewaypics[picIndex];
d.images["pic2"].src="images/"+causewaypics[picIndex2];
timerID=setTimeout("randPic()",2000);
}
</script>
</head>
<body onload="randPic();">
<table align=center><tr><td>
<img src="images/ultimate1.jpg" name="pic1">
</td><td>
<img src="images/xmascards.jpg" name="pic2">
</td></tr></table>
</body>
</html>

lisege01 · Dec 3, 2002

hi all,

thanks for helping me, however, even after i changed scr to src (oops), it still doesnt work. i'm at my wits end.

onpnt · Dec 3, 2002

wokrs here on IE 5.5
what browser are you running

are tthe paths to the images correct I dare to learn more

http://www.onpntwebdesigns.com

admin@onpntwebdesigns.com

lisege01 · Dec 4, 2002

i am running I.E.5 as well, but it keeps generating an error.

onpnt · Dec 4, 2002

does this run correctly on your machine?

http://www.onpntwebdesigns.com/randompicture.htm

I dare to learn more

http://www.onpntwebdesigns.com

admin@onpntwebdesigns.com

lisege01 · Dec 5, 2002

hi onpnt!

after a bit of tweeking, i got the script to work.

thank you everyone who contributed!

===========
<html>
<head>


<script language="javascript">

function describeCat(str) {
alert(str);
}
var d=document;
var timerID=null;
var causewaypics=["../images/ultimate1.jpg","../images/ultimate3.jpg","../images/ultimate5.jpg"];
var preloads=new Array();
for(var i=0;i<causewaypics.length;i++){
preloads=new Image();
preloads.src=""+causewaypics;
}
function randPic(){
var picIndex=Math.floor(Math.random()*causewaypics.length);

var picIndex2=picIndex+2;
if(picIndex2>=causewaypics.length){
picIndex2-=causewaypics.length;
}
d.images["pic1"].src=""+causewaypics[picIndex];
d.images["pic2"].src=""+causewaypics[picIndex2];
timerID=setTimeout("randPic()",2000);
}
</script>
</head>
<body onload="randPic();">

<table align=center width=100%>

<tr>
<td width="23" height="22" valign="top"><img src="../images/ultimate2.jpg" width="112" height="96" name="pic1"></td>
<td width="143"> </td>
<td><img src="../images/ultimate4.jpg" width="110" height="285" name="pic2"></td>
</tr>
</table>
</body>
</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

random pic doesn't work- Help!? 1

lisege01

Programmer

coracal

Technical User

sundemon

Programmer

sundemon

Programmer

sundemon

Programmer

lisege01

Programmer

onpnt

Programmer

lisege01

Programmer

onpnt

Programmer

lisege01

Programmer

Similar threads

Part and Inventory Search

Sponsor