OnMouseOver Problem

Hi,

ich möchte ein “Menü” erstellen das per OnMouseOver funktioniert.

Css:

#tn1 {
display: none;
}
#tj1 {
display: block;
height: 100%;
width: 100%;
background-color: #f00;
}
#tn2 {
display: none;
}
#tj2 {
display: block;
height: 100%;
width: 100%;
background-color: #f00;
}
#tn3 {
display: none;
}
#tj3 {
display: block;
height: 100%;
width: 100%;
background-color: #f00;
}
#tn4 {
display: none;
}
#tj4 {
display: block;
height: 100%;
width: 100%;
background-color: #f00;
}

Html:



<a class="button gray"
  onMouseOver="tn1.id='tj1';
               tj2.id='tn2';
               tj3.id='tn3';
               tj4.id='tn4'">Home</a> 
	<a class="button gray"
  onMouseOver="tn2.id='tj2';
               tj1.id='tn1';
               tj3.id='tn3';
               tj4.id='tn4'">Bearbeiten</a> 
	<a class="button gray"
  onMouseOver="tn3.id='tj3';
               tj1.id='tn1';
               tj2.id='tn2';
               tj4.id='tn4'">Ansicht</a>
	<a class="button gray"
  onMouseOver="tn4.id='tj4';
               tj1.id='tn1';
               tj2.id='tn2';
               tj3.id='tn3'">Extras</a>
[...]
   
<div id="tn1"><img scr="..." /> | <img scr="..." /> | <img scr="..." /> | <img scr="..." /> | <img scr="..." /></div>
<div id="tn2"><img scr="..." /></div>
<div id="tn3"><img scr="..." /></div>
<div id="tn4"><img scr="..." /> <img scr="..." /> <img scr="..." /> <img scr="..." /> </div>

das Problem bei mir liegt daran, das wenn ich das so schreibe der auch alle Texte brav anzeigt wenn ich über die einzelnen Links gehe. Aber das Problem ist, das wenn ich über den nächsten fahre, (immer zusehen in der Kombi: Button “Extras” dann “Ansicht”) dort nimmt der die id von tj4 nimmer auf tn4. weiß jemand warum das so ist und wie ich mir da Abhilfe schaffen kann.

Ziel:
Maus geht über einen Link und ruft ein “Untermenü” auf. Dieses soll erscheinen. Dann geht man auf den nächsten Link und dort soll das “alte” Untermenü weggehen und das neue erscheinen.

mfg 99shi

warum machst es nicht mit css?
sind “tn2” etc. denn überhaupt irgendwo deklariert?
nimm doch statt der variablen einfach this (bzw. this.parentNode o.Ä.)
statt die ids zu wechseln würd ich auch empfehlen die (css)klassen zu wechseln

cheers

hmm… bräuchtest du nicht noch ein onMouseOut um das Menü wieder zu schliessen?

onmouseover gilt, wie der Name schon sagt, solange die Maus sich über dem Objekt befindet.

Mfg :wink2:

mit dem id gegen class austauschen hat es funktioniert (die Tags hab ich abgewandelt das es mehr unterscheide gibt).

Jetzt habe ich nur ein weiteres Problem. Ich benutze Opera. Das Problem ist, wenn ich Firefox benutze, das dort die Funktion “onclick” keine Funktion hat. Ich kann dort nichts mit bezwecken. Ich hab gelesen, das Firefox die Funktion nicht unterstützt.

Kann man eine andere Funktion wie z.B. “onmousedown” dafür verwende, welche auch im Firefox erkannt wird? Oder gibt es einen Trick mit dem man Firefox sagen kann das er etwas machen soll wenn man auf den Link klickt?

mfg 99shi

im firefox funktioniert onclick
bspw.

/edit: wenn du es ganz super “richtig” machen willst lässt du javascript geschichten aus attributen im html weg und fügst sie mit js erst zu :wink:

Wenn ich die Seite mit firefox 3.6.13 öffne, dann macht der leider nichts.
html:

[code] Statistiken

Statistiken
[/code]

css:

#f1j { display: block; position: absolute; top: 15%; left: 200px; width: 800px; height: 650px; background-image: url(/images/bg.png); background-repeat: repeat-x; z-index: 9999999; border: 8px solid #ACC7ED; } #f1n { display: none; }

dein Code ist genauso wie meiner Morpheus ich erkenne keinen unterschied. Aber trotzdem wenn ich die Seite mit dem Firefox öffne, macht der nichts wenn ich auf den Link “Statistiken” klicke.

Was kann man machen damit er es macht?

mfg 99shi

ist denn “f1n” irgendwo deklariert?
du meinst vermutlich document.getElementById(“f1n”)

und wie bereits erwähnt kannst auch this verwenden; in diesem falle wohl “this.parentNode.parentNode”

und installier dir mal eine javascript fehlerkonsole

cheers

ja f1n ist deffiniert im css code (siehe oben) und nein es soll nicht die selbe id genommen werden sondern die id eines divs weiter unten

Ich glaub dir fehlen ein wenig die Grundlagen.

Wenn du das DOM manipulieren willst tust du das mit JavaScript (JS).
Um per JS an ein Element “heranzukommen” über dessen ID verwendest du document.getElementById(" ~id des elements ")

ändern deinen Code einfach mal hierzu

Ob sich die ID eines Elements so in jedem Browser manipulieren lässt weiß ich nicht, notfalls .setAttribute(“id”, “~neueID”); - dient ja hier eh nur als Beispiel.