Image als radio button mit einem hidden field

[James]

Hallo zusammen

habe ein formular gemacht, indem grafiken als radio buttons agieren. beim klick auf eine grafik wird per js der jeweilige wert in ein hidden feld übertragen. so weit, so gut.
wie gesagt agieren die grafiken als radio buttons, bei denen nur immer einer ausgewählt sein kann. wie realisiere ich das für die grafiken? kann ich sie gruppieren? wie setze ich das in js um?
die bilder sollen umrandet werden, wenn sie aktiv sind. wenn bild nr. 1 markiert ist und der user auf bild nr.2 klickt, soll nr.2 umrandet werden und bei nr. 1 der rand verschwinden.

bin dankbar für jede anregung und sehr dankbar für codebeispiele.

es grüsst euch der james

[wahsaga]

hi,

wie gesagt agieren die grafiken als radio buttons, bei denen nur immer einer ausgewählt sein kann. wie realisiere ich das für die grafiken? kann ich sie gruppieren?

Natürlich - allerdings musst du dafür _selber_ in deinem Script sorgen.

wie setze ich das in js um?

Durchlaufe alle "Grafik-Radiobuttons" in einer Schleife, und schaue nach, welche zur selben "Gruppe" gehören. (Dazu musst du natürlich erst mal definieren, wie du sie als zu einer Gruppe zugehörig kennzeichnen willst.)

Ob du jedes mal alle durchläufst, oder sie nur einmal "gruppierst" und diese Gruppierungen dann bspw. in einem eigenen Javascript-Objekt ablegst, ist dir überlassen.

die bilder sollen umrandet werden, wenn sie aktiv sind. wenn bild nr. 1 markiert ist und der user auf bild nr.2 klickt, soll nr.2 umrandet werden und bei nr. 1 der rand verschwinden.

OK, make it so.

bin dankbar für jede anregung und sehr dankbar für codebeispiele.

Wenn du an etwas so "kritischem" wie der Substitution von Formularelementen per Javascript arbeitest, solltest du dir vorher entsprechende Grundkenntnisse angeeignet haben.

gruß,
wahsaga

[James]

besten dank für eure antworten.
habe schon einiges umgesetzt. der wert wird zugewiesen.
die funktion, dass das angewählte image umrandet wird, ist eigentlich nix anderes, wie wenn man tabs mit js macht, da der aktuell angeklickte tab eine andere formatierung hat als die anderen. ich muss also gar nicht auf die hidden-fields zurückgreifen (bzw. erst bei einem späteren edit nur da habe ich die werte zur verfügung)

danke noch einmal für die anregungen.

beste grüsse, j

[Rouven]

Hi,

ganz ehrlich? Das wirst du alles selber machen müssen...

1. Gruppieren
   Ist meines Wissens nicht möglich, du musst also mit der JS-Funktion den aktuellen Wert deines Hidden-Feldes bestimmen und entsprechend umschalten. Der Browser wird dir dabei nicht von sich aus helfen.
   Mein Vorschläge wäre daher nicht ein Hidden-Feld pro Grafik sondern eines pro Gruppe. Der aktuelle Inhalt ist die aktuell ausgewählte Option.

2. Umrandung
   Von Hand mit CSS setzen:
   2.1) Dem Bild eine ID geben, mit document.getElementById den entsprechenden DOM-Knoten besorgen
   2.2) Mittels .style-Eigenschaft die entsprechenden Borders setzen.

MfG
Rouven

[at]

Hallo.

habe ein formular gemacht, indem grafiken als radio buttons agieren.

Schon wieder?
MfG, at

[MudGuard]

Hi,

habe ein formular gemacht, indem grafiken als radio buttons agieren.

Die CSS-Lösung wäre, mit

input[radio]+label { background-image:url(unchecked.png); }  
input[radio]:checked+label { background-image:url(checked.png); }

zu arbeiten, dazu noch für
input[radio] width:0; oder visibility:hidden; (NICHT display:none - das führt ggf. dazu, daß der Radiobutton nicht funktioniert).

Leider ist das praktisch noch nicht wirklich nutzbar, da :checked bis jetzt afaik nur von Geckos umgesetzt wird (+ von allen aktuellen Browsern unterstützt, beim IE wird's vermutlich in der 7.0 funktionieren, in der Beta tuts jedenfalls)

cu,
Andreas