This thread is a continuation of a thread that started in the CGI forum...
<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=7116">http://forums.webdeveloper.com/showthre ... eadid=7116</a><!-- m -->
eevailen,
So you've been up all night and created all those scripts. And I've had a new idea that doesn't need any of them!!!
You know, this is your idea/problem and I'm not really sure if this is what you want. Do you like the direction this is going? If you,
or anyone else reading this, have another idea; please jump in. You won't hurt my feelings, I promise.
OK!. Here's the new idea...
Everything is random!! So you will have no idea what will happen next or when it will happen. If you click on a link the LCTT will respond correctly but will then change and do something else...
And here's the script. Simply add your images in theImages array and set the correct path.
<html><head><title>Untitled</title>
<script type="text/javascript">
<!--
// A list of all the images to be used. You may add as many images as you wish.
// The script will adjust to use all the images listed.
var theImages= new Array(
'c01.gif','c02.gif','c03.gif','c04.gif','c05.gif','c06.gif',
'c07.gif','c08.gif','c09.gif','c10.gif','c11.gif','c12.gif');
// Preload the images
var imgAry = new Array();
for (var i=0; i<theImages.length; i++) {
imgAry = new Image; imgAry.src = "images/" + theImages;
}
var lcttObj; // declared globally since it is used in more than one function
function init() {
// create an object variable representing the image on the HTML page.
// This must be done after the page has loaded.
lcttObj = document.images['lcttImg'];
animate('');
}
function animate(imgNo) {
if (imgNo) { lcttObj.src = "images/"+theImages[imgNo]; } // Image immediately set by visitor (on click)
else { lcttObj.src = getImg(); } // Random image set by getImg()
var Secs = Math.floor(Math.random()*10) + 2; // set timer between 2 & 10 secs
var timer = setTimeout("animate('')",(1000 * Secs)); // Change the image after elapsed time.
}
// Randomly get a number between 0 amd 12. Get that image name from the array and return it along with the correct path.
function getImg() {
var aryLen = theImages.length;
var imgNo = Math.floor((Math.random()-0.001)*aryLen); // -0.001 to ensure it never returns a number greater than the array length but equal chance to return a number equal to the array length
var currImg = "images/"+theImages[imgNo];
return currImg;
}
onload = init;
//-->
</script>
</head>
<body bgcolor="#ffffff">
<div style="position:absolute; top:100px; left:200px">
<img name="lcttImg" src=http://www.webdeveloper.com/forum/archive/index.php/"images/c01.gif">
<!-- The numbers represent the image position in theImage array. Remember the arrays start at 0
... so 2 is actually the 3rd element -->
<p><a href="#" onClick="animate(2); return false">String[3]</a></p>
<p><a href="#" onClick="animate(4); return false">Food[5]</a></p>
<p><a href="#" onClick="animate(7); return false">Stroke[8]</a></p>
</div>
</body>
</html>
<!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=7116">http://forums.webdeveloper.com/showthre ... eadid=7116</a><!-- m -->
eevailen,
So you've been up all night and created all those scripts. And I've had a new idea that doesn't need any of them!!!
You know, this is your idea/problem and I'm not really sure if this is what you want. Do you like the direction this is going? If you,
or anyone else reading this, have another idea; please jump in. You won't hurt my feelings, I promise.
OK!. Here's the new idea...
Everything is random!! So you will have no idea what will happen next or when it will happen. If you click on a link the LCTT will respond correctly but will then change and do something else...
And here's the script. Simply add your images in theImages array and set the correct path.
<html><head><title>Untitled</title>
<script type="text/javascript">
<!--
// A list of all the images to be used. You may add as many images as you wish.
// The script will adjust to use all the images listed.
var theImages= new Array(
'c01.gif','c02.gif','c03.gif','c04.gif','c05.gif','c06.gif',
'c07.gif','c08.gif','c09.gif','c10.gif','c11.gif','c12.gif');
// Preload the images
var imgAry = new Array();
for (var i=0; i<theImages.length; i++) {
imgAry = new Image; imgAry.src = "images/" + theImages;
}
var lcttObj; // declared globally since it is used in more than one function
function init() {
// create an object variable representing the image on the HTML page.
// This must be done after the page has loaded.
lcttObj = document.images['lcttImg'];
animate('');
}
function animate(imgNo) {
if (imgNo) { lcttObj.src = "images/"+theImages[imgNo]; } // Image immediately set by visitor (on click)
else { lcttObj.src = getImg(); } // Random image set by getImg()
var Secs = Math.floor(Math.random()*10) + 2; // set timer between 2 & 10 secs
var timer = setTimeout("animate('')",(1000 * Secs)); // Change the image after elapsed time.
}
// Randomly get a number between 0 amd 12. Get that image name from the array and return it along with the correct path.
function getImg() {
var aryLen = theImages.length;
var imgNo = Math.floor((Math.random()-0.001)*aryLen); // -0.001 to ensure it never returns a number greater than the array length but equal chance to return a number equal to the array length
var currImg = "images/"+theImages[imgNo];
return currImg;
}
onload = init;
//-->
</script>
</head>
<body bgcolor="#ffffff">
<div style="position:absolute; top:100px; left:200px">
<img name="lcttImg" src=http://www.webdeveloper.com/forum/archive/index.php/"images/c01.gif">
<!-- The numbers represent the image position in theImage array. Remember the arrays start at 0
... so 2 is actually the 3rd element -->
<p><a href="#" onClick="animate(2); return false">String[3]</a></p>
<p><a href="#" onClick="animate(4); return false">Food[5]</a></p>
<p><a href="#" onClick="animate(7); return false">Stroke[8]</a></p>
</div>
</body>
</html>