Verschieben der Hintergrundgrafiken anderer div's bei Links

[Enrico]

Hallo,

ich möchte bei MouseOver über unsere Menüpunkte, jeweils abwechseln, das Hintergrundbild eines anderen div-Bereiches verschieben und habe es folgendermassen versucht:

.Neuigkeiten:hover #Lampe_1,
   .Vereinsheim:hover #Lampe_2,
   .Mitglieder:hover  #Lampe_1,
   .Kontakt:hover     #Lampe_2,
   .Gaestebuch:hover  #Lampe_1,
   .Links:hover       #Lampe_2,
   .Rechtliches:hover #Lampe_1
   {
      background-position: 0px -240px;
   }

Die div-Bereiche "Lampe_1" und "Lampe_2" sind, ebenso wie die einzelnen Menüpunkte, eigenständig und nicht in die Links eingebettet.

Bei MouseOver über den Link "Neuigkeiten" soll das Hintergrundbild des div-Bereiches "Lampe_1" verschoben werden, bei MouseOver über den Link "Vereinsheim" das Hintergrundbild des div-Bereiches "Lampe_2", bei MouseOver über den Link "Mitglieder" wieder das Hintergrundbild des div-Bereiches "Lampe_1" usw.

Das Verschieben der Hintergrundgrafiken wird aber nicht ausgeführt.

Wie kann ich mein Vorhaben realisieren?

Vielen Dank und Gruß
Enrico

[zaphod1984]

Die Notation

.Neuigkeiten:hover #Lampe_1....

ist ungültig, du kannst kein Kindelement eines Pseudoselektors ansprechen.

Was du vorhast geht nur per JavaScript.

[Enrico]

Hallo zaphod1984,

Danke für Deine Antwort.

Was du vorhast geht nur per JavaScript.

Hmm, das ist sehr schade, denn über css wäre es natürlich einfacher und unkomplizierter gewesen.

Naja, dann mach ich mich mal an's Werk.

Gruß
Enrico

[Længlich]

Yaba!

Die Notation

.Neuigkeiten:hover #Lampe_1....
ist ungültig, du kannst kein Kindelement eines Pseudoselektors ansprechen.

Doch, das kann man. Der Selektor ist okay. Allerdings sind die betreffenden Elemente nach Enricos Beschreibung keine Kinder der Links.

Was du vorhast geht nur per JavaScript.

Oder mit veränderter HTML-Struktur.

Viele Grüße vom Længlich

[Enrico]

Hallo Længlich,

Oder mit veränderter HTML-Struktur.

Kannst Du mir hier Anhaltspunkte liefern, wie die HTML-Struktur dann aussehen müsste?

Gruß
Enrico

[ChrisB]

Hi,

Oder mit veränderter HTML-Struktur.

Kannst Du mir hier Anhaltspunkte liefern, wie die HTML-Struktur dann aussehen müsste?

Wenn du den Kind- oder Nachfahren-Selektor nutzen können willst, müssen die Elemente, deren Formatierung du beim Überfahren eines anderen ändern willst, Kind/Nachfahre von diesem Element sein.

Auch andere Konstrukte sind denkbar, bspw. mittels des Geschwister-Selektors.

MfG ChrisB

[Enrico]

Hallo ChrisB,

Danke für Deine Antwort.

Auch andere Konstrukte sind denkbar, bspw. mittels des Geschwister-Selektors.

Gut, ich denke, damit werde ich ansetzen und mich einarbeiten.

Klingt auf jeden Fall nicht gerade unkompliziert, eben eine css-"Familienkiste" ;-)

Gruß
Enrico

[Enrico]

Hallo ChrisB,

gut, laut dieser Seite würde mein css-Konstrukt also greifen, wenn ich die "Lampen"-divs in die Links einbinde, was dann aber bedeuten würde, wenn ich das so richtig verstanden habe, dass ich dann 2 Lampen jeweils 7 Mal definieren und (überlagert) zur Anzeige bringen würde, da die Positionen der beiden Kampen absolut erfolgt ?!

Oder habe ich hier etwas falsch verstanden?

Gruß
Enrico

[ChrisB]

Hi,

gut, laut dieser Seite würde mein css-Konstrukt also greifen, wenn ich die "Lampen"-divs in die Links einbinde,

DIB in A ist nicht erlaubt.

was dann aber bedeuten würde, wenn ich das so richtig verstanden habe, dass ich dann 2 Lampen jeweils 7 Mal definieren und (überlagert) zur Anzeige bringen würde, da die Positionen der beiden Kampen absolut erfolgt ?!

Die Zahlen sagen wenig, ohne dass du uns dein konkretes Vorhaben zeigst - aber doppelt einbinden musst du nichts, wenn du mit Hintergrundbildern arbeitest und diese austauschst, bzw. anders positionierst (Stichwort: CSS-Sprites).

MfG ChrisB

[Længlich]

Uusia!

gut, laut dieser Seite würde mein css-Konstrukt also greifen, wenn ich die "Lampen"-divs in die Links einbinde, was dann aber bedeuten würde, wenn ich das so richtig verstanden habe, dass ich dann 2 Lampen jeweils 7 Mal definieren und (überlagert) zur Anzeige bringen würde, da die Positionen der beiden Kampen absolut erfolgt ?!

Oder habe ich hier etwas falsch verstanden?

Wenn ich Dein Vorhaben richtig deute, stimmt das, und der Nachfahrenselektor ist dann eine eher schlechte Lösung. Vermutlich hilft der Geschwister-Selektor, den ChrisB schon erwähnt hat. Bei ungefähr dieser Struktur:

<div>  
  <a ...>...</a>  
  <a ...>...</a>  
  <a ...>...</a>  
  <div id="lampe">...</div>  
</div>

im CSS:
a:hover ~ #lampe
selektieren.
Wenn Du allerdings sowieso beim Hovern für alle Links das gleiche machst, geht's vielleicht auch über das Elternelement:
div:hover #lampe

Ob dieses HTML für Dich sinnvoll ist, hängt von Deinen Inhalten ab. Vielleicht sollten die Links in einer Liste stehen, oder die <div>s eher <p>s sein oder Du kannst Dir div#lampe ganz sparen und den Hintergrund des Elternelements ändern oder ...

Außerdem wäre noch interessant, in welchen Browsern es laufen muß. IE6 kann nämlich weder ~ noch div:hover, aber der sollte IMHO nur noch unterstützt werden, wenn der Kunde es ausdrücklich verlangt (und dabei bleibt, nachdem man ihm den dadurch entstehenden Mehraufwand vorgerechnet hat ;-) ).

Viele Grüße vom Længlich

[Enrico]

Hallo Længlich,

<div>
  <a ...>...</a>
  <a ...>...</a>
  <a ...>...</a>
  <div id="lampe">...</div>
</div>[/code]

Langsam wird's interessant :-)

Problem ist nur, dass die Menülinks in einem anderen div-Bereich liegen als die beiden zu steuernden Lampen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
      <head>

</head>
      <body>
         <div id="Container_Links"></div>
         <div id="Container_Rechts">
            <?php

echo $Menue;

?>
         </div>
         <div id="Container_Mitte">
            <div id="Lampe_1"></div>
            <div id="Lampe_2"></div>
         </div>
      </body>
   </html>

Da ich alle div-Bereiche absolut positioniere, verschwinden die Lampen, wenn ich sie in den div "Container_Rechts" versetze, weil dieser nur 187px breit ist, die Lampen aber jeweils - wegen ihres Lichtwurfs, 336px.

Ob dieses HTML für Dich sinnvoll ist, hängt von Deinen Inhalten ab.

Die Lampen müssen eigenständige Elemente bleiben, da ich sonst den Effekt, dass die darunter anzuzeigenden Inhalte durch die Beleuchtung eine interessante Färbung bekommen, nicht mehr habe, d.h. die Lampen liegen auf oberster Ebene.

Außerdem wäre noch interessant, in welchen Browsern es laufen muß
wenn der Kunde es ausdrücklich verlangt

Der "Kunde" bin ich selber, da dies unsere Vereinshomepage wird, d.h. ich habe völlig freie Hand, was alles anbelangt.

Eine größtmögliche cross-Browser-Kompatibilität möchte ich aber schon anstreben, da ich ja nicht weiß, mit welchen Browsern auf welchen Systemen unsere Besucher unsere Seite besuchen werden.

Gruß
Enrico

