Image Fade Menu

[versuch13]

Hi, ich bin seit Tagen auf der Suche nach einem leicht verständlichen Script für ein Menü welches Grafiken bei MouseOver einfadet und bei MouseOut wieder aus fadet.
Ich habe das Forum durchsucht, und da gibt es auch einige Beiträge, allerdings wurde das hier anscheinend nie richtig gelöst, höchstens für Einzelbilder, oder nur FadeIn bzw. FadeOut.

Jetzt habe ich bei DynamicDrive etwas gefunden.

http://www.dynamicdrive.com/dynamicindex4/highlightgrad.htm

Das habe ich mir etwas modifiziert, so dass die Bilder bei MouseOut auch wieder langsam ausgeblendet werden.
Allerdings ist das schon ein Wunder dass ich es soweit geschafft habe, denn ich habe eigentlich keine Ahnung von JavaScript.


Ok, wie gesagt eigentlich funktioniert es auch. Ich habe ein Menü erstellt mit drei Menüpunkten. Bei MouseOver wird als die Grafik welche mit opacity=0 über einer Hintergrundgrafik liegt eingeblendet und bei MouseOut wieder ausgeblendet.

Allerdings funktioniert das nur beschränkt, und zwar wenn man nach dem MouseOut solange wartet bis die Grafik wieder ausgeblendet ist und erst dann über einen weiteren Menüpunkt fährt. Wenn man also schnell alle Menüpunkten nacheinander überfährt funktioniert es nicht mehr.
Wäre wirklich sehr dankbar wenn mir da jemand weiterhelfen könnte, oder ein paar Tips geben kann was da falsch läuft.



So hier mal das Script in modifizierter Form.

<script language="JavaScript" type="text/javascript">
/***********************************************
* Gradual Highlight image script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
<!--

var baseopacity=0.9

function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",30)
}

function slowlow(which2){
cleartimer()
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
highlighting=setInterval("gradualfade2(imgobj)",30)
}

function instantset(degree){
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}

function gradualfade2(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity>0.1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)-0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity>1)
cur2.filters.alpha.opacity-=10
else if (window.highlighting)
clearInterval(highlighting)
}

//-->

</script>
<style type="text/css">
.menu {
    filter:alpha(opacity=0);
    -moz-opacity:0;
}
</style>

<img src="nav_news.gif" class="menu" onmouseover="slowhigh(this)" onmouseout="slowlow(this)" />
<img src="nav_dates.gif" class="menu" onmouseover="slowhigh(this)" onmouseout="slowlow(this)" />
<img src="nav_links.gif" class="menu" onmouseover="slowhigh(this)" onmouseout="slowlow(this)" />

Ich hänge einfach mal zusätzlich ein ZIP File an damit man sich das ansehen kann, einfach mal schnell mit der Maus von Menüpunkt zu Menüpunkt wechseln, wäre sehr nett wenn sich das mal wer ansieht.


Vielen Dank. Gruß