Gifs austauschen mit JavaScript - Fehler beim Reload der Seite

Loomis

Hallo!

Ich bin JavaScript-Neuling und habe mir jetzt ein paar kleine Funktionen geschrieben, die Gifs beim drüberfahren mit der Maus austauschen (Hover-Effekt).

Das funktioniert so weit auch, allerdings ergibt sich beim Reload der Seite im Browser ein Fehler (also, es ist eher ein Denkfehler, als ein Programmfehler ):

Es wird immer die aktuelle Seite in dem Menü mit einer besonderen Gif angezeigt, so dass der Nutzer gleich sieht, wo er sich befindet. Wenn er ne andere Seite ladet, wird ein anderer Menüpunkt hervorgehoben.

Wenn jetzt aber z.B. die Seite Events angezeigt wird, und der Nutzer drückt Refresh, dann wird immer noch Events angezeigt (soll j aauch so sein), aber hervorgehoben ist im Menü dann Home, weil die init()-Funktion die Variable fest mit home vorbelegt. Wie kann ich das einfach machen, dass auch beim Refresh der richtige Menüeintrag seine spezielle Gif anzeigt?

Danke schon ma im Voraus.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
		<TITLE>Navigationleiste</TITLE>
		<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<script language="JavaScript">
		<!--
		var fest;

		function init()
		{
			fest = 'home';
		}

		function changeFest( imgName )//Das Bild im Menü soll für die aktuelle Seite Blau bleiben
		{
			var zwischen = fest;
			fest = imgName;
			changeImage(zwischen, zwischen + "off.gif");
		}		

		function changeImage( imgName, imgFile )//Wechselt die Bilder des Menüs beim Drüberfahren mit dem Mauscursor
		{
			if( document.images && imgName != fest)
			document.images[imgName].src = imgFile;
		}

		//-->

</script>
	</HEAD>
	<BODY bgColor="#C0C0C0" text="#666666" vLink="#ff0000" aLink="#ff0000" link="#ff0000" onLoad="init()">

		<FONT face="Verdana"><FONT size="-1"></FONT></FONT>&nbsp;
		<BR>
		<FONT face="Verdana"><FONT size="-1"></FONT></FONT>&nbsp;
		<TABLE cellSpacing="0" cellPadding="0">
			<TBODY>
				<TR>
					<TD vAlign="middle" align="right"><IMG height="11" src="dreieck.jpg" width="10" border="0" NOSAVE></TD>
					<TD><A href="inhalt.htm" onMouseOver="changeImage('home','homeon.gif')" onMouseOut="changeImage('home','homeoff.gif')" onClick="changeFest('home')" target="inhalt"><IMG name="home" height="16" alt="" src="homeon.gif" width="125" border="0"></A></TD>
				</TR>
				<TR>
					<TD vAlign="middle" align="right"><IMG height="11" src="dreieck.jpg" width="10" border="0" NOSAVE></TD>
					<TD><A href="events.htm" onMouseOver="changeImage('events','eventson.gif')" onMouseOut="changeImage('events','eventsoff.gif')" onClick="changeFest('events')" target="inhalt"><IMG name="events" height="16" alt="" src="eventsoff.gif" width="125" border="0"></A></TD>
				</TR>
				<TR>
					<TD vAlign="middle" align="right"><IMG height="11" src="dreieck.jpg" width="10" border="0" NOSAVE></TD>
					<TD><A href="cafe.htm" onMouseOver="changeImage('cafe','cafeon.gif')" onMouseOut="changeImage('cafe','cafeoff.gif')" onClick="changeFest('cafe')" target="inhalt"><IMG name="cafe" height="16" alt="" src="cafeoff.gif" width="125" border="0"></A></TD>
				</TR>

			</TBODY>
</TABLE>

	</BODY>
</HTML>

Ich habe den Code jetzt mal sinngemäß gekürzt, sonst wird das hier ja etwas zu viel.

AJ

Hmmm du könntest z. B. eine Funktion beim Laden deiner Detailseiten aufrufen, die den Status umbiegt.

Loomis

Muss ich dann die Funktion in die Detailseiten schreiben, und die greifen dann auf die Variable "fest", die ich jetzt schon habe zu?

AJ

Nö kannst die Funktion da hinschreiben, wo du auch init() hast und sie dann ansprechen.

Ich vermute mal du hast Frames und deine Funktion init() befindet sich im menü-frame o. ä. Wenn dem so ist, dann kannst du die Funktion z. B. so ansprechen:

parent.menu.setzeFest('event');

Loomis

Ich habe das jetzt so gemacht:

<BODY onLoad="parent.nav.changeFest('events')">

meine Datei heisst nav.htm. Müsste das dann so gehen, oder muss ich irgendwie über name="" nen Namen für das Menü festlegen, der dann mit parent.menu angesprochen wird?

AJ

Ja das musst du über name="" machen und zwar bei deinem <frame> für die navigation:

...
<frame name="nav" src="nav.htm">
...