Guten Tag liebes Java Forum
Ich hab ein Problem, denn ich möchte eine Navigationsleiste mit einem Mouseover versehen. Bei Mouseover eines Menüpunktes soll ein Hintergrundbild des Buttons langsam sichtbar werden. Ich fand zufällig einen ganz praktischen Fader, der sowas mit jedem Browser Möglich macht, indem man einen Fade durch viele einzelne Pics vortäuscht. Doch spätestens beim zweiten Menüpunkt bemerkte ich, dass ich keine Navigationsleiste damit machen kann, sondern nur einen einzigen Menüpunkt. Denn wenn ich den zweiten Menüpunkt mache und mit der Maus darauf gehe, leuchtet dummerweise Menüpunkt1 auf. Was muss ich an dem Code ändern, bzw. muss ich jedesmal den Code neu einfügen und die Variablen ändern? Gibt es vll doch bessere Menüarten, sowas zu erzeugen?
Da ist der Code mit Beispiel:
The JavaScript Source: Navigation: Fading Rollover
Hier nochmal der Code im einzelnen:
Ich hab ein Problem, denn ich möchte eine Navigationsleiste mit einem Mouseover versehen. Bei Mouseover eines Menüpunktes soll ein Hintergrundbild des Buttons langsam sichtbar werden. Ich fand zufällig einen ganz praktischen Fader, der sowas mit jedem Browser Möglich macht, indem man einen Fade durch viele einzelne Pics vortäuscht. Doch spätestens beim zweiten Menüpunkt bemerkte ich, dass ich keine Navigationsleiste damit machen kann, sondern nur einen einzigen Menüpunkt. Denn wenn ich den zweiten Menüpunkt mache und mit der Maus darauf gehe, leuchtet dummerweise Menüpunkt1 auf. Was muss ich an dem Code ändern, bzw. muss ich jedesmal den Code neu einfügen und die Variablen ändern? Gibt es vll doch bessere Menüarten, sowas zu erzeugen?
Da ist der Code mit Beispiel:
The JavaScript Source: Navigation: Fading Rollover
Hier nochmal der Code im einzelnen:
Java:
var maximages = 7; // how many fade images do you have?
var fadespeed = 125; // 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] = "pictures/website/navi/buttonpics0.png";
fadearray[1] = "pictures/website/navi/buttonpics1.png";
fadearray[2] = "pictures/website/navi/buttonpics2.png";
fadearray[3] = "pictures/website/navi/buttonpics3.png";
fadearray[4] = "pictures/website/navi/buttonpics4.png";
fadearray[5] = "pictures/website/navi/buttonpics5.png";
fadearray[6] = "pictures/website/navi/buttonpics6.png";
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;
}
}