onmouseover hintergrund eines anderen elements ändern

[Der Martin]

Hallo,

<li onmouseover="document.images[0].style.backgroundColor='#ffffff';" style="background-color: #ffffff; cursor:crosshair;" title="weiß"></li>

das Beispiel ist natürlich schlau, wenn es die Hintergrundfarbe zvon Weiß zu Weiß ändert. ;-)

Und ich auch die Anzahl an Bildern im voraus ermitteln kann, möchte ich noch fragen, ob ich images[0] auch durch so etwas wie von 1 bis x ersetzen kann?

Ja, du ahnst es schon: Mit einer Schleife, die von 0 bis x-1 läuft.

Ich geb ja zu, ich sollte lernen, wie ich das mit der Schleife erledigen kann, aber ich hab absolut keine Begabung fürs Programmieren, mir raucht immer gleich der Kopf und brauch für jede Kleinigkeit Tage wenn nicht gar Wochen. Am Ende muss ich dann doch wieder x mal hier fragen, was ich nun schon wieder falsch gemacht hab :(

Halb so wild. In diesem Fall ist es die traditionelle for-Schleife, die dich weiterbringt. Ganz allgemein funktioniert sie so:

for (<init>; <bedingung>; <zaehl>)
   { anweisungen;
     anweisungen;
   }

Dabei läuft folgendes ab:

führe <init> aus
Schleifenanfang:
  ist <bedingung> erfüllt?
  wenn nicht, verlasse die Schleife
  sonst führe den folgenden Anweisungsblock 1mal aus
  führe <zaehl> aus
  zurück zum Schleifenanfang
Schleifenende:
  weiterer Programmcode

Das war die abstrakte Erklärung. Meistens wird die for-Schleife verwendet, um mit einer Variablen einfach zu zählen. Beispiel:

for (x=0; x<10; x++)
   { alert("Durchlauf: " + x);
   }

Hier wird also zuerst x mit 0 initialisiert (<init>), dann der Block mit dem alert() mit dem aktuellen Wert von x ausgeführt, dann x um 1 erhöht (<zaehl>), und solange x noch kleiner 10 ist (<bedingung>), das Spiel wiederholt.
So schwierig ist das Prinzip nicht, oder?

Es gibt eventuell noch eine ganz andere Möglichkeit, das hängt aber von deinem konkreten Anwendungsfall ab: Mit CSS und dem Nachfahrenselektor. Deine Bilder stecken ja alle in einer Liste. Du hast also vereinfacht folgende Struktur:

<ul>
  <li> <img /> </li>
  <li> <img /> </li>
   ...
 </ul>

Wie wäre es, wenn du mit Javascript einfach für das Containerelement ul eine Klasse setzt und im CSS die Hintergrundfarbe aller Bilder mit dem Nachfahrenselektor setzt. Völlig ohne Schleife:

ul img
  { background-color: #FFF;
  }
 ul.alternativ img
  { background-color: #000;
  }

So long,
 Martin