Button ändern

[Der Martin]

Hallo,

dieser thread hat mich auf eine Idee gebracht, deren Verwirklichung aber ohne Eure Hilfe nicht optimal möglich ist.

och komm, mit ein wenig Hirnschmalz schon ... ;-)

Jetzt möchte ich ein ausgelagertes Javascript machen der vorgeschlagenen Art, in dem alle möglichen Bilder bearbeitet werden.

Für jedes Bild eine eigene Funktion zu schreiben, ist natürlich mühsam und fehleranfällig - und unelegant noch dazu. Da es sich immer um denselben Vorgang handelt, bietet es sich förmlich an, dieselben Eventhandler für alle Bilder zu benutzen.

... aber das geht, wie ich schnell bemerkte nicht, denn es muss ja für jede id eine Funktion onmouse... existieren.

Keineswegs.

window.onload = init;
  function init()
  {
    var i=0;
    while (i < 41)
    {
      i++;
      document.getElementById("id" + i).onmouseover = initOnmouseover();
      document.getElementById("id" + i).onmouseout  = initOnmouseout();
    }
  }

Autsch! Hier rufst du die beiden Eventhandler-Funktionen je einmal auf und speicherst dann deren Rückgabewerte, nämlich "undefined". In deinem ersten Ansatz hattest du das richtig.

Ich würde hier allerdings noch ein Stück weitergehen und dem Bildobjekt seine beiden Bildnamen (Normal + Hover) als Eigenschaften mitgeben, dann kannst du später im Eventhandler bequem darauf zugreifen. Bei der Gelegenheit baue ich noch die hier ungünstige while-Schleife in eine for-Schleife um und optimiere den Zugriff auf das Elementobjekt, damit man nicht x-mal getElementById() aufrufen und den ganzen Elementbaum durchsuchen muss:

for (var i=0; i<41; i++)
    {
      var obj = document.getElementById("id" + i);
      obj.onmouseover = initOnmouseover;
      obj.onmouseout  = initOnmouseout;
      var dot = obj.src.lastIndexOf(".");
      obj.normalimage = obj.src;
      obj.hoverimage  = obj.src.substr(0, dot) + "h" + obj.src.substr(dot);
    }
  }

Um die richtigen Namen der Bilder zu bestimmen, gehe ich hier davon aus, dass sie eine mit einem Punkt abgetrennte Endung haben, wie das allgemein üblich ist. Dann kann ich den Namen am letzten vorkommenden Punkt auftrennen und das "h" einfügen, oder was auch immer.
Nun brauchst du innerhalb der Eventhandlerfunktionen nur noch die src-Eigenschaft des betroffenen Objekts neu zu setzen, wobei die richtigen Werte schon als normalimage bzw. hoverimage im Objekt vorliegen.

function initOnmouseover()
  {
      this.src = this.hoverimage;
  }
  function initOnmouseout()
  {
      this.src = this.normalimage;
  }

Ist doch recht handlich geworden, oder nicht?

So long,
 Martin