[Længlich]

Nuedí!

Problem ist nur, dass die Menülinks in einem anderen div-Bereich liegen als die beiden zu steuernden Lampen:

[HTML]

Da ich alle div-Bereiche absolut positioniere, verschwinden die Lampen, wenn ich sie in den div "Container_Rechts" versetze, weil dieser nur 187px breit ist, die Lampen aber jeweils - wegen ihres Lichtwurfs, 336px.

Wieso verschwinden sie? overflow:hidden? Normalerweise können Kindelemente durchaus aus ihrem Elternelement herausragen.
Wenn Du sowieso alles absolut positionierst und die Lampen-Divs zudem keinen Inhalt haben, der z.B. von Screenreadern vorgelesen würde, ist es doch gerade egal, wo sie stehen. Wobei kein Inhalt eigentlich bedeutet, daß sie überhaupt nirgends stehen sollten. Vielleicht möchtest Du sie mit a:hover:after erst per CSS erzeugen, wenn sie gebraucht werden?

Ganz nebenbei halte ich Klassennamen, die "rechts", "links" etc. enthalten, für ungeschickt. Wenn Du die Positionen mal änderst, sind sie extrem irreführend. Benenne sie lieber nach ihrem Inhalt, z.B. "navi", "content" etc. - das bleibt richtig, egal, wie sie aussehen.

Ob dieses HTML für Dich sinnvoll ist, hängt von Deinen Inhalten ab.

Die Lampen müssen eigenständige Elemente bleiben, da ich sonst den Effekt, dass die darunter anzuzeigenden Inhalte durch die Beleuchtung eine interessante Färbung bekommen, nicht mehr habe, d.h. die Lampen liegen auf oberster Ebene.

Okay, dann können sie nicht background-image desjenigen Elements sein, das den Text enthält.

Außerdem wäre noch interessant, in welchen Browsern es laufen muß
wenn der Kunde es ausdrücklich verlangt

Der "Kunde" bin ich selber, da dies unsere Vereinshomepage wird, d.h. ich habe völlig freie Hand, was alles anbelangt.

Das ist schon mal sehr gut. ^^

Eine größtmögliche cross-Browser-Kompatibilität möchte ich aber schon anstreben, da ich ja nicht weiß, mit welchen Browsern auf welchen Systemen unsere Besucher unsere Seite besuchen werden.

