onmouseover hintergrund eines anderen elements ändern

[konfusius]

Guten Abend

ich habe diverse leere listenelemente, inline positioniert nur mit Farben (ohne Text drin)
dannach folgen verschiedene bilder mit transparenzen.

ich hätte gerne, dass beim mouse over über ein li element die bgcolor aller bilder in einem bestimmten div geändert werden. hab jetzt schon 1000 sachen probiert und und recherchiert, es funktioniert einfach nicht. (ich gestehe, dass ich auch etwas zu doof für javascript bin)

Ein Beispiel für einen Listeneintrag (der 100ste versuch):

<li  onmouseover="document.getElementById('all_sujets').getElementsByTagName('img').style.bgcolor:#ffffff;" style="background-color: #ffffff;" title="weiß"></li>

die bilder erscheinen nach den listenelementen so in der site:

<div id="all_sujets">
<img name="sujet" src="alpha1.png" />
<img name="sujet" src="alpha2.png" />
</div>

Schön wäre natürlich auch, wenn die Mousehand dabei erschiene

[konfusius]

PS: ich habs auch mit anderen sachen schon probiert wie

onmouseover="document.images.style.background-color:;"

nun die anderen versuche hab ich schon gelöscht :(

[ChrisB]

Hi,

onmouseover="document.getElementById('all_sujets').getElementsByTagName('img').style.bgcolor:#ffffff;"

Das kann so natürlich nicht funktionieren.

getElementsByTagName gibt dir nicht die Referenz auf einen Knoten zurück, sondern eine *Liste* von Knoten - und diese Liste hat kein Unterobjekt style.
Du müsstest die Knotenliste in einer Schleife durchlaufen, und dann style-Attribute der einzelnen Knoten ändern.

Wenn es nur um eine begrenzte Anzahl von Farben geht, dann könnte man aber auch einfacher das gewünschte erreichen, in dem man
a) feste Regeln bereits im Stylesheet anlegt,
b) dabei einen Selektor verwendet, der sich über die Änderung der Klasse eines Vorfahrenelementes "aktivieren" lässt, um die IMG-Objekte mit einer Hintergrundfarbe zu formatieren, und
c) dann die erwähnte Klasse an einem Vorfahrenelement per JavaScript setzt.

Schön wäre natürlich auch, wenn die Mousehand dabei erschiene

SELFHTML macht schön.

MfG ChrisB

[konfusius]

Ojeh, klingt das kompliziert, aber Danke für die Antwort.

Ist der Haken bei diesem eigentlich der gleiche?:
<li onmouseover="document.images.style.background-color:#ffffff;"></li>

Danke
Bernd

[ChrisB]

Hi,

Ist der Haken bei diesem eigentlich der gleiche?:
<li onmouseover="document.images.style.background-color:#ffffff;"></li>

Ja, auch document.images liefert eine NodeList.

MfG ChrisB

[Der Martin]

Hallo,

Ojeh, klingt das kompliziert, aber Danke für die Antwort.
Ist der Haken bei diesem eigentlich der gleiche?:
<li onmouseover="document.images.style.background-color:#ffffff;"></li>

dieses Stück Code hat mehrere Haken.

1. document.images ist (wie ChrisB schon erwähnte, eine Liste von Bildern und braucht demzufolge noch einen Index, um ein einzelnes Bild zu adressieren.

2. Die CSS-Eigenschaft background-color kann nicht direkt als Javascript-Eigenschaft verwendet werden, denn der Bindestrich würde in JS als "minus" interpretiert. Dafür gilt die Regel: Der Bindestrich entfällt, der folgende Buchstabe wird dafür groß geschrieben. Aus background-color wird also backgroundColor.

3. Der Doppelpunkt trennt zwar in CSS die Eigenschaft vom Wert. In Javascript ist das Ganze aber im weitesten Sinn die Zuweisung eines Wertes an eine Variable. Der richtige Operator für eine Zuweisung ist das Gleichheitszeichen.

4. Der zugewiesene Wert ist ein String und gehört in Anführungszeichen geschrieben.

Die Zeile müsste also insgesamt lauten:

<li onmouseover="document.images[x].style.backgroundColor='#FFFFFF';"></li>

wobei x der Index des Bildes innerhalb des Dokuments ist.

Ich habe hier außerdem die hexadezimalen Ziffern groß geschrieben, weil das üblich ist.

So long,
 Martin

[konfusius]

Das habe ich befürchtet :)

Wäre das nicht ziemlich rechenaufwendig, jedesmal wenn der User über ein anderes Farbfeld fährt die Eigenschaften mit einer Schleife zu ändern? (ganz davon abgesehen, dass ich wahrscheinlich 1 Woche an dieser Schleife tüfteln müsste bis ich dau das hinbekomme)

Da sind nämlich oben auf der Seite schon ca. 30 kleine Farbfelder (die RGB-Werte ohne Raute aus einer DB kommend) und darunter ab ca. 40 Bilder, tendenz steigend.

Das war ja auch nur so eine erste Idee, wie ich das umsetzen könnte - bisher musste ich zum Glück clientseitig noch nichts machen.
Will fragen: wie würdet ihr das lösen?

