Multiple Image display

xendistar · Joined: 08 May 2007 Posts: 32

I currently have a bit of java script that will randomly take a picture from a pre-selcted list of images and display said image on the index page of my web site.

What I would like is to use the same list of images but for some script to select an image and display that image say for say 5 second's and then fade away as a new image fade in, keep this going until the user clicks the next link.

Does anybody know of any script to do this or is this wishful thinking??

Tim

PS I would like to do this in java\php\(x)html rather than something like flash\activex

xendistar · Joined: 08 May 2007 Posts: 32

OK I found a bit of javascript which say it can do what I want and there little demo shows it does. Problem is the javascript on my page it does not work

I got the code from here

http://www.dyn-web.com/code/rotate_images/demos.php

And I am using the just rotate code, here is the code they supply

<html>
<head>
<title>Demo</title>
<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_rotator.js" type="text/javascript"></script>
<script type="text/javascript">
var rotator1 = {
path: 'images/',
id: 'r1',
speed: 3000, // default 4500
images: ["smile.gif", "grim.gif", "frown.gif", "bomb.gif"],
bTrans: true // ie win filter
}

function initRotator() {
dw_Rotator.setup(rotator1);
}

dw_Event.add( window, 'load', initRotator);
</script>
</head>
<body>


<img id="r1" src="images/smile.gif" alt="">

<p>Back to <a href="index.html">index</a></p>

</body>
</html>

Here is the code on my page

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />



<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_rotator.js" type="text/javascript"></script>
<script type="text/javascript">
var rotator1 = {
path: 'images/',
id: 'r1',
speed: 3000, // default 4500
images: ["fp01.jpg","fp02.jpg","fp03.jpg","fp04.jpg"],
bTrans: true // ie win filter
}

function initRotator() {
dw_Rotator.setup(rotator1);
}

dw_Event.add( window, 'load', initRotator);
</script>

</head>
<body>
<div id="all">
<div id="container">

<div id="menu">

</div>
<div id="logo"><a href="#">windriders.co.uk</a></div>


<div id="main">


<img id="r1" src="images/fp01.jpg" alt=""/>

(I have only pasted the relevant sections of my web page)

The only lines I have changed from the original file are the names of the image files. When the web page loads the first picture is displayed and that is it, it does not change as per there demo.

Can anybody suggest where I have gone wrong??

Regards

Tim