Problem mit JavaScript Menü

K

Kopfballstar

Erfahrenes Mitglied
Hallo,
ich benutze ein JavaScript für ein Menü.
Drückt man auf einen Menüpunkt(1) erscheint darunter ein Sub Menü(2) mit weiteren Punkten.
Für (1) und (2) existiert eine Funktion welche bei einem MouseOver/Out/Down, je nach Situation das *.gif austauscht, wie von fast jeder Site
halt bekannt.
Bei (1) klappt das herrvoragend, bei (2) aber gar nicht.
Habe einiges probiert, die Pfadangaben sind richtig, teste ich es in (2) mit einem Alert("Test") reagiert der Alert auch auf MouseOver/Out/Down,
aber die Images werden einfach nicht ausgetauscht.
Und jetzt weiß ich einfach nicht mehr weiter.
Vielleicht könnt ihr mir ja einen Tip geben?

<a href="http://www.gm.fh-koeln.de/~mi011/Homepage_eufh/index.html">Link</a>

P.S.: Funktionalität ist momentan nur für den Punkt "Profil" gegeben. Dort sollte das SubMenü funktionieren.

<html>
<head>
<title>navi</title>

<script src="variablen.js" type="text/javascript">
</script>

<script type="text/javascript">
<!--

function show(divid) {

document.getElementById("profil1").style.display="none";
document.getElementById("studium1").style.display="none";
document.getElementById("kooperationspartner1").style.display="none";
document.getElementById("studiengange1").style.display="none";
document.getElementById("softskills1").style.display="none";
document.getElementById("team1").style.display="none";
document.getElementById("bewerbung1").style.display="none";
document.getElementById("presse1").style.display="none";
document.getElementById("kontakt1").style.display="none";
document.getElementById("anfahrt1").style.display="none";

document.getElementById(divid).style.display="inline";
}
//-->
</script>

<script type="text/javascript">
<!--
function over(imgname,imgsrc,imgsrc2,imgsrc3,effekt,position)
{
if (effekt=='over')
{
document[imgname].src=imgsrc2;
}
if (effekt=='down')
{
down10=position;
document['profil'].src='profil.gif';
document['studium'].src='studium.gif';
document['kooperationspartner'].src='kooperationspartner.gif';
document['softskills'].src='softskills.gif';
document['studiengange'].src='studiengange.gif';
document['team'].src='team.gif';
document['presse'].src='presse.gif';
document['bewerbung'].src='bewerbung.gif';
document['kontakt'].src='kontakt.gif';
document['anfahrt'].src='anfahrt.gif';

document[imgname].src=imgsrc3;
}
if (effekt=='out')
{
if (position == down10)
{
document[imgname].src=imgsrc3;

}
if (position != down10)
{

document[imgname].src=imgsrc;
}
}
}
//-->
</script>

<script type="text/javascript">
<!--
function subOver(imgname,imgsrc,imgsrc2,imgsrc3,effekt,position)
{
if (effekt=='over')
{

document[imgname].src=imgsrc2;
}
if (effekt=='down')
{
down9=position;
document['konzept'].src='sub/konzept_down.gif';
document['pluspunkte'].src='sub/pluspunkte_down.gif';
document['historie'].src='sub/historie_down.gif';

document[imgname].src=imgsrc3;
}

if (effekt=='out')
{

if (position == down9)
{
document[imgname].src=imgsrc3;

}
if (position != down9)
{

document[imgname].src=imgsrc;
}
}
}
//-->
</script>


</head>
<body bgcolor="#E19F11" background="navi_background.gif">

<div id="main" style="position:absolute; left: 5; top:0; width:130; height:450 color=#aaaaaa" >


<div id="1b" style=" left:0; top:0; width:165; height:20;">
<a href="#" onclick="show('profil1')" ><img src="profil.gif" name="profil" border="0" onMouseOver="over('profil','profil.gif','profil_over.gif','profil_down.gif','over',1)" onMouseOut="over('profil','profil.gif','profil_over.gif','profil_down.gif','out',1)" onMouseDown="over('profil','profil.gif','profil_over.gif','profil_down.gif','down',1)" ></a>
</div>
<div id="profil1" style="display:none">
<a href="konzept/konzept_index.html" target="Hauptframe" ><img src="sub/konzept.gif" name="konzept" border="0" onMouseOver="subOver('konzept','sub/konzept.gif','sub/konzept_over.gif','sub/konzept_down.gif','over',1)" onMouseOut="subOver('konzept','sub/konzept.gif','sub/konzept_over.gif','sub/konzept_down.gif','out',1)" onMouseDown="subOver('konzept','sub/konzept.gif','sub/konzept_over.gif','sub/konzept_down.gif','down',1)" border="0"></a>
<a href="pluspunkte/pluspunkte_index.html" target="Hauptframe" ><img src="sub/pluspunkte.gif" name="pluspunkte" border="0" onMouseOver="subOver('pluspunkte','sub/pluspunkte.gif','sub/pluspunkte_over.gif','sub/pluspunkte_down.gif','over',2)" onMouseOut="subOver('pluspunkte','sub/pluspunkte.gif','sub/pluspunkte_over.gif','sub/pluspunkte_down.gif','out',2)" onMouseDown="subOver('pluspunkte','sub/pluspunkte.gif','sub/pluspunkte_over.gif','sub/pluspunkte_down.gif','down',2)" border="0"></a>
<a href="historie/historie_index.html" target="Hauptframe" ><img src="sub/historie.gif" name="historie" border="0" onMouseOver="subOver('historie','sub/historie.gif','sub/historie_over.gif','sub/historie_down.gif','over',3)" onMouseOut="subOver('historie','sub/historie.gif','sub/historie_over.gif','sub/historie_down.gif','out',3)" onMouseDown="subOver('historie','sub/historie.gif','sub/historie_over.gif','sub/historie_down.gif','down',3)" border="0"></a>
</div>
.
.
.
.
.
.</html>
 