Herzlichen Dank
Bernd

[ChrisB]

Hi,

Das war ja auch nur so eine erste Idee, wie ich das umsetzen könnte - bisher musste ich zum Glück clientseitig noch nichts machen.
Will fragen: wie würdet ihr das lösen?

Kommt darauf an, was genau du vor hast. (Merke: Das solltest du immer mit als erstes beschreiben - nur aus verkorksten Versuchen, etwas vermutlich sinnfreies umzusetzen, können die Leser seltenst erkennen, was eine sinnvolle Lösung für das unbekannte Problem sein könnte.)

Wenn du lediglich darstellen willst, wie sich die gewählte Hintergrundfarbe hinter einem bestimmten Bildinhalt(?) in verschiedenen Alphatransparenzstufen auswirkt - dann würde ich die verschiedenen Transparenzstufen-Bilder in *ein* PNG packen. Rundherum, um die "Einzelbilder" bekommt das PNG nicht durchsichtige Fläche (ggf. der Hintergrundfarbe der Webseite entsprechend).
Dann braucht man nur noch eine Hintergrundfarbe für dieses eine Bildobjekt setzen - und kann sich in den Bereichen mit verschiedenen Alphatransparenz-Leveln anschauen, wie stark diese jeweils durchscheinen würde.

MfG ChrisB

[konfusius]

Also gut, dann versuche ich, es nochmal besser zu beschreiben.

In einer DB sind viele bunte rgb werte ohne # gespeichert zb. 5e2d61, c4262e, etc. (ja sie sind dort lowercase gespeichert, eine Upper/Lowercase Diskussion ist jedoch zu diesem Zeitpunkt noch nicht dringend erforderlich :)

diese rgb Werte  werden dynamisch als background-color style eigenschaft in <li> tags gepackt und inline als 10x10 px große felder oben auf einer Seite angezeigt.

<li  style="background-color: #<%= str_film_webhex %>;" title="<%= str_film_color_name %>"> [NEXT]  
<li  style="background-color: #<%= str_film_webhex %>;" title="<%= str_film_color_name %>">
~~~ etc.  
  
Darunter werden ebenfalls aus einer DB kommend besagte png-Bilder mit alphatransparenz in reih und glied dargestellt und haben eingangs einen background-color default wert von #000 der durch die Transparenz sichtbar ist.  
~~~html
<div id="all_sujets">  
<img name="sujet" src="images/sujet_alpha/32_alpha.png" /> [NEXT]  
<img name="sujet" src="images/sujet_alpha/54_alpha.png" /> etc.  
</div>

Die Aufgabe ist nun, dass beim Überfahren der Listenelemente mit der Mouse die bgcolor ALLER <img> Tags innerhalb von <div id="all_sujets"> entsprechend des RGB wertes des mouseover Listenelements geändert werden soll. Angedacht ist auch, in einer Folgeseite, dieses Verhalten dahingehend zu ändern, dass onclick die Farbe dauerhaft, also bis zum nächsten click auf ein Farbfeld erhalten bleibt, dort wird es dann allerdings einfacher, als dass dann nur mehr ein Bild zu adressieren sein wird.

Die Frage ist natürlich, wie das performant genung bewerkstelligt werden kann, schließlich steht es dem Anwender frei, wie wild mit der Maus über diese ca. 30-40 Farbfelder drüberzuackern und dabei die bgcolors von ca. 40-50 Bildern geändert werden müssen.

Hoffe, ich hab das jetzt besser beschrieben und wenn das technische Problem erst mal gelöst ist, gelobe ich, die RGB Werte nach Uppercase zu konvertieren - versprochen! ;-)

Danke
Bernd

[ChrisB]

Hi,

Die Frage ist natürlich, wie das performant genung bewerkstelligt werden kann, schließlich steht es dem Anwender frei, wie wild mit der Maus über diese ca. 30-40 Farbfelder drüberzuackern und dabei die bgcolors von ca. 40-50 Bildern geändert werden müssen.

Dann sollte mein Vorschlag ja eigentlich umsetzbar sein.

MfG ChrisB

[gast42]

Ich habe hier außerdem die hexadezimalen Ziffern groß geschrieben, weil das üblich ist.

wo üblich? bei mir nicht, und ich kenne auch sonst kaum Seiten, wo das üblich ist. Hier wäre sogar ein kurzes #fff praktischer als #FFFFFF.

Also bitte sprich nur von dir und deinen Vorlieben.

[Der Martin]

Hallo,

Ich habe hier außerdem die hexadezimalen Ziffern groß geschrieben, weil das üblich ist.
wo üblich?

fast überall da, wo Informatiker und Programmierer mit hexadezimalen Zahlen hantieren. Klein geschriebene hexadezimale "Ziffern" habe ich bisher außerhab des Themenkomplexes HTML/CSS (Farbangaben) nur selten gesehen.

