Rotating Images

**ferretfan7** · 03-11-2003 09:55 PM

Hi! I'm new here and still pretty much a novice in the web design field. In fact, the extent of my knowledge is basically no more than html.

However, I'm trying to create a revolving image at the top of a personal website I'm creating and could use some help. Basically, I have three pictures. I want someone to come to my website and show one picture at the top. After about 2 seconds, I want the picture to change to the second and after another 2 secs to change to the third.

Could anyone help me out with this? I would greatly appreciate it!

**pyro** · 03-11-2003 11:14 PM

Try this code:

Code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

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

img2 = new Image()


seconds = "2";

function imgOne()
{
	setTimeout("imgTwo()", seconds * 1000);
}
function imgTwo()
{
	document.myimg.src = 'two.gif';
	setTimeout("imgThree()", seconds * 1000);
}
function imgThree()
{
	document.myimg.src = 'three.gif';
	setTimeout("imgOne()", seconds * 1000);
}
</script>

</head>

<body onload="imgOne();">
<img src="one.gif" name="myimg">
</body>
</html>

**ferretfan7** · 03-12-2003 11:20 AM

Thank you so much! I'm just headed out the door and will give it a try when I get to work. Thanks again!

**ferretfan7** · 03-12-2003 07:07 PM

OK, score one for my novice ways.

Where would I plug in my pictures? The way I did it I keep getting a runtime error.

Can you bold each place I need to do this? Also, does it make a difference if the pictures are of different sizes?

**pyro** · 03-12-2003 07:31 PM

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

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

img2 = new Image()

seconds = "2";

function imgOne()
{
setTimeout("imgTwo()", seconds * 1000);
}
function imgTwo()
{
document.myimg.src = 'two.gif';
setTimeout("imgThree()", seconds * 1000);
}
function imgThree()
{
document.myimg.src = 'three.gif';
setTimeout("imgOne()", seconds * 1000);
}
</script>

</head>

<body onload="imgOne();">
<img src="one.gif" name="myimg">
</body>
</html>

Make sure that paths are correct. And, the images can be any size.

**ferretfan7** · 03-12-2003 07:32 PM

This is what I have:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

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

img2 = new Image()

seconds = "2";

function imgOne()
{
setTimeout("http://devyne.org/Images/E&B.jpg", seconds * 1000);
}
function imgTwo()
{
document.myimg.src = 'http://devyne.org/Images/E&B.jpg';
setTimeout("http://devyne.org/Images/family2.gif", seconds * 1000);
}
function imgThree()
{
document.myimg.src = 'http://devyne.org/Images/family2.gif ';
setTimeout("http://devyne.org/Images/babyboy1.gif", seconds * 1000);
}
</script>

</head>

<body onload="http://devyne.org/Images/babyboy1.gif ();">
<img src="http://devyne.org/Images/babyboy1.gif" name="myimg">
</body>
</html>

However, I keep being told that line 33 has an expression expecting

**pyro** · 03-12-2003 07:35 PM

You body tag should be this:

<body onload="imgOne();">

That tells the body to run the first function, imgOne()...

**ferretfan7** · 03-12-2003 07:45 PM

Oops, looks like we posted over each other.

I've put in this:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

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

img2 = new Image()

seconds = "2";

function imgOne()
{
setTimeout("imgTwo()", seconds * 1000);
}
function imgTwo()
{
document.myimg.src = 'http://devyne.org/Images/E&B.jpg';
setTimeout("imgThree()", seconds * 1000);
}
function imgThree()
{
document.myimg.src = ‘http://devyne.org/family.gif’;
setTimeout("imgOne()", seconds * 1000);
}
</script>

</head>

<body onload="imgOne();">
<img src="http://devyne.org/Images/babyboy1.gif" name="myimg">
</body>

And now I'm getting a runtime error "expression expected" on line 24, which is highlighted in red.

On a side note, you can laugh at or criticize the pictures at will. They are just test pictures for now as the ones I want to use are not uploaded to the computer yet.

**DCH** · 03-12-2003 07:50 PM

Hi Both

Sorry to disturb the thread. Pyro's script is exactly how you should do it, but if you are using Dreamweaver here's a link to a website that gives you a dreamweaver extension that does exactly what you want. It allows random images on refresh, sequentially (as you need), daily etc.. It's quite solid and the actual script can be taken and adapted. It's just a bit easiar with the extension..

http://www.kaosweaver.com/

