Umfärbung von 2 Buttons

[Martina]

Hallo!

Ich habe 2 Buttons, die je nach gedrücktem Knopf gegengleich umgefärbt werden. Folgende Methode hat mit Konstant-Farben per style.background gut funktioniert.

Nun habe ich die Buttons mit einem Gradienten-Farben eingefärbt, und plötzlich gehts nicht mehr. Was ist hier das Problem?

  
<span id="knopf1" style="cursor:pointer; background-image: linear-gradient(#dfd, #7f7);"  
onmousedown="  
getElementById('knopf1').style.background-image = 'linear-gradient(#dfd, #7f7)'  
getElementById('knopf2').style.background-image = 'linear-gradient(#fff, #ccc)'  
">Knopf 1</span>  
  
<span id="knopf2" style="cursor:pointer; background-image: linear-gradient(#fff, #ccc);"  
onmousedown="  
getElementById('knopf1').style.background-image = 'linear-gradient(#fff, #ccc)'  
getElementById('knopf2').style.background-image = 'linear-gradient(#dfd, #7f7)'  
">Knopf 2</span>  

[ichbinich]

Hallo,

Nun habe ich die Buttons mit einem Gradienten-Farben eingefärbt, und plötzlich gehts nicht mehr. Was ist hier das Problem?

<span id="knopf1" style="cursor:pointer; background-image: linear-gradient(#dfd, #7f7);"
onmousedown="
getElementById('knopf1').style.background-image = 'linear-gradient(#dfd, #7f7)'
getElementById('knopf2').style.background-image = 'linear-gradient(#fff, #ccc)'
">Knopf 1</span>

  
In onmousedown fehlt jeweils ein Semikolon und es muss backgroundImage heissen.  
  
vg ichbinich  

-- 
Kleiner Tipp:  
Tofu schmeckt am besten, wenn man es kurz vor dem Servieren durch ein saftiges Steak ersetzt...

[Gunnar Bittersmann]

@@ichbinich:

nuqneH

In onmousedown fehlt jeweils ein Semikolon

Es sollte auch ohne gehen. Besser ist aber mit.

und es muss backgroundImage heissen.

Oder background.

Qapla'

[Martina]

Ok, das habe ich nicht gewusst, dass man in JavaScript den Bindestrich einer CSS-Eigenschaft entfernen muß.

Danke!

[Gunnar Bittersmann]

@@Martina:

nuqneH

Ok, das habe ich nicht gewusst, dass man in JavaScript den Bindestrich einer CSS-Eigenschaft entfernen muß.

Sonst hieße es ja style.background minus image.

Und nicht nur das. Das große I ist dir aufgefallen?

Qapla'

[Martina]

@@Martina:

nuqneH

Ok, das habe ich nicht gewusst, dass man in JavaScript den Bindestrich einer CSS-Eigenschaft entfernen muß.

Sonst hieße es ja style.background minus image.

Und nicht nur das. Das große I ist dir aufgefallen?

Qapla'

Ja natülich, ich habe es schon erfolgreich ausprobiert und auch den entsprechenden Artikel bzgl. anderer Schreibweise im SelfHTML nachgelesen ;)

http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften

[Gunnar Bittersmann]

@@Martina:

nuqneH

Ich habe 2 Buttons

Nicht wirklich. Du hast 2 span-Elemente. Die mögen vielleicht wie Buttons aussehen, sind aber keine für Nutzer, die nicht sehen können. Dazu wäre zumindest ein ARIA-Attribut nötig: <span role="button" …>.

Aber warum nimmst du keine button-Elemente?

Oder Radiobuttons? Mir scheint, das ist das, was du vorhast: einer soll gewählt sein, der andere nicht:

<input type="radio" id="knopf1" name="knopf"/><label for="knopf1">Knopf 1</label>  
<input type="radio" id="knopf2" name="knopf"/><label for="knopf2">Knopf 2</label>

Die Radiobuttons kannst du mit CSS verstecken und die Label je nach Zustand des zugehörigen (unsichtbaren) Radiobuttons stylen:

[name="knopf"] + label { /* gemeinsame Styles und Style für nicht angewählt */ }  
[name="knopf"]:checked + label { /* Style für nicht angewählt */ }

Und schon brauchst du gar kein JavaScript mehr.

<span id="knopf1" style="cursor:pointer; background-image: linear-gradient(#dfd, #7f7);"

Das geht nur in Browsern, die Gradienten bereits präfixfrei unterstützen (IE 10, Firefox, Opera).

Die Gradienten sollten im Stylesheet stehen (wo sie hingehören), nicht im JavaScript (welches auch nicht ins HTML gehört).

Per JavaScript könntest du die Zuständsänderung bspw. per Umschalten von Klassen kenntlich machen, die Styles dafür stehen im CSS.

Aber wie gesagt, JavaScript sollte gar nicht erforderlich sein.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

