How do I direct which frames random images are assigned to? [Archive]

View Full Version : How do I direct which frames random images are assigned to?

jydeda

01-17-2008, 09:03 PM

A big HI to every one . . . .I am not exactly an expert but I like to dabble in a bit of web page development once in a while.

I have been able to get the the script below to randomly select between 1 of 47 images in a folder and call up the two other associated images related to the selected image.

lets say for Example image 19EFbd.jpg is selected at random and loaded into frame 1
it then loads into frame 2 the related image 19E0key.jpg
it then loads into frame 3 of the browser image 19EStv.jpg

Following on from this it then proceeds to refresh all 3 frames of the browser and restart the process selecting another

random ****Fbd.jpg , ****key.jpg. and corresponding ****stv.jpg image

The script works fine at the moment however all 3 images load into the same frame AND at the same time!!

My first problem is how do I direct the browser where to position the images?

My second problem is how do I include a variable time delay period between when the associated images pop up for example an

adjustable period 10 seconds between the apperance of 19EFbd.jpg, 19Ekey.jpg and 19EStv.jpg?

Below is the code as it stands I tried adding target="*****Frame" within the <img id="sImage" src="" ......"/> statement but

it doesn't recognise where to point the image to. I have included the code of my control page below to show how the frames

are set up and named. I am told that the page might be better off using floating-layers rather than frames.

Randomization page called into control page via menu item
---------------------------------------------------------

<html>
<head>
<script type="text/javascript">
var interval = 2.5; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
var path_prefix = 'E:/path/leading/to/images/';
interval *= 1000;

var image_index = 0;
var image_list = [
'01BbFbd.jpg','02B0Fbd.jpg','03C0Fbd.jpg','04DbFbd.jpg','05D0Fbd.jpg',
'06EbFbd.jpg','07E0Fbd.jpg','08F0Fbd.jpg','09GbFbd.jpg','10G0Fbd.jpg',
'11AbFbd.jpg','12A0Fbd.jpg','13BbFbd.jpg','14B0Fbd.jpg','15C0Fbd.jpg',
'16DbFbd.jpg','17D0Fbd.jpg','18EbFbd.jpg','19E0Fbd.jpg','20F0Fbd.jpg',
'21GbFbd.jpg','22G0Fbd.jpg','23AbFbd.jpg','24A0Fbd.jpg','25BbFbd.jpg',
'26B0Fbd.jpg','27C0Fbd.jpg','28DbFbd.jpg','29D0Fbd.jpg','30EbFbd.jpg',
'31E0Fbd.jpg','32F0Fbd.jpg','33GbFbd.jpg','34G0Fbd.jpg','35AbFbd.jpg',
'36A0Fbd.jpg','37BbFbd.jpg','38B0Fbd.jpg','39C0Fbd.jpg','40DbFbd.jpg',
'41D0Fbd.jpg','42EbFbd.jpg','43E0Fbd.jpg','44F0Fbd.jpg','45GbFbd.jpg',
'46G0Fbd.jpg','47AbFbd.jpg'];

var number_of_images = image_list.length;

function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
image_index = random_display ? generate(0, number_of_images) : (++image_index) % number_of_images;
return image_list[image_index];
}
function rotateImage() {
var new_image = getNextImage();
document.getElementById('rImage').src = path_prefix + new_image;
document.getElementById('sImage').src = path_prefix + new_image.replace(/.{3}\./, 'Stv.');
document.getElementById('kImage').src = path_prefix + new_image.replace(/.{3}\./, 'key.')
setTimeout(rotateImage, interval);
}
window.onload = function() {
setTimeout(rotateImage, interval);
}
</script>
</head>

<body>
<img id="rImage" src="" width="33%" height="100%" alt="Fbd"/>
<img id="sImage" src="" width="33%" height="100%" alt="Stv"/>
<img id="kImage" src="" width="33%" height="100%" alt="key"/>
</body>
</html>

Control page
-----------------

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

<frameset rows="*" cols="160,*" frameborder="NO" border="0" framespacing="0">
<frame src="Notefindemenu.htm" name="MenuFrame" scrolling="NO" noresize>
<frameset rows="140,*" cols="*" framespacing="0" frameborder="NO" border="0">
<frameset rows="50,*" cols="*">
<frame src="SaxnoteTitlepage.htm" name="ttlFrame" scrolling="NO" noresize>
<frame src="Homepage.htm" name="KeyFrame" scrolling="NO" noresize>
</frameset>
<frameset rows="*" cols="50%,*">
<frame src="Homepage.htm" name="FbdFrame" scrolling="NO" noresize>
<frame src="Homepage.htm" name="StvFrame" scrolling="NO" noresize>
</frameset>
</frameset>
</frameset>
<noframes><body>
<body background="Images/back03.jpg">
</body></noframes>
</html>