Ja, das ist klar (wenn's nicht gerade ein Intranet mit bekannten Bedingungen ist). Aber wenn man keinen Kunden hat, der darauf besteht, daß sein teuer eingekauftes Design in allen noch so archaischen Browsern exakt gleich aussehen muß, dann wird es schon erheblich einfacher. Dann genügt es nämlich, wenn Texte lesbar, Links klickbar und Formulare benutzbar sind, und das ganze halbwegs ordentlich aussieht. Spielereien wie z.B. Schatten oder runde Ecken dürfen in alten Browsern auch mal fehlen, und Deine Lampen scheinen eine solche Spielerei zu sein. ;-)

:after kann IE6 übrigens auch nicht. :D

Viele Grüße vom Længlich

[Enrico]

Hallo Længlich

Wieso verschwinden sie? overflow:hidden?

Ja, ich habe die ausrichtenden div-Bereiche "Container_Links" und "Container_Links" sowie den div-Bereich "Container_Mitte", der die eigentlichen Seiten beinhaltet, mit "overflow:hidden" festgelegt.

ist es doch gerade egal, wo sie stehen.

Hmmm, design-technisch machen sie aber am oberen Rand des div-Bereiches "Container_Mitte" Sinn, damit sie hier zur Geltung kommen.

Vielleicht möchtest Du sie mit a:hover:after erst per CSS erzeugen, wenn sie gebraucht werden?

Sie werden ja, eben aufgrund des Designs, dauerhaft "benötigt", egal ob aus- oder eingeschaltet.

Konkludierend deuten alle Zeichen wohl tatsächlich darauf hin, dass ich mein Vorhaben mittels Javascript umsetzen muss?! :-|

Gruß
Enrico

[Længlich]

Ei!

Wieso verschwinden sie? overflow:hidden?

Ja, ich habe die ausrichtenden div-Bereiche "Container_Links" und "Container_Links" sowie den div-Bereich "Container_Mitte", der die eigentlichen Seiten beinhaltet, mit "overflow:hidden" festgelegt.

Hmm, Kindelemente mit position:absolute sollten aber eigentlich auch trotz overflow:hidden außerhalb sichtbar sein. Das hatte ich so in Erinnerung und habe es eben nochmal getestet. Vielleicht sind sie nicht abgeschnitten, sondern nur aus z-index-Gründen verdeckt?

ist es doch gerade egal, wo sie stehen.

Hmmm, design-technisch machen sie aber am oberen Rand des div-Bereiches "Container_Mitte" Sinn, damit sie hier zur Geltung kommen.

_Design_-technisch, eben. Das Design interessiert beim HTML aber allenfalls sekundär; erstmal sollen die HTML-Elemente den Inhalt sinnvoll auszeichnen. Der Lampeneffekt ist kein Inhalt und ergo idealerweise auch kein HTML-Element.

Vielleicht möchtest Du sie mit a:hover:after erst per CSS erzeugen, wenn sie gebraucht werden?

Sie werden ja, eben aufgrund des Designs, dauerhaft "benötigt", egal ob aus- oder eingeschaltet.

a:after für die ausgeschalteten, a:hover:after für die eingeschalteten?

Konkludierend deuten alle Zeichen wohl tatsächlich darauf hin, dass ich mein Vorhaben mittels Javascript umsetzen muss?! :-|

So verzweifelt sind wir noch lange nicht. ^^

Viele Grüße vom Længlich

[apsel]

Om nah hoo pez nyeetz, Enrico!

Konkludierend deuten alle Zeichen wohl tatsächlich darauf hin, dass ich mein Vorhaben mittels Javascript umsetzen muss?! :-|

nicht zwingend. Ohne deine konrete Seite zu kennen, wäre folgendes (mit Einschränkung der Semantik denkbar) denkbar:

<ul>
  <li>Menüpunkt 1</li>
  <li>Menüpunkt 2</li>
  ...
  <li>Menüpunkt k</li>
  <li id="lampe1">Lampe1</li>
  <li id="lampe2">Lampe2</li>
</ul>

Die "Lampen positionierst du absolut, sodass sie in der Liste der Menüpunkte nicht auftauchen, Änderungen für moderne Browser erreichst du über

li ~ #lampe1 {....}

li:nth-child(even) ~ #lampe2 {....}

Für ältere Browser müsstest du Id's vergeben und mit

#menu1 ~ #lampe1, menu3 ~ #lampe1 .... bzw. #menu2 ~ #lampe2 ....

ansprechen. IE < 7 kennen allerdings den Schwesternselektor auch nicht.

Matthias

[apsel]

Om nah hoo pez nyeetz, apsel!

aufgrund besserer Semantik und der konsequenten Trennung von Inhalt und Layout, würde ich Länglichs Lösungsvorschlag vorziehen der allerdings in IE<8 nicht funktioniert, da diese keinen generierten Inhalt kennen.

Matthias

[Længlich]

Lotjani!

aufgrund besserer Semantik und der konsequenten Trennung von Inhalt und Layout, würde ich Länglichs Lösungsvorschlag vorziehen der allerdings in IE<8 nicht funktioniert, da diese keinen generierten Inhalt kennen.

Man kann :before und :after mit einer expression nachbauen:
border-collapse:expression((new Function('elem', 'var span=document.createElement("span");span.className="after";elem.appendChild(span);span.innerHTML=" ";elem.style.borderCollapse="separate"'))(this));

Und dann entsprechend in allen Browsern selektieren:

a:after, a .after {...}  
a:hover:after, a:hover .after {...}

Statt border-collapse geht jede Eigenschaft, die a. nicht gebraucht wird und die b. der IE kennt. Ich nehme sehr gerne border-collapse und table-layout, weil die bei Nicht-Tabellen nie gebraucht werden.

Viele Grüße vom Længlich

[Enrico]

Hallo Matthias,

danke für Deinen Ansatz.

Mittlerweile denke ich aber, dass es doch fast besser ist, das über Javascript zu lösen, da es ansonsten wohl eher Probleme mit dem IE geben wird und ich mich mit "conditional definitions" oder wie diese "css-Weichen" heissen, rein gar nicht nicht auskenne.

Gruß
Enrico

[[Verkürzung möglich ?] Enrico]

Nochmals Hallo Matthias,

ich habe das jetzt über folgenden Code gelöst:

<a ... onmouseover="Lampen_schalten ();">...</a>

function Lampen_schalten ()
   {
      Nr = (Math.floor (Math.random () * (1 - 0 + 1)) + 1);

if (Nr == 1)
      {
         Lampe_1.className = (Lampe_1.className == "Lampe_1_an") ? "Lampe_1_aus" : "Lampe_1_an";
      }
      else
      {
         Lampe_2.className = (Lampe_2.className == "Lampe_2_an") ? "Lampe_2_aus" : "Lampe_2_an";
      }
   }

Kann man den Code noch weiter verkürzen, da sich die Anweisungen ja nur um die Ziffern unterscheiden?

Gruß
Enrico

[Længlich]

I dansi!

Nr = (Math.floor (Math.random () * (1 - 0 + 1)) + 1);

Also, (1 - 0 + 1) kann man schonmal zu 2 verkürzen ...

Aber, äh, Math.random? Du willst also einen zufälligen Effekt? Dann waren ungefähr 90% dieses Threads für die Tonne, denn Zufall geht mit CSS nicht. Das wäre auch durchaus eine Erwähnung in einem beliebigen Posting, idealerweise im ersten, wert gewesen.
Also nächstes Mal bitte detaillierter beschreiben, was das Ganze werden soll - ich habe Dich weit weniger verstanden, als ich dachte.

Viele Grüße vom Længlich

[Enrico]

Hallo Længlich,

Dann waren ungefähr 90% dieses Threads für die Tonne

Ich bin erst jetzt auf diese Schiene gewechselt, weil sich dies über Javascript ja umsetzen lässt. Um einen wechselnden Effekt in css umzusetzen, da Zufall mit css bekannterweise nicht geht, wollte ich die Lampen zunächst rein über css abwechselnd schalten. Somit war der Thread für mich insofern sehr hilfreich, als dass ich gelernt habe, dass mit css sehr viel, aber nicht alles möglich ist und Javascript durchaus seine Berechtigung hat, sofern sinnvoll und dezent eingesetzt.

Also nächstes Mal bitte detaillierter beschreiben, was das Ganze werden soll

Zusammengefasst:

Ich wollte eine abwechselnde Schaltung zunächst rein über css und Verschiebung von Hintergrundgrafiken flott umsetzen -> geht nicht wie gewünscht -> Wechsel auf Javascript mit Zufallszahl.

Ich hoffe, die Missverständnisse sind nun beseitigt.

Viele Grüsse zurück
Enrico

[Længlich]

Gün aydin!

Ich hoffe, die Missverständnisse sind nun beseitigt.

Ja, ich denke schon. Danke.

Jetzt ist mir nur noch unklar, warum die CSS-Lösungsansätze bei Dir alle nicht gingen. Wir hatten:

• Lampen als Kindelemente der Links (nicht empfohlen, da sie mehrfach definiert werden müßten)
• Lampen als Geschwister der Links, Selektion mit ~
• Lampen als per CSS generierte Pseudo-Elemente (ggf. mit expression für alte IEs)
• Apsels Ansatz mit der Liste

M.E. sollten die alle gehen. Ich habe jede dieser Techniken schon verwendet, wenn auch nicht exakt für das, was Du vorhast.

Viele Grüße vom Længlich

[Enrico]

Hallo Længlich,

Ja, ich denke schon. Danke.

Wofür bedankst Du Dich denn? Deine Reaktion ist nur allzu verständlich, ich hätte auch nicht anders reagiert, denn woher hättest Du wissen sollen, dass ich - in Deinen Augen - so schnell "umschwenke" ?

Nichts liegt mir ferner, als wenn sich Unmut ausbreitet, weil Missverständnisse vorherrschen :-)