<span id="knopf1" style="cursor:pointer; background-image: linear-gradient(#dfd, #7f7);"

Das geht nur in Browsern, die Gradienten bereits präfixfrei unterstützen (IE 10, Firefox, Opera).

Für Webkits (Chrome, Safari) müsste man das mit -webkit-Präfix angeben. Und für Browser, die keine Gradienten können, muss eine Hintergrundfarbe angegeben werden.

Und auch darauf achten, dass die Dinger auch für Farbenblinde gut unterscheidbar sind. Nie auf Farbe als alleiniges Unterscheidungsmerkmal setzen!

Qapla'

[Martina]

Hi Gunnar,

hab deinen Vorschlag ausprobiert, und er funktioniert ideal und lässt sich auch optisch per CSS auf Wunsch designen, super!
Und je weniger JavaScript, umso besser.

Eine Frage habe ich aber diesbezüglich noch:
Das Umfärben der Buttons ist die eine Sache, die nun ohne JavaScript funktioniert.
Was ich noch nicht erwähnt habe ist, dass je nach aktiven Button ein <div> angezeigt wird und ein anderer <div> versteckt.

  
<span id="knopf1" onmousedown="  
getElementById('div1').style.display = 'block';  
getElementById('div2').style.display = 'none';  
">Knopf 1</span>  
  
<span id="knopf2" onmousedown="  
getElementById('div1').style.display = 'none';  
getElementById('div2').style.display = 'block';  
">Knopf 2</span>  

Das habe ich bisher auch gleichzeitg im Event-Handler des (ehemaligen) span-"Buttons" realisiert. Gibts hier auch irgendeine Methode ohne JavaScript. Kann ich diese <div> per CSS selektieren, abhängig welcher <input>/<label>-"Button" gedrückt ist?

[Jens Holzkämper]

Tach,

Das Umfärben der Buttons ist die eine Sache, die nun ohne JavaScript funktioniert.
Was ich noch nicht erwähnt habe ist, dass je nach aktiven Button ein <div> angezeigt wird und ein anderer <div> versteckt.
Das habe ich bisher auch gleichzeitg im Event-Handler des (ehemaligen) span-"Buttons" realisiert. Gibts hier auch irgendeine Methode ohne JavaScript. Kann ich diese <div> per CSS selektieren, abhängig welcher <input>/<label>-"Button" gedrückt ist?

ja, quasi genauso:

<input type="radio" id="knopf1" name="knopf"/><label for="knopf1">Knopf 1</label><div>zu knopf1</div>  
<input type="radio" id="knopf2" name="knopf"/><label for="knopf2">Knopf 2</label><div>zu knopf2</div>

[name="knopf"] + label + div{ display:hidden }  
[name="knopf"]:checked + label + div{ display:block }

mfg
Woodfighter

[Martina]

bei mir befinden sich beide <div> aber erst nach den Buttons. Jeweils mit eigener ID.
Wie selektiere ich in dem Fall jeweils den zum Button gehörigen <div>?
Muß ich dem Fall beide Buttons mit 2 verschiedenen :checked behandeln?

[Jens Holzkämper]

Tach,

bei mir befinden sich beide <div> aber erst nach den Buttons. Jeweils mit eigener ID.
Wie selektiere ich in dem Fall jeweils den zum Button gehörigen <div>?
Muß ich dem Fall beide Buttons mit 2 verschiedenen :checked behandeln?

jup, das sollte dann gehen.

mfg
Woodfighter

[Martina]

passend dazu noch eine Frage:
In einer Tabelle befindet sich in jeder Reihe eine Checkkbox. Bei aktivierter checkbox sollen alle <td> der jeweiligen Tabellenreihe grün gefärbt werden.

Das bekomme ich nicht hin, da ich mit keinem CSS-Selektor quasi auf die Cousin-<td> der Input-<td> zugreifen kann.

Gibts hierfür eine reine HTML/CSS Lösung ohne JavaScript bzw. EventHandler?

  
<style>  
  table {background:#fff; border-spacing:2px;}  
  td {background:#ccc;}  
  input:checked ~ td {background:green;}  
</style>  
</head>  
  
<body>  
  
<table>  
  <tr>  
    <td><input type="checkbox" id="1.Zeile"/></td><td>1.Zelle</td><td>2.Zelle</td>  
  </tr>  
  <tr>  
    <td><input type="checkbox" id="2.Zeile"/></td><td>1.Zelle</td><td>2.Zelle</td>  
  </tr>  
</table>  
  
</body>  
</html>  

[Gunnar Bittersmann]

@@Martina:

nuqneH

Gibts hierfür eine reine HTML/CSS Lösung ohne JavaScript bzw. EventHandler?

Nein, mit CSS-Selektoren kommt man im DOM (noch) nicht nach oben.

Qapla'