Grafiken werden nicht korrekt geladen

[Matthias Gröbner]

Hallo,

nachdem ich nun schon alles mögliche ausprobiert habe und auf
allen denkbaren Internetseiten keine Lösung/Erklärung meines
Problemes gefunden habe, wende ich mich nun an Euch.

Folgender Sachverhalt:
Auf meiner Homepage sollen mehrere Menüpunkte wählbar sein.
Die Menüpunkte sind als Grafiken jeweils in einen eigenen
div-Bereich eingebettet, hier ein Beispiel.

<div id="Hauptseite" style="position:absolute; top:86px; left:452px; width:147px;">
        <a href="javascript: inhalteLaden(0)"
            onclick="aktiv(0,'Bilder/menupunkt0_2')"
            onmouseover="wechsel(0,'Bilder/menupunkt0_1')"
            onmouseout="wechsel(0,'Bilder/menupunkt0')">
            <img src="Bilder/menupunkt0_2.gif" border="0" name="HauptseiteMenu">
        </a>
</div>

Wenn mit der Maus über einen Bereich gegangen wird, soll sich
das Aussehen des Buttons verändern. Das funktioniert auch
brav mit der javascript-Funktion "wechsel".

function wechsel(Menupunkt, Dateiname)
{
        if (document.images)
        {
                if(Menupunkt != AktiverPunkt)
                {
                        switch(Menupunkt)
                        {
                        case 0:
                            document.Hauptseite.document.images[0].src = Dateiname + ".gif";
                            break;
                        case 1:
                            document.Forschung.document.images[0].src = Dateiname + ".gif";
                            break;
                        case 2:
                            document.Arbeiten.document.images[0].src = Dateiname + ".gif";
                            break;
                        case 3:
                            document.Lehre.document.images[0].src = Dateiname + ".gif";
                            break;
                        case 4:
                            document.Privates.document.images[0].src = Dateiname + ".gif";
                            break;
                        default:
                            break;
                        }
                }
        }
}

Durch Anklicken eines Menüpunktes soll nun wiederum die Farbe
des Buttons geändert werden.
Hierbei gibt es Probleme, denn die Funktion "aktiv" ändert die
Grafik nur für den ersten ("Hauptseite") und den letzten Menüpunkt
("Privates"). In allen anderen Fällen wird die bestehende Grafik
durch nichts ersetzt, es wird also lediglich der weiße Hintergrund
gezeigt.

var AktiverPunkt=0;

function aktiv(Punkt, NeuesMenueBild)
{
    if (document.images)
    {
        if (AktiverPunkt != Punkt)
        {
                reset();

wechsel(Punkt, NeuesMenueBild);

AktiverPunkt = Punkt;
                return;
        }
    }
}

function reset()
{
    if(document.images)
    {
        document.Hauptseite.document.images[0].src = "Bilder/menupunkt0.gif"
        document.Forschung.document.images[0].src = "Bilder/menupunkt1.gif"
        document.Arbeiten.document.images[0].src = "Bilder/menupunkt2.gif"
        document.Lehre.document.images[0].src = "Bilder/menupunkt3.gif"
        document.Privates.document.images[0].src = "Bilder/menupunkt4.gif"
    }
}

Dieses Verhalten tritt mit Netscape auf und auch unter IE
(dann natürlich mit "document.all...").

Noch zu erwähnen ist vielleicht, daß ich die Grafiken
vorher in den Speicher lade mit

if (document.images)
{
        Grafik=new Array();

Grafik[0]=new Image(); Grafik[0].src="Bilder/menupunkt0.gif"
        Grafik[1]=new Image(); Grafik[1].src="Bilder/menupunkt0_1.gif"
        Grafik[2]=new Image(); Grafik[2].src="Bilder/menupunkt0_2.gif"
        Grafik[3]=new Image(); Grafik[3].src="Bilder/menupunkt1.gif"
        ...
}

Wo liegt der Fehler?

Das vollständige Listing bzw. die Homepage zum Testen findet
Ihr unter der angegebenen URL.

Danke für Tips und Lösungen
Matthias