select funktion ausserhalb Liste / Werte mit Grafik versenden

[Gunnar Bittersmann]

@@Bastian:

nuqneH

Mein Problem ist nun .. Dies oben ist ja eine Liste

Eine Auswahlliste.

ich soll jedoch horizontal angeordnete Grafiken als "Wertgeber" verwenden..

Du hast 3 Möglichkeiten zur Auswahl (pun intended):

(1) Auswahllisten. Willst du nicht.

(2) Radiobuttons (bei Mehrfachauswahl: Checkboxen)

<form action="foo">  
  <ul>  
    <li>  
      <input id="S" name="variation" type="radio" value="14"/>  
      <label for="S"><img alt="S" src="S.jpg"/></label>  
    </li>  
    <li>  
      <input id="M" name="variation" type="radio" value="15"/>  
      <label for="M"><img alt="M" src="M.jpg"/></label>  
    </li>  
  </ul>  
  <button>OK</button>  
</form>

(Anstelle der Einzelbilder lassen sich sinnvollerweise auch CSS-Sprites einsetzen. Und ist JPEG das richtige Grafikformat?)

Die li-Elemente können nun per CSS nebeneinander plaziert werden, das sollte kein Problem sein.

Die Radiobuttons können ins Unsichtbare geschoben werden und die Kennzeichnung der aktuellen Auswahl dem Label übertragen werden (in modernen Browsern):

li  
{  
  overflow: hidden;  
}  
  
input[type="radio"]  
{  
  left: -666px;  
  position: absolute;  
}  
  
label  
{  
  opacity: 0.5;  
}  
  
:checked+label  
{  
  opacity: 1;  
}

(3) Die Grafiken sind selbst Submit-Buttons

<form action="foo">  
  <ul>  
    <li>  
      <button name="variation" value="14"><img alt="S" src="S.jpg"/></button>  
    </li>  
    <li>  
      <button name="variation" value="15"><img alt="M" src="M.jpg"/></button>  
    </li>  
  </ul>  
</form>

Funktioniert nicht so ohne Weiteres im IE < 8, da diese den Inhalt des 'button'-Elements anstatt den Wert von @value übertragen.

Qapla'