e0dem: Navigation

Hallo zusammen

Ich stehe schon seit Tagen vor einem für mich unlösbaren Problem. Ein Button in der Navigation (der nur ein Bild und kein eigentlicher Button ist) soll durch onclick die Farbe von schwarz auf weiss ändern (bzw. in diesem Beispiel ein anderes Bild) und es sollen weitere Möglichkeiten direkt unterhalb ausklappen (mit dem Befehl visibility).

Nachdem dies geschehen ist und man auf den unteren Teil "moved" soll der natürlich noch da bleiben und becklickbar sein.

Alles ist in 3 Dokumente unterteilt und um nicht die ganze Sache kopieren zu müssen habe ich eine abgespeckte Version mit nur einem Button und einem gehideten div gemacht.

Inhalt test.html

<html>
<head>
<title>Hans</title>
<link rel="stylesheet" href="Das.css" type="text/css">
<script src="Navi.js" type="text/javascript"></script>
</head>
<body>
<img name="Reisen" src="Reisen_black.jpg"  alt="Reisen" onclick="hans()" onmouseout="fritz()"/>
<div id="Lars" class="Reisen" onmouseover="abc()" onmouseout="xyz()">
<img src="Bearbeiten_black.jpg"  alt="Bearbeiten"/>
<img src="Neu_black.jpg"  alt="Neu"/>
</div>
</body>
</html>

Inhalt Das.css

body { background-color: silver;

}

#Lars { visibility: hidden;

}

.Reisen { width: 130px;
border: 1px solid red;
position: absolute;
}

Inhalt Navi.js

unction hans() {

this.src="Reisen_white.jpg";
document.getElementbyId("Lars").style.visibility="visible";

}

function fritz() {

this.src="Reisen_black.jpg";
document.getElementbyId("Lars").style.visibility="hidden";

}

function abc() {

document.getElementbyName("Reisen").src="Reisen_white.jpg";
this.style.visibility="visible";

}

function xyz() {

document.getElementbyName("Reisen").src="Reisen_black.jpg";
this.style.visibility="hidden";

}

Bilder:
Bearbeiten
Neu
Reisen_weiss
Reisen_schwarz

Der rote Rahmen dient btw. zum erkennen des gehideten divs und nicht zur Show :P.

Ich habe schon viele Sachen ausprobiert und habe mal getelementbyname genommen, mal getelementbyid und auch this und trotzdem funktioniert einfach gar nichts.

Ich bin wirklich komplett am Ende meines Lateins und vermute sehr dumme Fehler in meinem Code die jedoch weder einer meiner Kameraden noch ich sehen.

Könnt ihr mir helfen?

