JS-Navigation,Farbwecchsel des gewählten Feldes

Computer: Software & Programmierung JavaScript & Script-Sprachen
1

Hey Ihrs,
hab da ein Problem mit meiner JavaScript Navigation.
Also hab da eine Navigation erstellt, die folgendermaßen ausschaut:

Head:

<!–

function chgBgCol(id,farbe) {
if (document.all)
document.all[id].style.backgroundColor=farbe;
else
if (document.getElementById)
document.getElementById(id).style.backgroundColor=farbe;
else
//if (document.layers)
// document.layers[id].bgColor=farbe;
void(0);
}
//–>

Body:

   TEST

 Unternehmensprofil</a></font></td></tr>
</tr>

<td colspan=„2“><img src="" width=„1“ height=„2“ alt="" border=„0“></td>
<tr bgcolor="#BBBBBB">
<td onclick=„window.location.href=‚home.html‘;“ onmouseover=„chgBgCol(‚home‘,’#888888’);“ onmouseout=„chgBgCol(‚home‘,’#BBBBBB’);“ height=„16“ id=„home“> <font face=Arial size=-1>   
<a href=„javascript:ZweiFrames(‚navi_erweitert1.html‘,‚links‘,‚home.html‘,‚rechts‘)“ style=„text-decoration: none“>Home</a></font></td>
</tr>

<td colspan=„2“><img src="" width=„1“ height=„2“ alt="" border=„0“></td>
<tr bgcolor="#BBBBBB">
<td onclick=„window.location.href=‚unternehmen.html‘;“ onmouseover=„chgBgCol(‚unternehmen‘,’#888888’);“ onmouseout=„chgBgCol(‚unternehmen‘,’#BBBBBB’);“ height=„16“ id =„unternehmen“> <font face=Arial size=-1>   
<a href=„javascript:ZweiFrames(‚navi_erweitert1.html‘,‚links‘,‚unternehmen.html‘,‚rechts‘)“ style=„text-decoration: none“>Unternehmen</a></font></td>
</tr>

<td colspan=„2“><img src="" width=„1“ height=„2“ alt="" border=„0“></td>
<tr bgcolor="#BBBBBB">
<td onclick=„window.location.href=‚standort.html‘;“ onmouseover=„chgBgCol(‚standort‘,’#888888’);“ onmouseout=„chgBgCol(‚standort‘,’#BBBBBB’);“ height=„16“ id =„standort“> <font face=Arial size=-1>   
<a href=„javascript:ZweiFrames(‚navi_erweitert1.html‘,‚links‘,‚standort.html‘,‚rechts‘)“ style=„text-decoration: none“>Standort</a></font></td>
</tr>

<td colspan=„2“><img src="" width=„1“ height=„2“ alt="" border=„0“></td>
<tr bgcolor="#BBBBBB">
<td onclick=„window.location.href=‚partner.html‘;“ onmouseover=„chgBgCol(‚partner‘,’#888888’);“ onmouseout=„chgBgCol(‚partner‘,’#BBBBBB’);“ height=„16“ id =„partner“> <font face=Arial size=-1>   
<a href=„javascript:ZweiFrames(‚navi_erweitert1.html‘,‚links‘,‚partner.html‘,‚rechts‘)“ style=„text-decoration: none“&gt:stuck_out_tongue_winking_eye:artner</a></font></td>
</tr>

<td colspan=„2“><img src="" width=„1“ height=„2“ alt="" border=„0“></td>
<tr bgcolor="#BBBBBB">
<td onclick=„window.location.href=‚agbs.html‘;“ onmouseover=„chgBgCol(‚agbs‘,’#888888’);“ onmouseout=„chgBgCol(‚agbs‘,’#BBBBBB’);“ height=„16“ id =„agbs“> <font face=Arial size=-1>   
<a href=„javascript:ZweiFrames(‚navi_erweitert1.html‘,‚links‘,‚agbs.html‘,‚rechts‘)“ style=„text-decoration: none“>AGB’s</a></font></td>
</tr>

<td colspan=„2“><img src="" width=„1“ height=„2“ alt="" border=„0“></td>
<tr bgcolor="#BBBBBB">
<td onclick=„window.location.href=‚referenzen.html‘;“ onmouseover=„chgBgCol(‚referenzen‘,’#888888’);“ onmouseout=„chgBgCol(‚referenzen‘,’#BBBBBB’);“ height=„16“ id =„referenzen“> <font face=Arial size=-1>
<a href=„javascript:ZweiFrames(‚navi_erweitert1.html‘,‚links‘,‚referenzen.html‘,‚rechts‘)“ style=„text-decoration: none“>Referenzen</a></font></td> </tr>

<td colspan=„2“><img src="" width=„1“ height=„2“ alt="" border=„0“></td>
<tr bgcolor="#BBBBBB">
<td onclick=„window.location.href=‚jobs.html‘;“ onmouseover=„chgBgCol(‚jobs‘,’#888888’);“ onmouseout=„chgBgCol(‚jobs‘,’#BBBBBB’);“ height=„16“ id =„jobs“> <font face=Arial size=-1>
<a href="javascript:ZweiFrames(‚navi_erweitert1.html‘,‚links‘,‚jobs.html‘,‚rechts‘)"style=„text-decoration: none“>Jobs</a></font></td>
</tr>

<td colspan=„2“><img src="" width=„1“ height=„2“ alt="" border=„0“></td>
<tr bgcolor="#BBBBBB">
<td onclick=„window.location.href=‚fachkräfte.html‘;“ onmouseover=„chgBgCol(‚fachkräfte‘,’#888888’);“ onmouseout=„chgBgCol(‚fachkräfte‘,’#BBBBBB’);“ height=„16“ id =„fachkräfte“> 
<a href="javascript:ZweiFrames(‚navi_erweitert1.html‘,‚links‘,‚fachkräfte.html‘,‚rechts‘)"style=„text-decoration: none“><font face=Arial size=-1 >    Fachkräfte</a></font></td>
</tr>

<td colspan=„2“><img src="" width=„1“ height=„2“ alt="" border=„0“></td>
<tr bgcolor="#BBBBBB">
<td onclick=„window.location.href=‚ausbildung.html‘;“ onmouseover=„chgBgCol(‚ausbildung‘,’#888888’);“ onmouseout=„chgBgCol(‚ausbildung‘,’#BBBBBB’);“ height=„16“ id =„ausbildung“> <font face=Arial size=-1>     </font>
<a href="javascript:ZweiFrames(‚navi_erweitert1.html‘,‚links‘,‚ausbildung.html‘,‚rechts‘)"style=„text-decoration: none“><font face=Arial size=-1 >Ausbildung</font></a></td>
</tr>

<td colspan=„2“><img src="" width=„1“ height=„2“ alt="" border=„0“></td>
<tr bgcolor="#BBBBBB">
<td onclick=„window.location.href=‚praktikum.html‘;“ onmouseover=„chgBgCol(‚praktikum‘,’#888888’);“ onmouseout=„chgBgCol(‚praktikum‘,’#BBBBBB’);“ height=„16“ id =„praktikum“>   <font face=Arial size=-1>   </font>
<a href=„javascript:ZweiFrames(‚navi_erweitert1.html‘,‚links‘,‚praktikum.html‘,‚rechts‘)„style=„text-decoration: none“><font face=Arial size=-1 &gt:stuck_out_tongue_winking_eye:raktikum</font></a></td>
</tr>
<tr>
<td colspan=„2“><img src=„pixel.gif“ width=„1“ height=„2“ alt=““ border=„0“></td>
</tr>
</tr>
<tr>
<td width=„12“><img src=„pixel.gif“ width=„1“ height=„4“ alt="" border=„0“></td>
</tr>
</table>

Das Ganze funktioniert soweit super!

Nur ich möchte jetzt:

  1. das beim Klicken auf einen Menüpunkt die Hintergrundfarbe von diesem Punkt von hellgrau in dunkelgrau wechselt, so das der User sieht welche Seite gerade angezeigt wird und

2.das auch beim Klicken auf das Feld (td), nicht nur auf die Schrift, die Verlinkung funktioniert…

Geht das irgendwie??

MfG Sabine L.

2

Das Ganze funktioniert soweit super!

Nur ich möchte jetzt:

  1. das beim Klicken auf einen Menüpunkt die Hintergrundfarbe
    von diesem Punkt von hellgrau in dunkelgrau wechselt, so das
    der User sieht welche Seite gerade angezeigt wird und

Mit anderen Worten willst du verhindern, dass der Mouse Out Effekt auftritt, wenn auf einen Link geklickt wurde…
Das ist sehr einfach möglich. Man muss jedoch bedenken, dass durch einen mausklick grau gefärbte TD, wieder hellgrau gefärbt werden muss, sobald ein anderer Link angewählt wird. Ich hab deinen skript deshalb erweitert.
Eine globale Variable und eine weitere If Abfrage in deiner Methode:

ausgewaehlt="";
function chgBgCol(id,farbe) {

if(id!=ausgewaehlt)
{
if (document.all)
document.all[id].style.backgroundColor=farbe;
else
if (document.getElementById)
document.getElementById(id).style.backgroundColor=farbe;
else
//if (document.layers)
// document.layers[id].bgColor=farbe;
void(0);
}
}

Hat sich nicht viel geändert wie du siehst. Anhand der Variable ausgewaehlt merkt sich das Skript, welcher Link zuletzt angeklickt wurde. Für diesen wird keine Over und Out Effekt durchgeführt. Diese Variable muss natürlich auch aktualisiert werden. Dafür habe ich eine Funktoion hinzugefügt.

function klicken(id)
{
//Alte markierte tabellenzelle merken
alt=ausgewaehlt;

//Neu gewaehlte Tabellenzelle in der zentralen Variable speichern
ausgewaehlt=id;

//Alte ausgewählte Tabellenzelle wieder hellgrau färben
if(alt!="")
{chgBgCol(alt,’#BBBBBB’);}
}

Diese Funktion soll ausgeführt werden, wenn auf einen Link geklickt wird. Sie schreibt den zuletzt angeklickten link (genauer die td id) in die variable ausgewaehlt. Dazu setzt sie noch die zuvor ausgewählte td zurück. Sonst bliebe die ja auch dunkelgrau.
Die Methode muss also bei den Textlinks aufgerufen werden. Als Parameter muss man wie bei der chgBgCol Methode den id namen der td übergeben. Also musst du den Methodenaufruf bei jedem Textlink hinter deine ZweiFrame Methode einfügen und ggf. auch in den OnClick Event Handler deiner TD schreiben. Hier beispielhaft für die Table Row des Home Bereichs

[Home](javascript:ZweiFrames(‚navi_erweitert1.html‘,‚links‘,‚home.html‘,‚rechts‘);klicken(‚home‘):wink:

Einfach, aber es funktioniert.

2.das auch beim Klicken auf das Feld (td), nicht nur auf die
Schrift, die Verlinkung funktioniert…

In neuen Internet Explorer und Netscape Versionen funktionieren deine Event Handler des td-Tags. In älteren oder anderen Browsern ist das aber vermutlich nicht möglich.
Gruß DP

3

Also ich habe das jetzt mal ausprobiert…
Aber TD’s werden nicht dunkelgrau!
Habs genauso wie vorgeschlagen…100%!

Wo wird denn dem TD die Farbe dunkelgrau zugewiesen???
Oder soll die Farbe vom onmouseover gemerkt werden???

MfG Sabine L.

Mit anderen Worten willst du verhindern, dass der Mouse Out
Effekt auftritt, wenn auf einen Link geklickt wurde…
Das ist sehr einfach möglich. Man muss jedoch bedenken, dass
durch einen mausklick grau gefärbte TD, wieder hellgrau
gefärbt werden muss, sobald ein anderer Link angewählt wird.
Ich hab deinen skript deshalb erweitert.
Eine globale Variable und eine weitere If Abfrage in deiner
Methode:

ausgewaehlt="";
function chgBgCol(id,farbe) {

if(id!=ausgewaehlt)
{
if (document.all)
document.all[id].style.backgroundColor=farbe;
else
if (document.getElementById)
document.getElementById(id).style.backgroundColor=farbe;
else
//if (document.layers)
// document.layers[id].bgColor=farbe;
void(0);
}
}

Hat sich nicht viel geändert wie du siehst. Anhand der
Variable ausgewaehlt merkt sich das Skript, welcher Link
zuletzt angeklickt wurde. Für diesen wird keine Over und Out
Effekt durchgeführt. Diese Variable muss natürlich auch
aktualisiert werden. Dafür habe ich eine Funktoion
hinzugefügt.

function klicken(id)
{
//Alte markierte tabellenzelle merken
alt=ausgewaehlt;

//Neu gewaehlte Tabellenzelle in der zentralen Variable
speichern
ausgewaehlt=id;

//Alte ausgewählte Tabellenzelle wieder hellgrau färben
if(alt!="")
{chgBgCol(alt,’#BBBBBB’);}
}

Diese Funktion soll ausgeführt werden, wenn auf einen Link
geklickt wird. Sie schreibt den zuletzt angeklickten link
(genauer die td id) in die variable ausgewaehlt. Dazu setzt
sie noch die zuvor ausgewählte td zurück. Sonst bliebe die ja
auch dunkelgrau.
Die Methode muss also bei den Textlinks aufgerufen werden. Als
Parameter muss man wie bei der chgBgCol Methode den id namen
der td übergeben. Also musst du den Methodenaufruf bei jedem
Textlink hinter deine ZweiFrame Methode einfügen und ggf. auch
in den OnClick Event Handler deiner TD schreiben. Hier
beispielhaft für die Table Row des Home Bereichs

Home

Einfach, aber es funktioniert.

2.das auch beim Klicken auf das Feld (td), nicht nur auf die
Schrift, die Verlinkung funktioniert…

In neuen Internet Explorer und Netscape Versionen
funktionieren deine Event Handler des td-Tags. In älteren oder
anderen Browsern ist das aber vermutlich nicht möglich.
Gruß DP

4

Also ich habe das jetzt mal ausprobiert…
Aber TD’s werden nicht dunkelgrau!
Habs genauso wie vorgeschlagen…100%!

Wo wird denn dem TD die Farbe dunkelgrau zugewiesen???
Oder soll die Farbe vom onmouseover gemerkt werden???

Anbei mal deine Seite umgebaut. Hab die Verlinkung der Textlinks rausgenommen und die Einträge der Übersichtlichkeit reduziert. Getestet in IE6 und NS7
Zu deiner Frage, die klicken-Funktion verwendet deine Funktion um td ggf. wieder hellgrau erscheinen zu lassen. Beim Klick wird der MouseOver Effekt erhalten und nicht bei MouseOut wieder zurückgesetzt.
Gruß DP

testseite…
__________________

<!–
ausgewaehlt="";

function chgBgCol(id,farbe) {

if(id!=ausgewaehlt)
{
if (document.all)
document.all[id].style.backgroundColor=farbe;
else
if (document.getElementById)
document.getElementById(id).style.backgroundColor=farbe;
else
//if (document.layers)
// document.layers[id].bgColor=farbe;
void(0);

}
}

function klicken(id)
{
//Alte markierte tabellenzelle merken
alt=ausgewaehlt;

//Neu gewaehlte Tabellenzelle in der zentralen Variable speichern
ausgewaehlt=id;

//Alte ausgewählte Tabellenzelle wieder hellgrau färben
if(alt!="")
{chgBgCol(alt,’#BBBBBB’);}
}
–>

TEST

[Home](javascript:klicken(‚home‘):wink:

[Unternehmen](javascript:klicken(‚unternehmen‘):wink:

[Standort](javascript:klicken(‚standort‘):wink:

[Partner](javascript:klicken(‚partner‘):wink:

5

Geht nicht :frowning:
Guten Morgen!

Also hab das Ganze wie vorgeschlagen, aber es kommt beim onmouseover der fehler ‚ausgewaehlt undefiniert‘

Hab da einen Verdacht… ich habe ja nicht nur hellgraue td’s, die dunkelgrau werden sollen, sondern auch grüne td’s die dunkelgrau werden sollen.

Kann das sein das sich das mit dem vorgeschlagenen beist??

MfG Sabine L.

Anbei mal deine Seite umgebaut. Hab die Verlinkung der
Textlinks rausgenommen und die Einträge der Übersichtlichkeit
reduziert. Getestet in IE6 und NS7
Zu deiner Frage, die klicken-Funktion verwendet deine Funktion
um td ggf. wieder hellgrau erscheinen zu lassen. Beim Klick
wird der MouseOver Effekt erhalten und nicht bei MouseOut
wieder zurückgesetzt.
Gruß DP

6

Re: Geht nicht :frowning:

Guten Morgen!

Also hab das Ganze wie vorgeschlagen, aber es kommt beim
onmouseover der fehler ‚ausgewaehlt undefiniert‘

Hast du die Variable zentral im Seitenkopf initalisiert?
Funktioniert das Beispiel bei dir den?

Hab da einen Verdacht… ich habe ja nicht nur hellgraue td’s,
die dunkelgrau werden sollen, sondern auch grüne td’s die
dunkelgrau werden sollen.
Kann das sein das sich das mit dem vorgeschlagenen beist??

Sollte eigentlich kein Problem sein, die klicken Methode üperprüft ja nicht welche Farbe die td aktuell hat. Das einzige Problem was ich sehe ist, ich wusste ja nicht das die TDs unterschiedliche Farben haben, deshalb setzt die Methode klicken die aktivierten TDs immer in Hellgrau zurück, wenn ein anderer Link angeklickt wird. Das könnte man aber beheben, wenn man eine weitere Variable einführt, die sich die Normalfarbe des aktuell umgefärbten TDs merkt.
Gruß DP

<!–
ausgewaehlt="";

function chgBgCol(id,farbe) {

if(id!=ausgewaehlt)
{
if (document.all)
document.all[id].style.backgroundColor=farbe;
else
if (document.getElementById)
document.getElementById(id).style.backgroundColor=farbe;
else
//if (document.layers)
// document.layers[id].bgColor=farbe;
void(0);

}
}

function klicken(id)
{
//Alte markierte tabellenzelle merken
alt=ausgewaehlt;

//Neu gewaehlte Tabellenzelle in der zentralen Variable speichern
ausgewaehlt=id;

//Alte ausgewählte Tabellenzelle wieder hellgrau färben
if(alt!="")
{chgBgCol(alt,’#BBBBBB’);}
}
–>

TEST

[Home](javascript:klicken(‚home‘):wink:

[Unternehmen](javascript:klicken(‚unternehmen‘):wink:

[Standort](javascript:klicken(‚standort‘):wink:

[Partner](javascript:klicken(‚partner‘):wink:

7

Es geht!:smile:

Hast du die Variable zentral im Seitenkopf initalisiert?

Jetzt schon ja :smile: Hatte das bei meiner ersten Navigation vergessen…sorry

Funktioniert das Beispiel bei dir den?

Das Beispiel funzt logo!*G*

MfG Sabine L.

8

geht leider doch nicht :frowning:
mh sorry geht doch nicht…
habs nochmal geprüft und musste feststellen, das jetzt zwar keine Fehlermeldung mehr kommt, aber die TD’s bleiben nicht dunkelgrau wenn ich drauf klicke…

frage:in der function klicken(id), bei //Alte ausgewählte Tabellenzelle wieder hellgrau färben, steht ja logischerweise hellgrau…muss das hellgrau (’#BBBBBB’) dann auch bei OnMouseOut stehen? ja oder?

MfG Sabine L.

9

Hilfe
Kann es sein, das es damit zusammenhängt, das sich ja beim Klicken auf ein TD in der ersten Navigation, eine zweite Navigation öffnet!?

kommt es evtl. deshalb nicht zum dunkelgrau färben des TD?
(function klicken und dazugehörige body anweisung stehen aber in BEIDEN Navigationen!)

MfG Sabine L.

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

10

frage:in der function klicken(id), bei //Alte ausgewählte Tabellenzelle wieder hellgrau färben, steht ja logischerweise hellgrau…muss das hellgrau (’#BBBBBB’) dann auch bei OnMouseOut stehen? ja oder?

Ja, deshalb ja dieser Event Handler.
onmouseout=„chgBgCol(‚unternehmen‘,’#BBBBBB’);“

Kann es sein, das es damit zusammenhängt, das sich ja beim
Klicken auf ein TD in der ersten Navigation, eine zweite
Navigation öffnet!?

Du lädst eine neue Seite in den Frame mit der Navigation?
Na klar dann gehen die Änderungen der Seite und die Variablen verloren.
Aber warum willst du immer noch die Navigation neu laden, wo du doch jetzt ein Frameset benutzt und die Over und Pressed Zustände mit JavaScript hinbekommst?
Wenn du trotzdem dabei bleiben willst musst du bei der neu zu ladenen Navigation halt darauf achten, dass diese beim Laden im richtigen Zustand ist. Also z.B. man klickt auf Unternehmen, dann sollte die neu geladene Navi für Unternehmen gleich beim Start eine dunkelgrau hinterlegte Unternehmens-TD haben usw.
Gruß DP

11

Ich will die neue Navigation nicht wegen dem pressed oder dem over laden, sondern weil die zweite Navigation mehr Punkte enthält bzw. Unterpunkte enthält…die erste wird sozusagen erweitert.

Aber warum willst du immer noch die Navigation neu laden, wo
du doch jetzt ein Frameset benutzt und die Over und Pressed
Zustände mit JavaScript hinbekommst?
Wenn du trotzdem dabei bleiben willst musst du bei der neu zu
ladenen Navigation halt darauf achten, dass diese beim Laden
im richtigen Zustand ist.

Also z.B. man klickt auf

Unternehmen, dann sollte die neu geladene Navi für Unternehmen
gleich beim Start eine dunkelgrau hinterlegte Unternehmens-TD
haben usw.

So hatte ich es bereits, man klickt auf Unternehmen, in der neuen Navi ist Unternehmen gleich zu Beginn dunkelgrau…

ABER heist das nicht, ich muss diese Variante (am Anfang dunkelgrau) für jedes Feld abspeichern? da müsste ich ja für jedes Feld eine eigene Navi erstellen oder?

MfG Sabine L.

12

Ich will die neue Navigation nicht wegen dem pressed oder dem
over laden, sondern weil die zweite Navigation mehr Punkte
enthält bzw. Unterpunkte enthält…die erste wird sozusagen
erweitert.

Aha.

So hatte ich es bereits, man klickt auf Unternehmen, in der
neuen Navi ist Unternehmen gleich zu Beginn dunkelgrau…

ABER heist das nicht, ich muss diese Variante (am Anfang
dunkelgrau) für jedes Feld abspeichern? da müsste ich ja für
jedes Feld eine eigene Navi erstellen oder?

Für jedes Feld, bei welchem in den Navigationsframe eine neue HTML Seite geladen wird. Ich habe zwar keinen genauen Überklick wie deine Navigationsstruktur nun wirklich aussieht, aber ich denke das trifft dann auf deine Seite zu. Gruß DP