Hi,

ich habe Dein Script jetzt zugegebenermaßen nicht getestet, aber warum nimmst Du für die Bildobjekte nicht einfach auch
PHP: 
document.getElementById("bildname");
statt
PHP: 
document["bildname"];
? Damit werden die Objekte eigentlich immer gefunden...

Gruß
 
Hi,

In dem Script sind (soweit ich sehen kann) so viele Fehler enthalten (z.B. doppelte border-Attribute in den Bildern, Variablen, die nicht immer initialisiert werden, sollen ausgelesen werden [z.B. down9/down10]), dass ich auf Anhieb nicht sagen kann, was nun genau passiert (passieren soll).

Schau doch mal, was der Explorer Dir für JS-Fehlermeldungen gibt und korrigiere die entsprechenden Stellen.
Dann teste, ob die Funktion subOver auch korrekt aufgerufen wird (z.B. mit alert).
Ansonsten änder mal (wie gesagt) die Bildadressierung in "getElementById".

So im Moment ist eine Fehlersuche recht aufwendig, zumal sowohl die Bilder als auch Codefragmente fehlen.

Gruß
 
Wie gesagt, teste ich es mit alert dann funktionieren MouseOver/Out/Down.

Der IE gibt keine Fehlermeldung aus.

Der doppelte Border Fehler wurde behoben, leider funktionierts nach wie vor nicht.

down9/10 sind globale Variablen aus einer externen Datei
 
Ok, dann schreib doch mal in die Funktion subOver folgendes:
PHP: 
alert(document['konzept']);
alert(document.getElementById('konzept'));
(ggf. auch mit den anderen Bildern)

Was gibt der Browser aus?

Ich glaube, es bringt hier mehr, wenn Du es testest, da Dir alle Dateien und Codeteile vorliegen.

Gruß

P.S.: normalerweise würde ich denken, ein Aufruf mit "document[something]" schlägt fehl, wenn das entsprechende Objekt in einem DIV liegt.. bin mir aber nicht sicher, da das Dinge sind, die ich mir in der Regel nicht merke ;)
 
Zuletzt bearbeitet:
... wenn die Objekte erkannt werden, könnte ich mir höchstens vorstellen, dass ein Problem mit der Pfadangabe der Bilddateien besteht. (ratlosigkeit)

Vielleicht erkennt ja jemand anders den Fehler

Gruß
 
Du hast die Bildernamen mehrmals vergeben.... wenn das Skript bspw. document.konzept ändern soll, dann hat es davon 10 Stück zur Auswahl....und es nimmt halt nicht das von dir gewünschte.

Du solltest:
  • Wenn du ein Bilder per Namen ansprechen willst, diesen Namen nur einmal vergeben
  • Auf das auslösende Bild besser per "this"zugreifen.
  • Das Ganze noch einmal überdenken...bereits bei dem ersten Menupunkt ist das Skript dermassen aufgeblasen, dass du wohl, wenn du so weitermachst, locker 100KB Skriptcode zusammenbekommst...von den ganzen Aufrufen der Funktionen ganz zu schweigen.
    Deshalb....
    1. Mache dir die DOM-Methoden zunutze, um auf die einzelnen Elemente(Nodes)zuzugreifen. das spart dir die Angabe der ganzen Bildernamen und <div>-IDs.
    2. Benutze die String-Funktionen....da die einzelnen Grafiken nach dem selben Schema benannt sind(_over,_down), sollte es per Skript möglich sein, die URL der anzuzeigenden Grafik zu "generieren"...das spart dir, diesen als Parameter übergeben zu müssen.
    3. Versuche, die Funktionsaufrufe "dynamisch" zu erzeugen....man kann einen Event auch per Skript auf ein Seitenelement legen(momentan musst du 40mal schreiben-->onmouseover=...,onmouseout=...,onclick=...)
  • Dann wäre vielleicht noch überlegenswert, komplett auf die Bilder zu verzichten... das sollte sich auch ohne diese mit HTML und CSS nachstellen lassen
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück