Menu: Array einlesen und ausgeben

Hallo,
ich lerne seit gestern Javascript, da ich meine Webseite neu erstellen
möchte. Zuerst möchte ich ein Menu erstellen, das dann bei OnMouseOver
"leuchtet", soweit so gut. Da das Menu später leicht erweitert werden
soll und auch in einer 2.Ebene aufklappen soll, möchte ich die Bilder in
ein Array einlesen.

Ich dachte mir das so:
1. Aus Verzeichnis alle Dateien mit Endung png und navi im Namen einlesen.
2. Namen extrahieren und unter diesem Namen im Array eingeben. Die Namen
sind "navi_name.png" bzw. "navi_name_rot.png".

Also:

navi.home = "Bilder/menu/navi_home.png";
navi.home_rot = "Bilder/menu/navi_home_rot.png";

Kann mir da jemand helfen?


Weiterhin übergebe ich den Schlüssel an eine Funktion.

Aufruf:
<a href="index.html"
onMouseOver="menu_links('highlight','ebene1','home ','home_rot')"
onMouseOut="Bildwechsel(0,Normal1)">
<img src="Bilder/menu/navi_home.png" alt="Home" name="home"></a>

In dieser Funktion funtioniert der Befehl:
window.document.home.src = navi.home_rot;

Wenn ich allerdings args[x] verwende:
window.document.args[2].src = navi.args[3];

Gibt's diese Meldung:
window.document.args has no properties

Da stimmt bestimmt irgendwas mit Kommas oder/und Klammern nicht, aber
ich komme nicht drauf.

Muß ich eigentlich arg[2], also den Namen des Bildes übergeben oder kann
ich irgendwie in window.document.NAME.src direkt auf den Namen des
aktuellen img-tag zugreifen?

Vielen Danke für Eure Hilfe.
Uli

Ulrich Wiederhold wrote:

[...] möchte ich ein Menu erstellen, das dann bei OnMouseOver
"leuchtet", soweit so gut. Da das Menu später leicht erweitert werden
soll und auch in einer 2.Ebene aufklappen soll, möchte ich die Bilder in
ein Array einlesen.

Ich dachte mir das so:
1. Aus Verzeichnis alle Dateien mit Endung png und navi im Namen einlesen.

Das ist nur serverseitig zuverlässig möglich.

2. Namen extrahieren und unter diesem Namen im Array eingeben. Die Namen
sind "navi_name.png" bzw. "navi_name_rot.png".

Also:

navi.home = "Bilder/menu/navi_home.png";
navi.home_rot = "Bilder/menu/navi_home_rot.png";

Variablen sollten deklariert werden:

var ...;

Kann mir da jemand helfen?

Ja.

Weiterhin übergebe ich den Schlüssel an eine Funktion.

Aufruf:
a href="index.html"
onMouseOver="menu_links('highlight','ebene1','home ','home_rot')"
onMouseOut="Bildwechsel(0,Normal1)"

Was ist `Bildwechsel', was ist `Normal1'?

img

Da sollte kein Zeilenumbruch zwischen die Tags, weil das als Whitespace
gewertet wird.

src="Bilder/menu/navi_home.png" alt="Home" name="home"></a

Siehe <http://pointedears.de/scripts/test/hoverMe/> für eine sowohl
einfachere als zuverlässigere Lösung.

Übrigens lässt sich das dank CSS :hover theoretisch auch ohne Script
bewerkstelligen.

In dieser Funktion funtioniert der Befehl:
window.document.home.src = navi.home_rot;

document.images["home"].src = ...;

Wenn ich allerdings args[x] verwende:
window.document.args[2].src = navi.args[3];

Gibt's diese Meldung:
window.document.args has no properties

Da stimmt bestimmt irgendwas mit Kommas oder/und Klammern nicht, aber
ich komme nicht drauf.

Es gibt kein Objekt, das mit `window.document.args' referenziert
werden könnte. Dieser Ausdruck wird zu `undefined' ausgewertet
und `undefined' hat keine Eigenschaften.

Muß ich eigentlich arg[2], also den Namen des Bildes

Wie kommst Du darauf, dass das der Fall wäre? Du meinst vermutlich

arguments[1]

innerhalb der Bildwechsel-Methode, um das zweite Argument zu
referenzieren. Allerdings genügte hier bereits ein benanntes
Argument und wäre auch performanter (ein Lookup wird eingespart).

übergeben

Nein.

oder kann ich irgendwie in window.document.NAME.src direkt auf
den Namen des aktuellen img-tag zugreifen?

Ja, siehe oben.

Vielen Danke für Eure Hilfe.

Gern geschehen.


PointedEars
--
"Offensichtlich haben die Wählerinnen und Wähler so gewählt, wie
sie gewählt haben."
-- Michael Glos (CSU) analysiert messerscharf das Wahlergebnis
der Bundestagswahl 2002

Hallo,
vielen Dank erstmal für die Infos.

Thomas 'PointedEars' Lahn wrote:

Ulrich Wiederhold wrote:
1. Aus Verzeichnis alle Dateien mit Endung png und navi im Namen einlesen.


Das ist nur serverseitig zuverlässig möglich.

Ok. Dann werde ich das später via php machen und das Array an Javascript
übergeben, sollte sich machen lassen.

Weiterhin übergebe ich den Schlüssel an eine Funktion.

Aufruf:
a href="index.html"
onMouseOver="menu_links('highlight','ebene1','home ','home_rot')"
onMouseOut="Bildwechsel(0,Normal1)"


Was ist `Bildwechsel', was ist `Normal1'?

Ging mir nur um onMouseOver. Mit Bildwechsel udn Normal1 habe ich das
bisher ohne Array gemacht.

Da sollte kein Zeilenumbruch zwischen die Tags, weil das als Whitespace
gewertet wird.

Ok. Wußte ich noch nicht. Das war auch nur wegen der besseren Lesbarkeit
hier.

Siehe <http://pointedears.de/scripts/test/hoverMe/> für eine sowohl
einfachere als zuverlässigere Lösung.
Ich kann da nichts finden. Sehe das "about" mit highlighting, kann aber

im Code die entsprechende Zeilen nicht entdecken. Finde da allerdings
Frames. Frames möchte ich nicht verwenden.

Übrigens lässt sich das dank CSS :hover theoretisch auch ohne Script
bewerkstelligen.

Jein. So hatte ich das bisher. Nur wird :hover vom IE leider nicht für
andere tags als <a> unterstützt und man muß doch wieder einen Workaround
mittels Javascript gehen. Dann kann ich das ganze auch gleich mit JS machen.

Muß ich eigentlich arg[2], also den Namen des Bildes


Wie kommst Du darauf, dass das der Fall wäre? Du meinst vermutlich

arguments[1]

Ok.

document.images["home"].src = navi.home_rot;

Das funktioniert jetzt so. Nur wird "home_rot" beim Aufruf der Funktion
als 3. Argument übergeben, steht also in arguments[2].
Mit
document.writeln(arguments[2]);
kann ich das Argument auch ausgeben. Wie muß ich nun den Aufruf mit
document.images schreiben, um "home_rot" durch "arguments[2]" zu ersetzen?
Meine Versuche blieben bisher erfolglos.

Danke.
Uli

Ulrich Wiederhold schrieb:

...

Aufruf:
a href="index.html"
onMouseOver="menu_links('highlight','ebene1','home ','home_rot')"
......
document.images["home"].src = navi.home_rot;

Das funktioniert jetzt so. Nur wird "home_rot" beim Aufruf der Funktion
als 3. Argument übergeben, steht also in arguments[2].

Ooops? Doch eher als 4. Argument, also arguments[3].

Mit
document.writeln(arguments[2]);
kann ich das Argument auch ausgeben. Wie muß ich nun den Aufruf mit
document.images schreiben, um "home_rot" durch "arguments[2]" zu ersetzen?
Meine Versuche blieben bisher erfolglos.

document.images[arguments[2]].src = navi[arguments[3]];

Grüße
Kai

Hallo,
Kai Hoe wrote:

document.images[arguments[2]].src = navi[arguments[3]];

Ahh, der Punkt!!! Und ich habe Klammern und Anführungszeichen
probiert... Danke.

Gruß
Uli

Ulrich Wiederhold wrote:

Thomas 'PointedEars' Lahn wrote:
Ulrich Wiederhold wrote:
Weiterhin übergebe ich den Schlüssel an eine Funktion.

Aufruf:
a href="index.html"
onMouseOver="menu_links('highlight','ebene1','home ','home_rot')"
onMouseOut="Bildwechsel(0,Normal1)"
Was ist `Bildwechsel', was ist `Normal1'?

Ging mir nur um onMouseOver. Mit Bildwechsel udn Normal1 habe ich das
bisher ohne Array gemacht.

Es handelt sich um ein Object-Objekt, nicht um ein Array-Objekt.
Es gibt keine assoziativen Arrays in JS/ECMAScript, aber jedes
Objekt kann Eigenschaften haben, die bei Bezeichnern mit `.foo'
und ansonsten mit `["foo"]' referenziert werden können.

Da sollte kein Zeilenumbruch zwischen die Tags, weil das als Whitespace
gewertet wird.

Ok. Wußte ich noch nicht. Das war auch nur wegen der besseren Lesbarkeit
hier.

Umbrüche in Tags außerhalb von Attributwerten werden nicht als
darzustellender Whitespace gewertet:

<a href="index.html"
onmouseover="menu_links('highlight','ebene1','home ','home_rot')"
onMouseout="Bildwechsel(0,Normal1)"><img
src="Bilder/menu/navi_home.png" alt="Home"></a>

Siehe <http://pointedears.de/scripts/test/hoverMe/> für eine sowohl
einfachere als zuverlässigere Lösung.

Ich kann da nichts finden. Sehe das "about" mit highlighting, kann aber
im Code die entsprechende Zeilen nicht entdecken. Finde da allerdings
Frames. Frames möchte ich nicht verwenden.

Da ist leider noch ein Frameset des Anbieters für die Umleitung drin.
Schau Dir den Quelltext des Frames an (This Frame --> View Frame Source
in Mozilla/5.0).

Übrigens lässt sich das dank CSS :hover theoretisch auch ohne Script
bewerkstelligen.

Jein. So hatte ich das bisher. Nur wird :hover vom IE leider nicht für
andere tags als <a> unterstützt und man muß doch wieder einen Workaround
mittels Javascript gehen.

Und weshalb nimmst Du keine a-Elemente?

Muß ich eigentlich arg[2], also den Namen des Bildes

Wie kommst Du darauf, dass das der Fall wäre? Du meinst vermutlich

arguments[1]

Ok.

document.images["home"].src = navi.home_rot;

Das funktioniert jetzt so. Nur wird "home_rot" beim Aufruf der Funktion
als 3. Argument übergeben, steht also in arguments[2].
Mit
document.writeln(arguments[2]);
kann ich das Argument auch ausgeben. Wie muß ich nun den Aufruf mit
document.images schreiben, um "home_rot" durch "arguments[2]" zu ersetzen?
Meine Versuche blieben bisher erfolglos.

document.images["home"].src = navi[arguments[2]];

Aber wie gesagt:

1. Stattdessen benannte Argumente benutzen:

function foo(bar, bar2, bar3)
{
...
document.images["home"].src = navi[bar3];
...
}

Du kannst genausogut auch gleich Referenzen übergeben:

function foo(bar, bar2, bar3)
{
...
document.images["home"].src = bar3;
...
}

foo(navi.foobar);

2. Stattdessen hoverMe nehmen.


HTH

PointedEars

Ulrich Wiederhold wrote:

Kai Hoe wrote:
document.images[arguments[2]].src = navi[arguments[3]];

Ahh, der Punkt!!! Und ich habe Klammern und Anführungszeichen
probiert... Danke.

Es ist in der Regel effizienter, Dokumentationen und FAQs
zu einem Thema zu lesen, anstatt herumzuprobieren.


PointedEars
--
F: Wie fängt ein SQL-Programmierer einen Elefanten?
A: Na ganz einfach! SELECT Elefant FROM Afrika a, Asien b ...

Hallo,
Thomas 'PointedEars' Lahn wrote:

Siehe <http://pointedears.de/scripts/test/hoverMe/> für eine sowohl
einfachere als zuverlässigere Lösung.

Danke. Hab's jetzt. Sieht sehr kompliziert aus, finde ich. Jetzt
funktioniert es bei mir, zumindest fast.

Und weshalb nimmst Du keine a-Elemente?

Hatte ich auchmal, brauchte aber bei mehrdimensionalen Listen immernoch
hover auf li oder div elementen.
Da ich mich jetzt entschieden habe, auch andere Dinge mit JS zu
realisieren, die serverseitig nicht zu realisieren sind, kann ich auch
gleich das Menu anpassen.

1. Stattdessen benannte Argumente benutzen:

function foo(bar, bar2, bar3)
{
...
document.images["home"].src = navi[bar3];
...
}

Du kannst genausogut auch gleich Referenzen übergeben:

function foo(bar, bar2, bar3)
{
...
document.images["home"].src = bar3;
...
}

foo(navi.foobar);

Ich verwende benannte Argumente. Jedoch möchte ich mit dieser Funktion
noch mehr machen und verwende somit immer eine unterschiedliche Anzahl
an Argumenten.

Soweit funktioniert es jetzt. Ich habe die Seite jetzt schonmal ins Netz
gestellt, damit es keine Unklarheiten wegen des verwendeten Codes mehr
gibt und zwar unter:
http://icculus.org/~fzzgrr/index.html

Bei der Seite
http://icculus.org/~fzzgrr/index_down.html

habe ich das Problem, daß sich die Positionierung der Grafiken
verändert, nachdem ich mit der Maus darübergefahren bin.

Woran liegt das? Der Debugger im Browser gibt keinen Fehler mehr an.


Bezüglich deiner anderen Email. Ich habe versucht dazu Informationen zu
finden und jede Menge Dokus gelesen. Nur leider habe ich nichts zu
diesem Thema gefunden. Es wurden immer andere Varianten verwendet, wenn
auf Arrays zugegriffen wurde.
Lese mit Sicherheit noch ne ganze Menge in nächster Zeit...

Gruß
Uli

Ulrich Wiederhold wrote:

Thomas 'PointedEars' Lahn wrote:
Siehe <http://pointedears.de/scripts/test/hoverMe/> für eine sowohl
einfachere als zuverlässigere Lösung.

Danke. Hab's jetzt. Sieht sehr kompliziert aus, finde ich.

Wenn Du es trotz der Inline-Dokumentation nicht verstehst, frag einfach.

Jetzt funktioniert es bei mir, zumindest fast.

Von "funktionieren" kann also hier keine Rede sein. Ursache für Deinen
Irrtum ist wohl, dass auch Du annimmst, dass Ausprobieren von Spaghetticode
auf einem System oder wenigen Systemen ein sinnvoller Ersatz für saubere
Syntax und richtige Tests sei.
-- Dietmar Meier in <as5l4p$oa1c1$1 (AT) ID-3767 (DOT) news.dfncis.de>

Und weshalb nimmst Du keine a-Elemente?

Hatte ich auchmal, brauchte aber bei mehrdimensionalen Listen immernoch
hover auf li oder div elementen.

ACK

http://icculus.org/~fzzgrr/index.html

Der Link "Reisen" funktioniert ohne Scripting nicht, das änderst Du aber
sicher noch. Genauso wie die nebeneinanderliegenden Links, wenn Grafiken
deaktiviert sind oder nicht unterstützt werden.

Bei der Seite
http://icculus.org/~fzzgrr/index_down.html

habe ich das Problem, daß sich die Positionierung der Grafiken
verändert, nachdem ich mit der Maus darübergefahren bin.

Tatsächlich wird das ursprüngliche Bild nicht wiederhergestellt.

Woran liegt das? Der Debugger im Browser gibt keinen Fehler mehr an.

Es liegt an dieser Zeile:

else if (event == "downlight"){
document.images[arguments[2]].src = navi[arguments[2]];
^^^
}

Auch frage ich mich, weshalb Du angesichts dieser Zeilen davon ausgehst,
dass die nachfolgenden Zeilen mit dem gleichem Fehler

else if (event == "downlight" && group == "reisen"){
document.images[arguments[2]].src = subnavi_reisen[arguments[2]];
^^^
}

jemals ausgeführt werden. Das werden sie aufgrund des `else if' nämlich
nicht! Und Deine Einrückung ist auch suboptimal.

Bezüglich deiner anderen Email.

Ich habe Dir keine Emails geschrieben. Lies bitte <news:de.newusers.infos>
und <http://einklich.net/usenet/usenet1.htm> ff.

Ich habe versucht dazu Informationen zu finden und jede Menge Dokus
gelesen. Nur leider habe ich nichts zu diesem Thema gefunden.

Du hast den FAQ-Pointer also nicht gelesen.

Es wurden immer andere Varianten verwendet, wenn auf Arrays zugegriffen
wurde.

Seltsam, ich finde da nur eine. Und es handelt es sich hierbei noch immer
nicht um Arrays.

Lese mit Sicherheit noch ne ganze Menge in nächster Zeit...

Gute Idee.


PointedEars
--
The English government is much of a German poodle as
other governments. The Germans infiltrated them all.
-- "The only real Barbara Schwarz", dsw.scientology,
<16d1deb5.0402261008.48f994b6 (AT) posting (DOT) google.com>)

Hallo,

Thomas 'PointedEars' Lahn wrote:

Der Link "Reisen" funktioniert ohne Scripting nicht, das änderst Du aber
sicher noch. Genauso wie die nebeneinanderliegenden Links, wenn Grafiken
deaktiviert sind oder nicht unterstützt werden.

Ja. zur Zeit bin ich noch mit dem Groben beschäftigt. Ist auch noch eine
noscript-Sektion im Gespräch, dann vielleicht auch mit dem CSS-Menü
und IE-User werden auf einen Site-Index umgeleitet, so weit bin ich noch
nicht. Es funktioniert generell noch kein Link.

Es liegt an dieser Zeile:

| else if (event == "downlight"){
| document.images[arguments[2]].src = navi[arguments[2]];
^^^
| }

Auch frage ich mich, weshalb Du angesichts dieser Zeilen davon ausgehst,
dass die nachfolgenden Zeilen mit dem gleichem Fehler

| else if (event == "downlight" && group == "reisen"){
| document.images[arguments[2]].src = subnavi_reisen[arguments[2]];
^^^
| }

jemals ausgeführt werden. Das werden sie aufgrund des `else if' nämlich
nicht! Und Deine Einrückung ist auch suboptimal.

Yep, lag aber an "else if (event == "downlight")". Der untere Teil wurde
gar nicht ausgeführt, der obere funktioniert so. Das Ändern in
else if (event == "downlight" && group == "main") brachte den
gewünschten Erfolg.

Bezüglich deiner anderen Email.

Ich habe Dir keine Emails geschrieben. Lies bitte <news:de.newusers.infos
und <http://einklich.net/usenet/usenet1.htm> ff.

Sorry. War bisher nur in diversen Mailinglisten. Das ist so drin. Werde
mich bemühen, demnächst von Postings zu sprechen. .)

Du hast den FAQ-Pointer also nicht gelesen.

Wo ist der? Ich habe die FAQ und die FFQ gelesen. Die FAQ zu den
Bereichen, wo ich dachte, daß sie mein Anliegen betreffen. Von einem
FAQ-Pointer habe ich nichts gelesen.

Was fange ich damit an
<dcljs.faq-pointer.2005-04-04 (AT) ID-3767 (DOT) user.individual.de> ?

Seltsam, ich finde da nur eine. Und es handelt es sich hierbei noch immer
nicht um Arrays.

Ok.

Uli