PDA

Click to See Complete Forum and Search --> : Slide show will not work correctly.

ovrjoyd
07-21-2003, 11:59 AM
I need an applet which will randomly or sequentially change the images in 4-5 seperate cells within a row. I have a slide show applet but it will not work if it is used more than once on the same page. I am very new to javascript.:confused:
Nevermore
07-21-2003, 12:42 PM
If you want an Applet, you need to use Java not JavaScript. JavaScript is a cut-down version of Java designed to run in a web browser. For this application I would recommend using JavaScript, since it is more common for a user to have JavaScript enabled than Java - however if you want it made in Java I can do it. The advantage to making it in Java would be that it would be slightly easier for you to incorporate into the web page than JavaScript, since it makes it's own little 'window' around itself. However, if you wanted to edit the images later you would be better off with Java. Make any sense?

If you know whether you want a JavaScript or an Applet, can you please post which you would like to use and a list of the file names so that I can code the script/Applet.
ovrjoyd
07-21-2003, 12:54 PM
Thanks... I believe I am looking for javascript. I am using using a Mouseover image swap/image restore javascript for right now but would prefer the images to change without the mouseover command.:)
Nevermore
07-21-2003, 01:18 PM
Try this - the image sources will loop through the five images when you put your mouse over the images. You only need to update the array with the image sources:

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

<html>
<head>
<title>Change Page Background onload</title>
<script type="text/javascript">
<!--
var x=0;
//File names of images to swap, in order. As amny as you want.
var imgArray = new Array("img1.gif","img2.gif","img3.gif");

function changeImg() {
v=y=z=w=x;
v++;y+=2;z+=3;w+=4;
if(v>=imgArray.length)v=v%imgArray.length;
if(y>=imgArray.length)y=y%imgArray.length;
if(z>=imgArray.length)z=z%imgArray.length;
if(w>=imgArray.length)w=w%imgArray.length;
document.getElementById('img1').src=imgArray[x];
document.getElementById('img2').src=imgArray[v];
document.getElementById('img3').src=imgArray[y];
document.getElementById('img4').src=imgArray[z];
document.getElementById('img5').src=imgArray[w];
x++;
if(x>=imgArray.length)x=x%imgArray.length;
}
// -->
</script>
</head>
<body>
<img src="img1.gif" alt="" onMouseOver="changeImg();" id="img1">
<img src="img2.gif" alt="" onMouseOver="changeImg();" id="img2">
<img src="img3.gif" alt="" onMouseOver="changeImg();" id="img3">
<img src="img4.gif" alt="" onMouseOver="changeImg();" id="img4">
<img src="img5.gif" alt="" onMouseOver="changeImg();" id="img5">
</body>
</html>
ovrjoyd
07-21-2003, 01:21 PM
Thanks I appreciate the script but I want the images to change automatically without the mouseover command. I am already using a mouseover swap/restore.
Nevermore
07-22-2003, 10:00 AM
Is this any good? It will change the images every 5 seconds.


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

<html>
<head>
<title>Change Page Background onload</title>
<script type="text/javascript">
<!--
var x=0;
//File names of images to swap, in order. As amny as you want.
var imgArray = new Array("img1.gif","img2.gif","img3.gif");
function imgChgTimer() {
timer=window.setTimeout("changeImg()",5000);
}
function changeImg() {
v=y=z=w=x;
v++;y+=2;z+=3;w+=4;
if(v>=imgArray.length)v=v%imgArray.length;
if(y>=imgArray.length)y=y%imgArray.length;
if(z>=imgArray.length)z=z%imgArray.length;
if(w>=imgArray.length)w=w%imgArray.length;
document.getElementById('img1').src=imgArray[x];
document.getElementById('img2').src=imgArray[v];
document.getElementById('img3').src=imgArray[y];
document.getElementById('img4').src=imgArray[z];
document.getElementById('img5').src=imgArray[w];
x++;
if(x>=imgArray.length)x=x%imgArray.length;
imgChgTimer();
}
// -->
</script>
</head>
<body onload="imgChgTimer()">
<img src="img1.gif" alt="" id="img1">
<img src="img2.gif" alt="" id="img2">
<img src="img3.gif" alt="" id="img3">
<img src="img4.gif" alt="" id="img4">
<img src="img5.gif" alt="" id="img5">
</body>
</html>
larryroyc
07-22-2003, 11:17 AM
i was looking around for a slide show script for my site an this seems like the exact set up i want...

loaded it into my footer and all im getting at the moment is pretty square red X"s>>>>>>>>

im very new to this so im sure its at me on the links placement in the script..

could i get a bit of tutoring on img placement in the link..

you place your url link here dont you? id="img1">

thanks,

larry
ovrjoyd
07-22-2003, 03:52 PM
I will try it. Will it work if there is more than one instance of it on the same page? Let's say I want to have 5 columns in a row using the same javascript.
Nevermore
07-23-2003, 01:11 PM
Normally you would need to change all the variable names, but I think all you will need to change is the array variable names - the ones with squared brackets, so that you have an array for each set of images. BTW, you might want to preload the images to ensure that they display instantly.
ovrjoyd
07-23-2003, 02:16 PM
Thanks... I will try it...:D