Martina: Umfärbung von 2 Buttons

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>  

  1. 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...
    
    1. @@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'

      --
      „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
      1. Ok, das habe ich nicht gewusst, dass man in JavaScript den Bindestrich einer CSS-Eigenschaft entfernen muß.

        Danke!

        1. @@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'

          --
          „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
          1. @@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

  2. @@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'

    --
    „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
    1. @@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'

      --
      „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
    2. 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?

      1. 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

        1. 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?

          1. 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

            1. 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>  
              
              
              1. @@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'

                --
                „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)