Danke schon im Voraus!

  1. document.getElementbyId("Lars").style.visibility="visible";
    document.getElementbyName("Reisen").src="Reisen_white.jpg";

    deine mit getElement beginnenden Methoden von document gibt's nicht, schau noch mal zur korrekten Schreibweise nach

    1. document.getElementbyId("Lars").style.visibility="visible";
      document.getElementbyName("Reisen").src="Reisen_white.jpg";

      deine mit getElement beginnenden Methoden von document gibt's nicht, schau noch mal zur korrekten Schreibweise nach

      Ich versteh nicht genau was du damit meinst. Willst du mir damit sagen, dass die Syntax falsch ist?

      Könnte das die korrekte Schreibweise sein?

      getElement("id", "Lars").style.visibility = "visible";

      Wie wäre das jedoch beim Reise-Button? Dieser ist nicht im Style enthalten sondern soll direkt auf die src zugreifen.

      Zum Thema "this.blabla" hab ich mich au schon gefragt ob man es nicht auch mit dem getElement machen müsste. Lustigerweise hab ich das auch schonmal durchgespielt und auch da funktionierte es nicht.

      1. Könnte das die korrekte Schreibweise sein?

        Nein. Die Fehlerkonsole sagt dir auch warum.

        Struppi.

        1. Könnte das die korrekte Schreibweise sein?

          Nein. Die Fehlerkonsole sagt dir auch warum.

          Struppi.

          Ein Fehler gefunden!
          document.getElementById("Lars").style.visibility="visible";

          das "By" war klein und das mochte er net. Damit ist auch deine Ausgabe bei der Fehlerkonsole erklärt aber noch nicht warum der Bildwechsel mit "this.blabla" nicht funktioniert obwohl es geht wenn man es direkt in den onclick reinschreibt anstelle der Funktion hans().

          1. das "By" war klein und das mochte er net. Damit ist auch deine Ausgabe bei der Fehlerkonsole erklärt

            Doku doch noch gefunden :-)

            aber noch nicht warum der Bildwechsel mit "this.blabla" nicht funktioniert obwohl es geht wenn man es direkt in den onclick reinschreibt anstelle der Funktion hans().

            Weil this in deiner Funktion das Objekt window ist und nicht das Bild. Bei deiner Schreibweise musst du dies explizit der Funktion onclick übergeben.

            Struppi.

            1. das "By" war klein und das mochte er net. Damit ist auch deine Ausgabe bei der Fehlerkonsole erklärt

              Doku doch noch gefunden :-)

              aber noch nicht warum der Bildwechsel mit "this.blabla" nicht funktioniert obwohl es geht wenn man es direkt in den onclick reinschreibt anstelle der Funktion hans().

              Weil this in deiner Funktion das Objekt window ist und nicht das Bild. Bei deiner Schreibweise musst du dies explizit der Funktion onclick übergeben.

              Struppi.

              Ich hab dem Bild eine Id gegeben und mit getElementById funktioniert das nun mit dem Src-Wechsel ;>. Danke für die Hilfe, das hat mich nun lange genug aufgehalten :D. Jetzt muss ich es nur noch schaffen, dass der untere Teil nicht wieder verschwindet. Ich hoffe ich kriege das mit einer Überlappung hin.

              Testen macht schlauer ;>

  2. <img name="Reisen" src="Reisen_black.jpg"  alt="Reisen" onclick="hans()" onmouseout="fritz()"/>

    unction hans() {

    this.src="Reisen_white.jpg";
    document.getElementbyId("Lars").style.visibility="visible";

    }

    ich bin mir nicht sicher, aber das this-Objekt ist, glaube ich zumindest (korrigiert mich wenn ich falsch liege), nicht das IMG-Objekt "Reisen". Da müsstest du auch mit getElement arbeiten, zumal es auch nicht funktionieren kann da du eine falsche Groß-/Kleinschreibung hast.

    MfG
    thecreep

  3. Ich habe schon viele Sachen ausprobiert und habe mal getelementbyname genommen, mal getelementbyid und auch this und trotzdem funktioniert einfach gar nichts.

    Doch es funktioniert etwas und zwar, dass du eine Fehlermeldung angezeigt bekommst. Wo du diese findest ist aber von Browser zu Browser verschieden. z.b. im Firefox in der Fehlerkonsole.

    Struppi.

    1. Ich habe schon viele Sachen ausprobiert und habe mal getelementbyname genommen, mal getelementbyid und auch this und trotzdem funktioniert einfach gar nichts.

      Doch es funktioniert etwas und zwar, dass du eine Fehlermeldung angezeigt bekommst. Wo du diese findest ist aber von Browser zu Browser verschieden. z.b. im Firefox in der Fehlerkonsole.

      Struppi.

      Inzwischen hab ich die Fehlerkonsole angeschaut aber er spuckt mir aus, dass getElement nicht definiert sei. Ich scheine einen so krassen Denkfehler zu machen, dass nicht einmal die Grundbefehle funktionieren.

      Was für einen Fehler mache ich?!

      1. Was für einen Fehler mache ich?!

        Ich weiß nicht ob das ein Denkfehler ist. Üblicherwiese schaut man einfach in eine Dokumentation, wenn so ein Fehler auftaucht.

        Struppi.