you need to download the advanced Random images v4.2.0
(the free extension)
I know I should be put in a pit from the nether regions of hell for suggesting 'a cheat' method...

Cheers

Cham

**ferretfan7** · 03-12-2003 07:52 PM

Lol! No, thank you very much. Actually I am using Dreamweaver but I'm not used to MX. This stupid runtime keeps popping up each time I try to preview it or debug it. I'll give that link a try.

**ferretfan7** · 03-12-2003 08:00 PM

Awesome!!!

It worked! Thank you so much. Out of curiosity, what is the difference between the code that pyro provided and the code from DW besides all the kaosweaver mumbo jumbo? Is DW just messier?

<body onLoad="rndSlideShow(1000,0)"><script language="JavaScript">
// Advanced Random Images Start
// Copyright 2001-2002 All rights reserved, by Paul Davis - www.kaosweaver.com
var j,d="",l="",m="",p="",q="",z="",KW_ARI= new Array()
// KW_rs[1000]
KW_ARI[KW_ARI.length]='http://devyne.org/family.gif';
KW_ARI[KW_ARI.length]='http://devyne.org/Images/babyboy1.gif';
KW_ARI[KW_ARI.length]='http://devyne.org/Images/ayinaavatar.gif';
j=parseInt(Math.random()*KW_ARI.length);
j=(isNaN(j))?0:j;
document.write("<img name='randomSlideShow' src='"+KW_ARI[j]+"'>");
function rndSlideShow(t,l) { // Random Slideshow by Kaosweaver
x=document.randomSlideShow; j=l; while (l==j) {
j=parseInt(Math.random()*KW_ARI.length); j=(isNaN(j))?0:j; }
x.src=KW_ARI[j]; setTimeout("rndSlideShow("+t+","+j+")",t);
}

// Advanced Random Images End
</script>

**DCH** · 03-12-2003 08:00 PM

Hi

To save time heres the script for a sequential picture display, insert it in position:

body onLoad="seqSlideShow(45000,0)">
<script language="JavaScript">
// Advanced Random Images Start
// Copyright 2001-2002 All rights reserved, by Paul Davis - www.kaosweaver.com
var j,d="",l="",m="",p="",q="",z="",KW_ARI= new Array()
// KW_ss[45000]
KW_ARI[KW_ARI.length]='/Anakin2.jpg';
KW_ARI[KW_ARI.length]='/atom.jpg';
j=parseInt(Math.random()*KW_ARI.length);
j=(isNaN(j))?0:j;
document.write("<img name='seqSlideShow' src='"+KW_ARI[j]+"'>");
function seqSlideShow(t,l) { // Sequential Slideshow by Kaosweaver
x=document.seqSlideShow; j=l; j++; if (j==KW_ARI.length) j=0;
x.src=KW_ARI[j]; setTimeout("seqSlideShow("+t+","+j+")",t);
}

// Advanced Random Images End
</script>

</body>

to add the images replace anakin2.jpg and atom.jpg. To add more images just underneath the atom jpg line add

KW_ARI[KW_ARI.length]='/YOUR PIC.GIF';

and keep doing this to increase the number of pics you want to be displayed. This will go back to the start picture though. To speed or slow down the show just decrease or increase all instances of 45000.

Hope this helps

Cheers

Cham

**pyro** · 03-12-2003 08:01 PM

This code works:

Code:

<html> 
<head> 
<title>Untitled Document</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 

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

img2 = new Image() 


seconds = "2"; 

function imgOne() 
{ 
setTimeout("imgTwo()", seconds * 1000); 
} 
function imgTwo() 
{ 
document.myimg.src = 'http://devyne.org/Images/E&B.jpg'; 
setTimeout("imgThree()", seconds * 1000); 
} 
function imgThree() 
{ 
document.myimg.src = 'http://devyne.org/family.gif'; 
setTimeout("imgOne()", seconds * 1000); 
} 
</script> 

</head> 

<body onload="imgOne();"> 
<img src="http://devyne.org/Images/babyboy1.gif" name="myimg"> 
</body> 
</head>

The problem was in the line you had hightlighted above, you used the wrong kind of '. you needed straign ones, yours curled toward the text...

**DCH** · 03-12-2003 08:01 PM

Hi

missed a < at the start of the script...

Cheers

Cham

**DCH** · 03-12-2003 08:08 PM

Hi

I think pyro's script is neater, the DM script is a bit messy, but it does works across all browsers.

Cheers

DCH

Thread: Rotating Images

Thread Tools

Display

Rotating Images

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions