I have working javascript that allows my forum buttons to switch when a user mouses over them. This works great but I was thinking that being able to have 3 or 4 images load in a sequence as you mouseover would be even better.
Basically the idea is so that the text colour will change gradually from one colour to the next instead of an instant change.
The problem I am having is that it just switches to the last called image flip straight away rather than doing them in order. I've been trying to figure it out but have been unsuccessful..
The section of code giving the problem is as follows:
- Code: Select all
// Preload the Images in here
if (document.images) {
var flipped = new Array();
for(i=0; i< inames.length; i++) {
flipped[i] = new Image();
flipped[i].src = "images/"+inames[i]+"2.jpg";
}
}
// Preload the second image to be flipped
if (document.images) {
var flipped_again = new Array();
for(i=0; i< inames.length; i++) {
flipped_again[i] = new Image();
flipped_again[i].src = "images/"+inames[i]+"3.jpg";
}
}
// This function controls what happens when the user mouses over an image
function over(num) {
if(document.images) {
revert[num] = document.images[inames[num]].src;
document.images[inames[num]].src = flipped[num].src;
pausecomp(50);
document.images[inames[num]].src = flipped_again[num].src;
}
}
So you can see that it stores the original image name in the revert array to be switched back to when your mouseout. Then you flip the image name to the one stored in the flipped array , it pauses for 50ms and then it should flip to the image name in the flipped_again array.
It flips directly to the image name stored in flipped_again with the code above, if I comment out the line of code changing the image to flipped_again then it switches it to the image name stored in the flipped array.
I don't understand why it doesn't do this in sequence, any help or pointers would be appreciated...
Daragh
