zu spät?

[dicon]

Hallo Max...

vielleicht noch zwei kleine Hinweise:

document.getElementById(id).style.backgroundImage = "url('images/div11.png')";

PNGs werden glaube ich im IE erst ab Version 7 vollständig unterstützt. Bei älteren
Versionen gibt's Probleme mit Transparenzen. Ab Version 5.5 werden Transparenzen
über einen eignen Filter - AlphaImageLoader - dargestellt.

Wenn Du dein Konzept für die Code-Struktur deiner Site weiterverfolgen möchtest,
gibt's nur eine Möglichkeit ältere IE einzuschließen. Du ermittelst den Browsertyp
und reagierst für IE entsprechend:

1    function swap_bg(id) {
2    ...
3      if (navigator.userAgent.indexOf('MSIE') != -1){
4         document.getElementById(id).style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/div11.png", sizingMethod="crop")";
5      } else {
6         document.getElementById(id).style.backgroundImage = "url(images/div11.png)";
7      };
8    ...
9    }

Im Sinne der Trennung von Struktur, Darstellung und Verhalten/Funktionalität
(HTML, CSS, (J)Script) kannst Du aber alternativ auch einen komplett anderen Weg
gehen. Du kannst z.B. alle formatierenden Styles, dazu gehören auch die Hintergrund-
bilder für die DIVs, in einer externen CSS-Datei auslagern. Verwendest Du dafür dass
Class-Attribut änderst du später im Script nicht mehr backgroundImage sondern
className.

Beispiel für externe CSS-Anweisung:

1   .div1_normal {
2      background: transparent url(../images/div1_normal.png) repeat-x 0 0;
3      // mehr Formatierungen
4   }
5
6   .div1_over {
7      background: transparent url(../images/div1_over.png) repeat-x 0 0;
8      // mehr Formatierungen
9   }
10
11  /* === für IE wg. Transparenzen === */
12
13  * html div1_normal {
14      background-color: transparent;
15      background-image: none;
16      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/div1_normal.png", sizingMethod="crop");
17  }
18
19  * html div1_over {
20      background-color: transparent;
21      background-image: none;
22      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/div1_over.png", sizingMethod="crop");
23  }

Die ändernde JS-Funktion:

1    function swap_bg(id) {
2      var elem = document.getElementById(id);
3
4      if (!elem) {
5        window.alert('irgendeine aufschlussreiche Fehlermeldung');
6      } else {
7          if(elem.className = 'div1_normal'){
8             elem.className = 'div1_over';
9          } else {
10            elem.className = 'div1_normal';
11         };
12     };
13   };

Und HTML:

1   <div id="irgendwas_eindeutig" class="div1_normal"><a href="#" onMouseOver="swap_bg('irgendwas_eindeutig')"></a></div>

Bitte die Beispiele nur als Denkanregung verstehen. Hab sie jetzt auf die schnelle
auch nicht final getestet... geht nur um das Prinzip. Der o.g. geteaserte Ansatz
ermöglicht es auch, den Bildwechsel in eine einzige JS-Funktion zu packen. Du
prüfst einfach vor dem Wechsel den aktuellen class-Wert und änderst entsprechend.
Oder Du löst den Bildwechsel ganz ohne JS, einfach nur via CSS. Geht auch ;)

Grüße, dicon