Random image link display, if hover should stop the image link...

imdavidlee

Apr 26th 2009, 6:16 pm

i wanna ask a question regarding this random image link/sequential image link display issue..i have write out the code and it works, but the problem for me is i dunno how to make the image stop when mouseover the image display..

these are my code, you can test it with ur html and put 3 images with the name specified below....

<BODY OnLoad="rotateImage('rImage', 'link')">

<center>
<a id="rLink" href="" hover="stopImage();"><img id="rImage" src="" width=120 height=90></a>
<br>
<input type="button" value="previous">
<input type="button" value="next" onclick="getFirstImage()">
</center>

</body>

<script LANGUAGE="JavaScript">

var interval = 5; // delay between rotating images (in seconds)
var random_display = 0; // 0 = no, 1 = yes
interval *= 1000;

var image_index = 0;
var image1 = new imageItem("fheader18.png", "http://imdavidlee.com");
var image2 = new imageItem("fheader19.png", "http://limpek.com");
var image3 = new imageItem("davidlogo.jpg", "http://codebasic.net");

image_list = new Array();
image_list[image_index++] = image1;
image_list[image_index++] = image2;
image_list[image_index++] = image3;

var number_of_image = image_list.length;

function imageItem(image_location, link) {
this.image_item = new Image();
this.image_item.src = image_location;
this.image_item.link = link;
}

function stopImage() {
setTimeout("rotateImage()", NULL);
}

function getNextImage() {

if (random_display) {
image_index = Math.floor(Math.random() * image_list.length);
}
else {
image_index = (image_index+1) % number_of_image;
}

var new_image = image_list[image_index];
return(new_image);
}

function rotateImage(rImage, link) {

var new_image = getNextImage();

document.getElementById('rImage').src = new_image.image_item.src;
document.getElementById('rLink').href = new_image.image_item.link;

setTimeout("rotateImage()", interval);
}

</script>

dimitar christoff

Apr 27th 2009, 3:22 am

declare a global variable like

var mytimer;

then use mytimer = setTimeout ...

and onmouseover add clearTimeout(mytimer);

then again it may not work because you really dont explain what you're doing very well, nobody will bother recreating this - why not just post a link?

JavaScriptBank.com

Apr 27th 2009, 11:21 pm

setTimeout Method

Evaluates an expression after a specified number of milliseconds has elapsed.

Return Value

Integer. Returns an identifier that cancels the evaluation with the clearTimeout method.

hope this is useful