onMouseOver auf zwei divs beziehen

[Max]

Hallo zusammen!
Ich habe hier einen Java-Script, der sich auf einen Div auswirkt (balkenp).

<img src="images/photos.png" onMouseOver="swap_bg('balkenp');" onMouseOut="swap_bg_back('balkenp');" border="0"> <br><br>

Ist es auch möglich, den onMouseOver-Effekt auf zwei Divs zu beziehen?
Habe es durch Setzen eines Kommas versucht: swap_bg('balkenp','BALKEN2');".
Das funktioniert aber leider nicht.

Vielen Dank schonmal für alle Bemühungen!

[Gunnar Bittersmann]

Hello out there!

Habe es durch Setzen eines Kommas versucht: swap_bg('balkenp','BALKEN2');".
Das funktioniert aber leider nicht.

Was tut swap_bg()? Ist die Funktion so implementiert, dass sie mehrere Argumente verarbeitet?

Im Wert des Eventhandler-Attributs stehen JavaScript-Anweisungen; es dürfen auch mehrere sein.

See ya up the road,
Gunnar

[Max]

Hallo nochmal und vielen dank schonmal für die Antwort!

Was tut swap_bg()? Ist die Funktion so implementiert, dass sie mehrere Argumente verarbeitet?

Die beiden Funktionen ändern den Hintergrund eines Div-Elements beim Überfahren einer Grafik mit der Maus:

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

function swap_bg_back(id)
{
 document.getElementById(id).style.backgroundImage = "url('images/div1.png')";
}

Ich frage mich ob es möglich ist, dass sich der Hintergrund von zwei Divs auf einmal ändert, wenn man eine Grafik mit der Maus überfährt.
Bei Setzen eines Kommas oder Semikolons passiert leider nichts.

Danke!

[Gunnar Bittersmann]

Hello out there!

Was tut swap_bg()? Ist die Funktion so implementiert, dass sie mehrere Argumente verarbeitet?

Die beiden Funktionen ändern den Hintergrund eines Div-Elements beim Überfahren einer Grafik mit der Maus:

_Eines_ Elements, aha. (Dass ein 'div'-Element sein müsste, davon steht da nichts.

Ich frage mich ob es möglich ist, dass sich der Hintergrund von zwei Divs auf einmal ändert, wenn man eine Grafik mit der Maus überfährt.

Ja, indem du die Funktion mit der einen ID als Argument aufrufst und im selben Eventhandler danach die Funktion mit der anderen ID als Argument aufrufst.

Bei Setzen eines Kommas oder Semikolons passiert leider nichts.

Du sollst auch nicht zwei Argumente übergeben, wenn die Funktion nur eins erwartet.

See ya up the road,
Gunnar

[Max]

Super, Danke!

[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