Preserved Topic: onMouseout Won't Complete? (Page 1 of 1)

Anyone who's good with JavaScript, please take a look at http://bigwaste.com/asylum/rollover/ and tell me what's going on.

What I'm trying to accomplish is a rollover whereby a small, yellow sphere zooms into existance on the onMouseover and zooms out of existance on the onMouseout. If you roll your cursor over each of the navigation choices very slowly, everything's fine. But, if you move over them quickly--quickly enough to begin a new mouseover before the previous mouseout has finished--the mouseout function "swapout" does not complete. So, the sphere just hangs there.

I wrote it the way I did (which, in my scripting infancy, took forever) so I didn't have to create a two new functions for each navigation choice (i.e. swapover1, swapout1, swapover2, swapout2, etc.). Is there a way to force it to complete the function even though the next one has begun? Or do I have to resort to creating a list of functions, different ones for each navigation choice?

Thanks, all.

i modified your mouseover function a bit, actually i added 2 lines, and it's obvius what they do:

function swapover(img) {

if (version == "good") {

which = img;

for(var i=0;i<3;i++)

	document.images[i].src=buttons[0].src;

setTimeout('document.images[names[which]].src = buttons[1].src',0);

setTimeout('document.images[names[which]].src = buttons[2].src',75);

setTimeout('document.images[names[which]].src = buttons[3].src',150); }}

you could leave this as it is and it will work but if you want you might modify it to make only the other two images reset.

There is no spoon...sort of speaking

That appears to have solved part of the problem, thanks. I had to change document.images[i] to document.images[names[i]], but it doesn't leave the sphere hanging in the middle of the animation anymore.

The thing is that it seems to simply reset back to the blank image instead of completing the zoom-out animation. It also appears to flash for some reason, making the animation jumpy. Try going back and forth between the same two to see what I mean. It looks like it's skipping the medium-sized sphere image.



[This message has been edited by Wes (edited 27-06-2000).]

hmm, you might want to considder making to animated gifs, or ask me do it <img border=0 align=absmiddle src="http://www.ozones.com/forum/biggrin.gif"> or if you preferr you might try some coding.
i have a strange idea on how to do this, but it will require too much work and i'm kindda in the middle of exams right now and also it's 2:24am.
if it's not too late i'll be over on the 2nd of july and i'll be more than happy to help you with the gif or the code.

There is no spoon...sort of speaking

Reason being, it does not move on to the mouse out function until the mouse over fuction is completed (so it isn't reading that a mouse out has occuring, unless done slow). Maybe use a 'while' statement.

I think that you will run into the same sort of problem, it will not move on to the next part of the program until the first step has been executed.

Hmm I know the original idea was to prevent using too much code so I guess I need to know how much is too much?

Here's a rough sketch of one way to fix it. The first thing you need is a clear Timeout function.

Looking at just one image what is happening is that one you mouseover the image those 3 Timeouts are set and away they go in 0ms the first change is gonna happen, in 150 ms the second and so on. The thing is once you mouse off then three more Timeouts are going to occur and if they coincide with the other ones then you are stuck with jumpy images. So what you need is a clearTimeout that will stop any timeouts that are waiting to happen once you mouse off the image. (Is this making sense?)

You use this function by naming your timeouts

image1 = setTimeout('document.images[names[which]].src = buttons[1].src',0);

then clear it with:
clearTimeout(image1);
and then set the Timeouts for the descending animation. Of course then you don's know where to descend from. (tiny circle? mid circle? big circle?) Hmm.

This script is getting way more complicated eh? Alright here are some things to think about. I don't have time right now to show you how to do it but here are some things to think about. I'll revisit this problem later when I have more time



Walking the Earth like Kane

Try this...

var curr_step0=0, curr_step1=0, curr_step2=0, id0, id1, id2;

function swapover(img)
{
if (version == 'good')
{
eval("my_step = ++curr_step"+img);
eval("my_id = id"+img);

clearTimeout(my_id);
document.images[names[img]].src = buttons[my_step].src;
if (my_step < 3)
eval('id'+img+' = setTimeout("swapover("+img+")",150)');
}
}

function swapout(img)
{
if (version == "good")
{
eval("my_step = --curr_step"+img);
eval("my_id = id"+img);

clearTimeout(my_id);
if (my_step < 0)
eval('curr_step'+img+' =0');
document.images[names[img]].src = buttons[my_step].src;
if (my_step > 0)
eval('id'+img+' = setTimeout("swapout("+img+")",150)');
}
}

You need 6 global vars to hold the information about timeouts and the current state of each of the dynamic pictures.

This takes a little more computing power, and uses up a little more memory than your method did - but it works, and there's relitively little coding to be done!

Hope this was useful! If you don't understand it, just ask!

osh

Wow, osh! This works exactly the way I need it to! Of course, I still don't understand all of it, but I'll definitely sit down with my lousy JS boo k and read through the script to see if I can figure out what does what.

Thank everybody for your help!