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
---------------------------------------------------------
Code:
<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
-----------------
Code:
<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
Dev Articles Community Forums Sponsor:
January 17th, 2008, 03:58 PM
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
