Lucia: getElementById() mit Variable?

Hallo!

Ich will auf einer Homepage mehrere kleine Bilder reinstellen, die sich verändern, wenn man mit der Maus drüberfährt.
Soweit klappt es ja, aber ich suche noch nach einer Möglichkeit, bei der ich nicht für jedes einzelne Bild eine bzw. mehrere Funktionen schreiben muss, weil die Funktionen ja eigentlich alle gleich aussehen.

Ich habs probiert mit der Funktion:

function bildwechsel(variable) {
   document.getElementById(variable).src="bild.gif" }

und die Funktion aufgerufen mit

<img id="id" onMouseOver="javascript:bildwechsel("id")" src="anderesbild.gif">

... aber das funktioniert leider nicht mit Variable.
Deshalb meine Frage:
Wie kann man document.getElementById("id") mit einer Variablen (der jeweiligen id des Bildes) aufrufen?

Kann mir bitte jemand weiterhelfen?
Viele Grüße,
Lucia

  1. Hi,

    function bildwechsel(variable) {
       document.getElementById(variable).src="bild.gif" }

    es fehlt die Prüfung, ob DOM bekannt und das Objekt vorhanden ist.

    <img id="id" onMouseOver="javascript:

    "javascript:" ist kein gültiger JavaScript-Befehl. Ich korrigiere den Code:

    <img id="id" onMouseOver="bildwechsel("

    Du musst Klammern auch schließen, wenn Du sie öffnest. Desweiteren verlangt Deine Funktion ein Funktionsargument.

    id")"

    Hier fehlt ein "="-Zeichen. Außerdem hat Dein <img>-Tag bereits eine ID, und ")" ist keine gültige solche.

    src="anderesbild.gif">

    Das zwingend benötigte alt-Attribut fehlt.

    ... aber das funktioniert leider nicht mit Variable.

    Ich habe Dir beschrieben, was der Browser in Deinem Code sieht. Im Übrigen möchtest Du Dich mit dem this-Objekt beschäftigen.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hallo Cheatah!

      <img id="id" onMouseOver="javascript:

      "javascript:" ist kein gültiger JavaScript-Befehl. Ich korrigiere den Code:

      Davon mal ganz zu schweigen, dass habe ich dabei doch glatt selbst übersehen!

      Gruß Gernot

    2. "javascript:" ist kein gültiger JavaScript-Befehl.

      </archiv/2004/5/81706/#m475645>

      1. Hi,

        "javascript:" ist kein gültiger JavaScript-Befehl.
        </archiv/2004/5/81706/#m475645>

        ist mir bekannt, ich bleibe dennoch bei dieser Formulierung.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        1. Hallo,

          "javascript:" ist kein gültiger JavaScript-Befehl.
          </archiv/2004/5/81706/#m475645>

          ist mir bekannt, ich bleibe dennoch bei dieser Formulierung.

          Ich will mich nicht um Formulierungsfragen streiten, aber was sind denn dann deinem Verständnis nach »JavaScript-Befehle« und was nicht? In ECMAScript/JavaScript gibt es den Terminus »Befehl« nicht. Und seine eigene Terminologie zu verwenden, um damit jede Aussage zu rechtfertigen, ist besonders mau.
          Labelled Statements gehören, wie der Name schon sagt, zu den Statements. Beispiele für Statements sind:

          • Variable Statements (var bla=1;)
          • Empty Statements (;)
          • Expression Statements (1+1; 1==1; this; bla=1; bla=new Object(); bla=function () {}; alert('bla'); uvm.)
          • if
          • do ... while
          • while
          • for
          • for ... in
          • with
          • switch
          • try ... catch ... finally
          • throw
          • continue
          • break
          • return

          Dazwischen tauchen nun Labelled Statements auf. Ich nehme einmal an, dass du Statements der obigen Arten als »gültige Befehle« bezeichnen würdest. Wieso gerade Labelled Statements nicht?

          Mathias

          1. Hi,

            Ich will mich nicht um Formulierungsfragen streiten, aber was sind denn dann deinem Verständnis nach »JavaScript-Befehle« und was nicht? In ECMAScript/JavaScript gibt es den Terminus »Befehl« nicht.

            also doch eine Formulierungsfrage.

            Ich nehme einmal an, dass du Statements der obigen Arten als »gültige Befehle« bezeichnen würdest. Wieso gerade Labelled Statements nicht?

            Weil mindestens ein JavaScript-fähiger Browser existiert, für den dieser Code - vermeiden wir mal Begriffe wie "Befehl" - fehlerhaft ist. Desweiteren bin ich sicher, dass Du die Intention meiner Aussage dem Autor gegenüber durchaus verstehst.

            Cheatah

            --
            X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
            X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
            X-Will-Answer-Email: No
            X-Please-Search-Archive-First: Absolutely Yes
        2. Hi,

          "javascript:" ist kein gültiger JavaScript-Befehl.
          </archiv/2004/5/81706/#m475645>
          ist mir bekannt, ich bleibe dennoch bei dieser Formulierung.

          Ich schlage eine Änderung in folgende, fast genau so kompakte Formulierung vor:

          Die Angabe des Pseudoprotokolls "javascript:" ist hier nicht notwendig, weil hier keine URL, sondern ohnehin %Script; erwartet wird.

          viele Grüße ;-))

          Axel

  2. Hallo Lucia!

    Ich habs probiert mit der Funktion:

    function bildwechsel(variable) {
       document.getElementById(variable).src="bild.gif" }

    und die Funktion aufgerufen mit

    <img id="id" onMouseOver="javascript:bildwechsel("id")" src="anderesbild.gif">

    Ich weiß nicht, ob ich das richtig verstehe, aber so wie ich es sehe, übergibst du hier deiner Funktion "bildwechsel()" keine Variable, sondern die Zeichenkette "id"

    Probier es stattdessen mal mit

    onMouseOver="javascript:bildwechsel(this.id)" oder verwende andere Hochkommas
    onMouseOver="javascript:bildwechsel('id')", wenn du eine Zeichenkette übergeben willst.

    Gruß Gernot

    1. Hallo Gernot,

      onMouseOver="javascript:bildwechsel(this.id)" oder verwende andere Hochkommas

      Die Id des Elements übergeben um damit an eine Referenz zu kommen, wenn man doch schon eine Regerenz hat?
      Dann doch eher:

      onMouseOver="javascript:bildwechsel(this)"

      und man kann sich das getElementById sparen:

      function bildwechsel(element) {
        element.src = "...";
      }

      Grüße

      Daniel

      1. Hallo Daniel,

        und man kann sich das getElementById sparen:

        function bildwechsel(element) {
          element.src = "...";
        }

        Stimmt, das ist am elegantesten!

        onMouseOver="javascript:bildwechsel(this)"

        Das_____________^^^^^^^^^^ hast du aber auch so wie ich übersehen, es ist einfach zu heiß heute.

        Gruß Gernot

      2. Hallo,

        onMouseOver="javascript:bildwechsel(this.id)" oder verwende andere Hochkommas
        Die Id des Elements übergeben um damit an eine Referenz zu kommen, wenn man doch schon eine Regerenz hat?
        Dann doch eher:

        onMouseOver="javascript:bildwechsel(this)"

        und man kann sich das getElementById sparen:

        function bildwechsel(element) {
          element.src = "...";
        }

        das funktioniert aber nicht in Netscape 4.x ;-)

    2. hi,

      <img id="id" onMouseOver="javascript:bildwechsel("id")" src="anderesbild.gif">

      Ich weiß nicht, ob ich das richtig verstehe, aber so wie ich es sehe, übergibst du hier deiner Funktion "bildwechsel()" keine Variable, sondern die Zeichenkette "id"

      na ja, die id des elementes besteht ja auch aus der zeichenkette "id" :-)

      die anführungszeichen sind natürlich nichts desto trotz nicht korrekt verteilt.

      gruß,
      wahsaga

      --
      I'll try being nicer if you'll try being smarter.
  3. Hallo!

    <img id="id" onMouseOver="javascript:bildwechsel("id")" src="anderesbild.gif">

    <img id="id" onMouseover="bildwechsel('id')" src="anderesbild.gif">
      <img onMouseover="this.src='bild.gif'" src="anderesbild.gif">
      <img onMouseOver="bildwechsel(this)" src="anderesbild.gif">
    für
      function bildwechsel(variable) {variable.src="bild.gif";}

    Wie Dir lustig ist.

    ... aber das funktioniert leider nicht mit Variable.
    Deshalb meine Frage:
    Wie kann man document.getElementById("id") mit einer Variablen (der jeweiligen id des Bildes) aufrufen?

    In dem man beachtet, daß onMouseover="irgendwas=""" wohl nicht gehen wird ;)

    Gruß aus Berlin!
    eddi

    --
    Manchmal trifft es einen doch ganz unverhofft t86591:
    > '..."Vorläufig abgebrochen" ist ungefähr so sinnvoll formuliert, wie "einstweilig erschossen" oder "temporär verbrannt"...'
    Ich danke Sven für diese Erkenntnis - Gott, was habe ich gelacht ;)
  4. Danke für die vielen Antworten!
    Ich probiers dann mal mit euren Lösungen.

    Viele Grüße,
    Lucia