Thanks very much and best wishes for the New Year

???

01-19-2008, 05:58 PM

Well, they all are changed at the same time because

function rotateImage() {
var new_image = getNextImage();
document.getElementById('rImage').src = path_prefix + new_image;
document.getElementById('sImage').src = path_prefix + new_image.replace(/.{3}\./, 'Stv.');
document.getElementById('kImage').src = path_prefix + new_image.replace(/.{3}\./, 'key.')
setTimeout(rotateImage, interval);
} needs to be something like

function rotateImage() {
var new_image = getNextImage();
//Image one
var img1 = function () {
document.getElementById('rImage').src = path_prefix + new_image;
//Go to the second part of the loop
setTimeout(img2, interval);
}
//Image two
var img2 = function () {
document.getElementById('sImage').src = path_prefix + new_image.replace(/.{3}\./, 'Stv.');
//Go to the third part of the loop
setTimeout(img3, interval);
}
//Image three
var img3 = function () {
document.getElementById('kImage').src = path_prefix + new_image.replace(/.{3}\./, 'key.');
//Start loop over / Go to the first part of the loop
setTimeout(img1, interval);
}
//Start the loop
setTimeout(img1, interval);
}
With setTimeouts for each image, right now there is one function that sets all three and calls itself. You need each image to have a setTimeout.
All three images are in the same frame because in your control page, you're linking to one page three times, so they're all the same. You could either only have one iframe, or you could make two more pages, one for each image.

jydeda

01-21-2008, 12:31 PM

Thanks . . . .thats very helpful

jydeda

01-21-2008, 07:20 PM

hey thanks for that . . . . .You are quite right, may be trying to use frames rather than fitting the 3 images on one page is a bit over complicated. It works just as well on one page.

The code now generates the random images displayed at a variable time delay period between each related image.

However the loop process now seems to have an error as it stops at the end of the first random generation cycle, maybe its something I missed out I have included it below for your comment thanks

<html>
<head>
<script type="text/javascript">
var interval = 1.5; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
var path_prefix = 'E:/path/leading/to/images/';
interval *= 1000;

var image_index = 0;
var image_list = [
'01BbStv.jpg','02B0Stv.jpg','03C0Stv.jpg','04DbStv.jpg','05D0Stv.jpg',
'06EbStv.jpg','07E0Stv.jpg','08F0Stv.jpg','09GbStv.jpg','10G0Stv.jpg',
'11AbStv.jpg','12A0Stv.jpg','13BbStv.jpg','14B0Stv.jpg','15C0Stv.jpg',
'16DbStv.jpg','17D0Stv.jpg','18EbStv.jpg','19E0Stv.jpg','20F0Stv.jpg',
'21GbStv.jpg','22G0Stv.jpg','23AbStv.jpg','24A0Stv.jpg','25BbStv.jpg',
'26B0Stv.jpg','27C0Stv.jpg','28DbStv.jpg','29D0Stv.jpg','30EbStv.jpg',
'31E0Stv.jpg','32F0Stv.jpg','33GbStv.jpg','34G0Stv.jpg','35AbStv.jpg',
'36A0Stv.jpg','37BbStv.jpg','38B0Stv.jpg','39C0Stv.jpg','40DbStv.jpg',
'41D0Stv.jpg','42EbStv.jpg','43E0Stv.jpg','44F0Stv.jpg','45GbStv.jpg',
'46G0Stv.jpg','47AbStv.jpg'];

var number_of_images = image_list.length;

function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
image_index = random_display ? generate(0, number_of_images) : (++image_index) % number_of_images;
return image_list[image_index];
}
function rotateImage() {
var new_image = getNextImage();
//Image one
var img1 = function () {
document.getElementById('sImage').src = path_prefix + new_image;
//Go to the second part of the loop
setTimeout(img2, interval);
}
//Image two
var img2 = function () {
document.getElementById('kImage').src = path_prefix + new_image.replace(/.{3}\./, 'key.');
//Go to the third part of the loop
setTimeout(img3, interval);
}
//Image three
var img3 = function () {
document.getElementById('fImage').src = path_prefix + new_image.replace(/.{3}\./, 'Fbd.');
}
//Start the loop
setTimeout(img1, interval);
}
window.onload = function() {
setTimeout(rotateImage, interval);
}
</script>
</head>

<body>
<img id="sImage" src="" width="33%" height="100%" alt="Stv"/>
<img id="kImage" src="" width="33%" height="100%" alt="key"/>
<img id="fImage" src="" width="33%" height="100%" alt="Fbd"/>
</body>
</html>