Von der gängigen Praxis abgesehen ist das Großschreiben hier auch wegen des Lesens günstiger, denn das Auge/Hirn-Duo ist es gewöhnt, klein geschriebene Ausdrücke als Wort zu erfassen; groß geschriebene (Abkürzungen, Codes, oder eben Hexzahlen) fallen dagegen gleich als etwas Abweichendes auf - was im übrigen auch das Argument ist, Text nicht durchgehend in Großbuchstaben zu schreiben, denn das erschwert auch wieder das Lesen und Erfassen.

bei mir nicht, und ich kenne auch sonst kaum Seiten, wo das üblich ist. Hier wäre sogar ein kurzes #fff praktischer als #FFFFFF.

Ich schließe daraus, dass du hexadezimale Angaben nur aus dem Web-Kontext (HTML/CSS) kennst. Ja, da sieht man sie sehr oft klein geschrieben, warum auch immer.
Die Kurznotation mit nur drei Stellen finde ich übrigens auch ganz pfiffig, auch wenn ich sie selbst nicht verwende.

Also bitte sprich nur von dir und deinen Vorlieben.

Nein, tu ich nicht. Dann hätte ich geschrieben: "weil mir das besser gefällt".

Schönes Wochenende,
 Martin

[gast42]

fast überall da, wo Informatiker und Programmierer mit hexadezimalen Zahlen hantieren. Klein geschriebene hexadezimale "Ziffern" habe ich bisher außerhab des Themenkomplexes HTML/CSS (Farbangaben) nur selten gesehen.

aber nur dieser ist hier relevant

Von der gängigen Praxis abgesehen ist das Großschreiben hier auch wegen des Lesens günstiger, denn das Auge/Hirn-Duo ist es gewöhnt, klein geschriebene Ausdrücke als Wort zu erfassen; groß geschriebene (Abkürzungen, Codes, oder eben Hexzahlen) fallen dagegen gleich als etwas Abweichendes auf - was im übrigen auch das Argument ist, Text nicht durchgehend in Großbuchstaben zu schreiben, denn das erschwert auch wieder das Lesen und Erfassen.

nun ist Quellcode ja nur selten für das direkte Lesen bestimmt, und mein Browser verfügt über kein Auge/Hirn-Duo

Ich schließe daraus, dass du hexadezimale Angaben nur aus dem Web-Kontext (HTML/CSS) kennst.

die Schlussfolgerung ist falsch, ich arbeite kontextsensitiv

Ja, da sieht man sie sehr oft klein geschrieben, warum auch immer.

hat was mit Komprimierung zu tun -> Dateien mit vielen gleichen (kleinen) Zechen lassen sich besser komprimieren als solche mit dauendem Wechsel (groß/klein)

Die Kurznotation mit nur drei Stellen finde ich übrigens auch ganz pfiffig, auch wenn ich sie selbst nicht verwende.

pfiffig? kürzer!

Also bitte sprich nur von dir und deinen Vorlieben.

Nein, tu ich nicht. Dann hätte ich geschrieben: "weil mir das besser gefällt".

Aber offensichtlich triffts das doch! Du möchtest CSS-Farbangaben so sehen, wie du sie aus anderen Hex-Zahlen-Kontexten kennst. Und das ist OK! Aber nicht üblich.

schönes Wochenende

[konfusius]

1. document.images ist (wie ChrisB schon erwähnte, eine Liste von Bildern und braucht demzufolge noch einen Index, um ein einzelnes Bild zu adressieren.

Die Zeile müsste also insgesamt lauten:

<li onmouseover="document.images[x].style.backgroundColor='#FFFFFF';"></li>
wobei x der Index des Bildes innerhalb des Dokuments ist.

Hier nochmal angesetzt:

nachdem es mit dem ersten Bild wie erartet tadellos so funktioniert:
<li onmouseover="document.images[0].style.backgroundColor='#ffffff';" style="background-color: #ffffff; cursor:crosshair;" title="weiß"></li>

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?

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 :(

Danke für euere Geduld!
Bernd

[ChrisB]

Hi,

nachdem es mit dem ersten Bild wie erartet tadellos so funktioniert:
<li onmouseover="document.images[0].style.backgroundColor='#ffffff';" style="background-color: #ffffff; cursor:crosshair;" title="weiß"></li>

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?

Du kannst nacheinander auf die images [0] bis images[x] zugreifen.

Ich geb ja zu, ich sollte lernen, wie ich das mit der Schleife erledigen kann,

Natürlich, Schleifen bieten sich für sowas nicht nur an, sie drängen sich sgar auf. Es gibt dazu an dieser Stelle keine vernünftige Alternative.

MfG ChrisB

[Der Martin]

Hallo,

Natürlich, Schleifen bieten sich für sowas nicht nur an, sie drängen sich sgar auf. Es gibt dazu an dieser Stelle keine vernünftige Alternative.

Sicher?

Ciao,
 Martin

[ChrisB]

Hi,

Natürlich, Schleifen bieten sich für sowas nicht nur an, sie drängen sich sgar auf. Es gibt dazu an dieser Stelle keine vernünftige Alternative.

Sicher?

Das war darauf bezogen, etwas mit objekt[0], objekt[1] bis objekt[x] zu machen.

MfG ChrisB

[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