Jetzt ist mir nur noch unklar, warum die CSS-Lösungsansätze bei Dir alle nicht gingen

Wahrscheinlich hatte es irgendwo bei meinen Umsetzungen noch gezwickt.

Auf alle Fälle bin ich glücklich, dass es nun über die Javascript-Lösung klappt und das auch noch ohne jegliche Verzögerungen :-)

Danke für Deine Unterstützung, auch wenn sie letztendlich "nur" dazu geführt haben, dass ich eine funktionierende Javascript-Lösung gebastelt habe.

Nur nochmal kurz zurück zu meiner Frage nach Verkürzungsmöglichkeiten:

Die Funktion hat folgenden Aufbau:

function Lampen_schalten ()
{
   Nr = (Math.floor (Math.random () * (1 - 0 + 1)) + 1);

if (Nr == 1)
   {
      Lampe_1.className = (Lampe_1.className == "Lampe_1_an") ? "Lampe_1_aus" : "Lampe_1_an";
   }
   else
   {
      Lampe_2.className = (Lampe_2.className == "Lampe_2_an") ? "Lampe_2_aus" : "Lampe_2_an";
   }
}

Ich habe nun das "(1 - 0 + 1))" gegen die Ziffer "2" ersetzt.

Wie könnte ich nun noch die if-Abfrage verkürzen, da sich die Anweisungen, wie bereits geschrieben, nur in einer einzigen Ziffer unterscheiden?

