fading rollover with multidimentional array

[messylife]

I am still learning javascript in my free time and only have limited knowledge of the coding right now. I was wondering if anyone could help me or point me in the right direction of converting the fading rollover script:

http://javascript.internet.com/navigation/fading-rollover.html

using multidimentional array so that i can have three differnent images each with their own fading rollover, cause i'm stumped. . .

Thanks in advance

[junhoe]

see... somehow nobody replied, I do have the same problem. as far as I am right now, there are only two ways for dumb people like us:
Setup a frameset and for every blooming button a new frame which is absolutely disgusting, or set the different additional values for fadearray (i.e. fadearray2, fadearray3, etc) as well as for fade-pic, fade-in and fade-out. The problem there is that the faster you move over the buttons (for example) they might not change back to the former image because the new load is in process...

Sorry, english is not my own language, I hope I made clear what I meant.

Hope, somebody does have a better idea!?

[junhoe]

I'm sure there is a better solution, but duplicate the script in the head-area as often as you need it for a button, and change the var by adding numeric devices.
i.E.:

in the script for the first button you use

var fadeintimer1;
var fadeouttimer1;
var fadeincount1 = 0;
var fadeoutcount1 = maximages-1;
var fadearray1 = new Array(maximages);

for the second button you modify to

var fadeintimer2;
var fadeouttimer2;
var fadeincount2 = 0;
var fadeoutcount2 = maximages-1;
var fadearray2 = new Array(maximages);

and so on... of course, within the several parts of the scripts these changes have to be done with all variables.

No more problems by mouseover or out.

Try it ( if you haven't found out by yourself...)

Example for the whole script:

Copy this in your head-area...

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var maximages = 11; // how many fade images do you have?
var fadespeed = 30; // fade frame time in milliseconds; 125 = 125 ms

var fadeintimer;
var fadeouttimer;
var fadeincount = 0;
var fadeoutcount = maximages-1;
var fadearray = new Array(maximages); // enter all the fade images here
// the first item should be 0, then numbered through 1 less than your maximages

fadearray[0] = "testbutton-0.gif";
fadearray[1] = "testbutton-1.gif";
fadearray[2] = "testbutton-2.gif";
fadearray[3] = "testbutton-3.gif";
fadearray[4] = "testbutton-4.gif";
fadearray[5] = "testbutton-5.gif";
fadearray[6] = "testbutton-6.gif";
fadearray[7] = "testbutton-7.gif";
fadearray[8] = "testbutton-8.gif";
fadearray[9] = "testbutton-9.gif";
fadearray[10] = "testbutton-full.gif";

for (var i = 0; i < maximages; i++) {
eval('pic' + i + ' = new Image();');
eval('pic' + i + '.src = fadearray[i];'); // preloads fade images
}
function fade_in() {
clearTimeout(fadeouttimer);
document.images['fade-pic'].src = fadearray[fadeincount];
if (fadeincount != maximages-1) {
fadeincount++;
fadeintimer = setTimeout('fade_in()', fadespeed);
}
else {
clearTimeout(fadeintimer);
fadeincount = 0;
}
}
function fade_out() {
clearTimeout(fadeintimer);
document.images['fade-pic'].src = fadearray[fadeoutcount];
if (fadeoutcount != 0) {
fadeoutcount--;
fadeouttimer = setTimeout('fade_out()', fadespeed);
}
else {
clearTimeout(fadeouttimer);
fadeoutcount = maximages-1;
}
}
// End -->
</script>

here begins the second script

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var maximages = 11; // how many fade images do you have?
var fadespeed = 30; // fade frame time in milliseconds; 125 = 125 ms

var fadeintimer2;
var fadeouttimer2;
var fadeincount2 = 0;
var fadeoutcount2 = maximages-1;
var fadearray2 = new Array(maximages); // enter all the fade images here
// the first item should be 0, then numbered through 1 less than your maximages

fadearray2[0] = "b2-0.gif";
fadearray2[1] = "b2-1.gif";
fadearray2[2] = "b2-2.gif";
fadearray2[3] = "b2-3.gif";
fadearray2[4] = "b2-4.gif";
fadearray2[5] = "b2-5.gif";
fadearray2[6] = "b2-6.gif";
fadearray2[7] = "b2-7.gif";
fadearray2[8] = "b2-8.gif";
fadearray2[9] = "b2-9.gif";
fadearray2[10] = "b2-full.gif";

for (var i = 0; i < maximages; i++) {
eval('pic' + i + ' = new Image();');
eval('pic' + i + '.src = fadearray2[i];'); // preloads fade images
}
function fade_in2() {
clearTimeout(fadeouttimer2);
document.images['fade-pic2'].src = fadearray2[fadeincount2];
if (fadeincount2 != maximages-1) {
fadeincount2++;
fadeintimer2 = setTimeout('fade_in2()', fadespeed);
}
else {
clearTimeout(fadeintimer2);
fadeincount2 = 0;
}
}
function fade_out2() {
clearTimeout(fadeintimer2);
document.images['fade-pic2'].src = fadearray2[fadeoutcount2];
if (fadeoutcount2 != 0) {
fadeoutcount2--;
fadeouttimer2 = setTimeout('fade_out2()', fadespeed);
}
else {
clearTimeout(fadeouttimer2);
fadeoutcount2 = maximages-1;
}
}
// End -->
</script>


</head>

<body bgcolor="#000000" marginwidth="0" marginheight="0" left-margin="0" top-margin="0">

<a href="http://javascriptsource.com" onmouseover="fade_in()" onmouseout="fade_out()">
<img name="fade-pic" height="39" width="96" border="0" src="testbutton-1.gif"><br>
</a>
<a href="http://javascriptsource.com" onmouseover="fade_in2()" onmouseout="fade_out2()">
<img name="fade-pic2" height="39" width="96" border="0" src="b2-1.gif">
</a>

</body>

It's a little bit of work, but it works out fine then...

---> and it looks good when it's done.