Manni: Button ändern

Beitrag lesen

Hallo zusammen,
dieser thread hat mich auf eine Idee gebracht, deren Verwirklichung aber ohne Eure Hilfe nicht optimal möglich ist.
Ich habe auf meinen Seiten verschiedene Bilder (als Submit-Button oder als Link). Alle habe ich bisher individuell in HTML mit onmouse....#
beim Überfahren ausgetauscht.
Jetzt möchte ich ein ausgelagertes Javascript machen der vorgeschlagenen Art, in dem alle möglichen Bilder bearbeitet werden.
Dazu nenne ich die Bilder bild1, bild2, ..., bild40, die beim Überfahren angezeigte Bilder bild1h, bild2h, ..., bild40h, die zugehörige id ist id1, id2, ... (oder auch bild1, bild2,....).

Dies habe ich folgendermassen geschafft:

  
  window.onload = init;  
  function init()  
  {  
   if (document.getElementById("bild1"))  
   {  
    document.getElementById("bild1").onmouseover = initOnmouseover1;  
    document.getElementById("bild1").onmouseout  = initOnmouseout1;  
   }  
   if (document.getElementById("bild2"))  
   {  
    document.getElementById("bild2").onmouseover = initOnmouseover2;  
    document.getElementById("bild2").onmouseout  = initOnmouseout2;  
   }  
   if (document.getElementById("bild3"))  
   {  
    document.getElementById("bild3").onmouseover = initOnmouseover3;  
    document.getElementById("bild3").onmouseout  = initOnmouseout3;  
   }  
  }  
  
.....  
  
  function initOnmouseover1()  
  {  
   this.src = "bild1h.jpg";  
  }  
  function initOnmouseout1()  
  {  
   this.src = "bild1.jpg";  
  }  
  
  function initOnmouseover2()  
  {  
   this.src = "bild2h.jpg";  
  }  
  function initOnmouseout2()  
  {  
   this.src = "bild2.jpg";  
  }  
  
  function initOnmouseover3()  
  {  
   this.src = "bild3h.jpg";  
  }  
  function initOnmouseout3()  
  {  
   this.src = "bild3.jpg";  
  }  
  
......  

Da nicht in jedem HTML jedes Bild angesprochen wird, frage ich oben jeweils ab, ob die id exisitiert.
Das gesamte Skript ist natürlich äußerst umfangreich und unschön.
Daher habe ich es versucht in der Art

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

... aber das geht, wie ich schnell bemerkte nicht, denn es muss ja für jede id eine Funktion onmouse... existieren.
Hat jemand eine Idee, wie man das Problem elegant lösen könnte?