Gruß
Enrico

[Længlich]

Guana mu lenin sihak dok!

Ja, ich denke schon. Danke.

Wofür bedankst Du Dich denn? Deine Reaktion ist nur allzu verständlich, ich hätte auch nicht anders reagiert, denn woher hättest Du wissen sollen, dass ich - in Deinen Augen - so schnell "umschwenke" ?

Daß Du noch mitliest und sowas klärst - das macht keineswegs jeder. Es gibt auch Fragesteller, die sofort verschwinden, wenn sie eine Lösung haben und damit eventuell später folgende Tips, Nachfragen (oder auch mal Witze ;-) ) verpassen.

Nichts liegt mir ferner, als wenn sich Unmut ausbreitet, weil Missverständnisse vorherrschen :-)

:-)

Jetzt ist mir nur noch unklar, warum die CSS-Lösungsansätze bei Dir alle nicht gingen

Wahrscheinlich hatte es irgendwo bei meinen Umsetzungen noch gezwickt.

Das war nicht als Vorwurf gedacht, falls es so aussah. Würde mich nur rein fachlich interessieren, denn es kommt immer mal vor, daß eine isoliert betrachtete Lösung später beim Einbau in ein komplexeres Layout mit irgendeiner anderen Gegebenheit kollidiert. Aber wenn Du jetzt ein zufriedenstellendes JS hast, lohnt es sich auch nicht mehr, da noch groß nachzuforschen.

Die Funktion hat folgenden Aufbau:

function Lampen_schalten ()
{
   Nr = (Math.floor (Math.random () * (1 - 0 + 1)) + 1);

if (Nr == 1)
   {
      Lampe_1.className = (Lampe_1.className == "Lampe_1_an") ? "Lampe_1_aus" : "Lampe_1_an";
   }
   else
   {
      Lampe_2.className = (Lampe_2.className == "Lampe_2_an") ? "Lampe_2_aus" : "Lampe_2_an";
   }
}

Ich habe nun das "(1 - 0 + 1))" gegen die Ziffer "2" ersetzt.

Wie könnte ich nun noch die if-Abfrage verkürzen, da sich die Anweisungen, wie bereits geschrieben, nur in einer einzigen Ziffer unterscheiden?

Wo hast Du denn die beiden Variablen Lampe_1 und Lampe_2 her? Vom Browser vorgegeben, weil es <div>s mit diesen IDs gibt? Wenn ja, besser nicht darauf verlassen, sondern mit getElementById(...) selbst holen.
Und dann geht auch die Verkürzung ganz leicht: Statt in zwei unabhängige Variablen speicherst Du die beiden Referenzen in ein Array. Dann brauchst Du gar kein if mehr, sondern kannst die Zufallszahl als Index verwenden.

Viele Grüße vom Længlich

[Enrico]

Hallo Længlich,

Daß Du noch mitliest und sowas klärst - das macht keineswegs jeder

Ein Forum ist meines Erachtens dazu da, Fragen zu klären und Lösungsansätze zu liefern. Dass man eine Lösung hat, heisst ja nicht, dass es nicht noch eine bessere geben kann, deswegen ist weiterlesen, Missverständnisse klären etc. keineswegs unsinnig.

Und ich lese auch ohne eigene programmiertechnische Probleme sehr gerne in diesem Forum, weil die Antworten teilweise sehr bissig sind und sowas finde ich sehr amüsant ;-)

Das war nicht als Vorwurf gedacht, falls es so aussah.

Keine Sorge, ich bin Waage mit Aszendent Skorpion und sehr robust (charakterlich betrachtet) ;-)

Wo hast Du denn die beiden Variablen Lampe_1 und Lampe_2 her?
Vom Browser vorgegeben, weil es <div>s mit diesen IDs gibt?
Wenn ja, besser nicht darauf verlassen, sondern mit getElementById(...) selbst holen.

Sorry, das hatte ich nicht mitnotiert. Diese Handhabung habe ich integriert, allerdings außerhalb meiner Funktion.

Dann brauchst Du gar kein if mehr, sondern kannst die Zufallszahl als Index verwenden.

Ok, toller Ansatz :-)

Das ist mein aktueller Stand:

var Lampe_1 = document.getElementById ("Lampe_1");
var Lampe_2 = document.getElementById ("Lampe_2");
var Lampe   = new Array (Lampe_1, Lampe_2);

function Lampen_schalten ()
{
   Nr = (Math.floor (Math.random () * 1));

Lampe [Nr].className = (Lampe [Nr].className == Lampe [Nr].className + "_an") ? Lampe [Nr].className + "_aus" : Lampe [Nr].className + "_aus";
}

Allerdings scheinen hier aber keine className's namens "Lampe_1_an", "Lampe_1_aus", "Lampe_2_an" oder "Lampe_2_aus" herauszukommen, Fehlermeldungen oder Warnungen gibt mir Firebug nicht aus, d.h. von der Fehlerseite betrachtet stimmt alles.

Brauche ich die Anweisung "eval" vor der Klassen-Zusammensetzung?

Gruß
Enrico

[Enrico]

Hallo Længlich,

man, bin ich doof...

Die Zuweisung Lampe [Nr].className + "_an" macht ja beispielsweise "Lampe_1_an_an", das kann nicht funktionieren, am Rest tüfftle ich noch.

Gruß
Enrico

[Enrico]

Hallo Længlich,

hmmmm, grübel, grübel und studier'...

Folgende Answeisung...

Lampe [Nr] + "_aus"

...ergibt bei einem alert...

[object HTMLDivElement]_aus

D.h., dass Lampe [Nr] nicht gezogen wird ?

Keine Fehlermeldung oder Warnung in Firebug.

Gruß
Enrico

[JürgenB]

Hallo Enrico,

zwei Ideen:

müssen die Klassen Lampe_1_an, Lampe_1_aus, Lampe_2_an, Lampe_2_aus heißen oder reicht hier auch an / aus?

du kannst Strings mit dem "+"-Operator aneinander ketten,

Klasse = "Lampe_"+Nr+"_an" ;

Gruß, Jürgen

[ChrisB]

Hi,

Folgende Answeisung...

Lampe [Nr] + "_aus"

...ergibt bei einem alert...

[object HTMLDivElement]_aus

D.h., dass Lampe [Nr] nicht gezogen wird ?

Nein, das heißt, dass Lampe[Nr] die JavaScript-Repräsentation eines DIV-Elementes ist, und da du an dieses abstrakte Gebilde einen Textstring anhängen willst, muss es erst in einen String konvertiert werden - und dabei kommt [object HTMLDivElement] (o.ä., je nach Browser) heraus.

MfG ChrisB

[Enrico]

Hallo ChrisB & Jürgen,

sorry, hatte gerade ein kurzer Nickerchen gemacht *augen-reib*

Danke für eurer beider Denkanstösse, so klappt's:

function Lampen_schalten ()
   {
      Nr = (Math.floor (Math.random () * 2));

var An  = "Lampe_" + (Nr + 1) + "_an";
      var Aus = "Lampe_" + (Nr + 1) + "_aus"

Lampe [Nr].className = (Lampe [Nr].className == An) ? Aus : An;
   }

Ist zwar (u.U.) nicht elegant, aber jetzt habe ich keine unnötige Abfrage mehr.

Gruß
Enrico