nicht angemeldet
Formular mit Images
Gernot BackHallo,
ich weiß gar nicht mit welchen Worten ich dies in einer Suchmaschine suchen soll, daher habe ich mir gedacht, ich stelle die Frage mal hier ein und erkläre mein Anliegen. Vielleicht versteht es ja einer und kann mir helfen. Ich bin mir nicht mal sicher, ob die hier gewählte Kategorie die richtige ist.
Ich habe ein Formular. Dort drin sind 5 verschiedene Images, ungefähr so:
[] [] [] [] []
Darunter sind noch ein paar Text-Inputfelder.Jetzt möchte ich, dass ein User ein auf eines der Bilder klickt und dieses dann ausgewählt ist. Der User soll aber nur eines der Bilder auswählen können (wie bei Radiobuttons).
Wenn das Formular abgeschickt wird, wird die ID des Bildes und der Rest an den Server übermittelt.
Habe ich mich einigermaßen verständlich ausgedrückt?
Wäre toll, wenn Jemand eine Idee hätte. Ich sitz schon den ganzen Tag vor dem Rechner und kann langsam nicht mehr nachdenken.
Danke
Matthias
-
Hey,
wieso machst du nicht einfach Radiobuttons unter oder neben die Bilder?
Mit JS würde es bestimmt auch gehen ist aber sicher nicht empfehlenswert
Alex-
Hallo Alex,
wieso machst du nicht einfach Radiobuttons unter oder neben die Bilder?
Mit JS würde es bestimmt auch gehen ist aber sicher nicht empfehlenswertWas spricht denn dagegen, Radiobuttons in der Nähe der Bilder zu platzieren und diese mit Klick auf das Bild auszuwählen. Wenn man die Bilder in entsprechende LABEL-Elemente mit entsprechenden FOR-Attributen mit jeweiligen ID-Referenzen auf den Radiobutton packt, sollten die sich auch ohne JS selektieren lassen.
Wer die Radiobuttons nicht sehen mag, kann sie ja auch per CSS über display:none verstecken. Allerdings bin ich mir nicht sicher, ob ihre Werte dann bei Auswahl noch übermittelt werden. Das wäre auszuprobieren.
Gruß Gernot
-
Hey Gernot,
da spricht natürlich nichts dagegen. Habe gemeint so ganz ohne Radios und nur auf JS basierend.Alex
-
Hallo Gernot,
[link@title=LABEL]-Elemente mit entsprechenden FOR-Attributen mit jeweiligen ID-Referenzen auf den Radiobutton packt, sollten die sich auch ohne JS selektieren lassen.
Ich hatte noch den falschen Link in der Zwischenablage.
Hier der richtige:
http://de.selfhtml.org/html/formulare/strukturieren.htm#label
Gruß Gernot
-
Ach nochwas:
Irgendwie habe ich das Gefühl, du hast bei deinem LABEL link etwas mit einem anderen Thema durcheinander gebracht.
Alex
-
Hallo,
Was spricht denn dagegen, Radiobuttons in der Nähe der Bilder zu platzieren und diese mit Klick auf das Bild auszuwählen. Wenn man die Bilder in entsprechende LABEL-Elemente mit entsprechenden FOR-Attributen mit jeweiligen ID-Referenzen auf den Radiobutton packt, sollten die sich auch ohne JS selektieren lassen.
Im Prinzip ja ;-).
Aber nicht im IE. Jedenfalls nicht ohne Handstände, siehe http://forum.de.selfhtml.org/archiv/2006/4/t128057/
viele Grüße
Axel
-
Hallo Axel,
Aber nicht im IE. Jedenfalls nicht ohne Handstände, siehe http://forum.de.selfhtml.org/archiv/2006/4/t128057/
Danke für den Hinweis, diesen interessanten Thread habe ich irgendwie gar nicht mitbekommen. Beim IE darf man halt gar nichts aus der Theorie voraussetzen, sondern muss es immer in der Praxis testen.
Jetzt wäre es umso interessanter zu testen, wie er sich verhält, wenn man die Radiobuttons ausblendet, ob die dann dennoch die checked-Werte über die Labels mitbekommen? Da bin ich mir aber auch bei den anderen Browsern nicht sicher. Wenn mir Matthias nicht zuvorkommt, teste ich das bei Gelegenheit.
Gruß Gernot
-
Hallo Gernot,
Jetzt wäre es umso interessanter zu testen, wie er sich verhält, wenn man die Radiobuttons ausblendet, ob die dann dennoch die checked-Werte über die Labels mitbekommen? Da bin ich mir aber auch bei den anderen Browsern nicht sicher. Wenn mir Matthias nicht zuvorkommt, teste ich das bei Gelegenheit.
Meine Zweifel waren berechtigt:
<html> <head> <title>check invisible radio</title> <style type="text/css"> [code lang=css] label { cursor:pointer; } /* Klasse 'hide' alternativ wie folgt definieren */ .hide { display:none; } .hide { visibility:hidden; } .hide{ position:absolute; left:-10000px; }</style>
<script type="text/javascript">function answer(obj) { with(obj) for (i=0; i<test.length; i++) { if(test[i].checked) alert(test[i].value); } }</script>
</head>
<body>
<form method="get" action="#" onsubmit="answer(this)">
<input class="hide" type="radio" name="test" id="test1" value="ja" /><label for="test1">ja</label> |
<input class="hide" type="radio" name="test" id="test2" value="nein" /><label for="test2">nein</label>
<input type="submit" value="Antwort ausgeben">
</form>
</body>
</html>
[/code]Mit "display:none" schafft es nur Firefox 1.5.0.3, die Antwort auszugeben;
mit "visibility:hidden" schafft es auch Opera 8.54 und für den IE6 muss man die Radiobuttons im negativen Bildschirm-Off verstecken, damit man sie noch ansprechen kann.Andere Browser habe ich nicht getestet.
Gruß Gernot
-
Hallo nochmal,
es handelt sich dabei offensichtlich um kein Javascript-, sondern um ein CSS-Problem, denn wenn man einen Radiobutton mit dem Attribut "checked" vorselektiert, wird der so selektierte Button auch von der JS-Funktion answer() erkannt, nur gibt es halt die zuvor beschriebenen Einschränkungen beim Verändern der Werte über die LABEL-Elemente.
Gruß Gernot
-
Hallo,
es handelt sich dabei offensichtlich um kein Javascript-, sondern um ein CSS-Problem, denn wenn man einen Radiobutton mit dem Attribut "checked" vorselektiert, wird der so selektierte Button auch von der JS-Funktion answer() erkannt, nur gibt es halt die zuvor beschriebenen Einschränkungen beim Verändern der Werte über die LABEL-Elemente.
Ja, INPUTs mit display:none können offensichtlich nur im Mozilla und FF per Mausklick(eben über das LABEL-Element) erreicht werden. Man könnte mit Hilfe von position:relative und position:absolute etwas hinbasteln, das die Labels _über_ die Inputs legt, so dass diese dann _dadurch_ unsichtbar werden.
Das größere Problem ist aber: Wie erreicht man, dass der Nutzer den Erfolg seines Klicks überhaupt sieht, wenn der eigentliche Radiobutton nicht zu sehen ist? Da es im Ursprungsposting um Bilder ging, müsste man die Bilder bei Klick entsprechend der checked-Eigenschaft des Radiobuttons tauschen. Da man hierzu in jedem Fall, mangels CSS-Selector, JavaScript benötigt, kann man das dann auch zum Ändern der checked-Eigenschaft des Radiobuttons verwenden.
So z.B. (den Bildertausch habe ich weggelassen):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Titel</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <style type="text/css"> form p {margin:0; padding:0;} form p * {vertical-align:middle;} form label img {height:32px; width:32px;} input#r11, input#r12 {display:none;} </style> </head> <body> <form action="#" method="get"> <p><input id="r11" type="radio" name="r1" value="v11"><label for="r11" onclick="this.form.r1[0].checked=!this.form.r1[0].checked;"><img src="Beispiel.jpg" alt="Bild r11" title=""></label></p> <p><input id="r12" type="radio" name="r1" value="v12"><label for="r12" onclick="this.form.r1[1].checked=!this.form.r1[1].checked;"><img src="Beispiel.jpg" alt="Bild r12" title=""></label></p> <p><input type="Submit" name="ok" value="OK"></p> </form> </body> </html>Das hat natürlich alle Nachteile einer Lösung, die nur mit JavaScript funktioniert.
viele Grüße
Axel
-
-
Hallo,
Das größere Problem ist aber: Wie erreicht man, dass der Nutzer den Erfolg seines Klicks überhaupt sieht, wenn der eigentliche Radiobutton nicht zu sehen ist?
So --
Ja, wie ich sagte, eben mit JavaScript. Wobei das Beispiel natürlich insofern gut gemacht ist, dass es auch ohne JavaScript noch irgendwie funktioniert. Das könnte man beim Beispiel des Ersatztes von Radio-Buttons durch Grafiken dadurch erreichen, dass die Radio-Buttons ebenfalls erst mit JavaScript auf display:none gesetzt werden. Ohne JavaScript wären sie sichtbar und benutzbar.
visuell attraktiver finde ich allerdings die Variante ohne Formularelemente, auch wenn ich dort eine
<ol>bevorzugte.Hier ändert sich aber nur bei hover etwas. Das ist kein Problem mit CSS. Gefragt war aber der Ersatz eines Radio-Buttons durch eine Grafik. Diese Ändern ihr Aussehen aber bei klick, nicht bei hover.
viele Grüße
Axel
-
Hallo.
visuell attraktiver finde ich allerdings die Variante ohne Formularelemente, auch wenn ich dort eine
<ol>bevorzugte.
Hier ändert sich aber nur bei hover etwas. Das ist kein Problem mit CSS. Gefragt war aber der Ersatz eines Radio-Buttons durch eine Grafik. Diese Ändern ihr Aussehen aber bei klick, nicht bei hover.Manchmal meine ich "visuell attraktiver", wenn ich es schreibe. Insbesondere die Texteinblendungen finde ich sehr gelungen, und eine Umstellung auf die Javascript-Variante sollte weitestgehend problemlos sein.
MfG, at-
Hallo,
visuell attraktiver finde ich allerdings die Variante ohne Formularelemente, auch wenn ich dort eine
<ol>bevorzugte.
Hier ändert sich aber nur bei hover etwas. Das ist kein Problem mit CSS. Gefragt war aber der Ersatz eines Radio-Buttons durch eine Grafik. Diese Ändern ihr Aussehen aber bei klick, nicht bei hover.
Manchmal meine ich "visuell attraktiver", wenn ich es schreibe.Ach was! Kaum zu glauben ;-)
Insbesondere die Texteinblendungen finde ich sehr gelungen,
Ja, gefragt war aber eine Auswahl 1 aus 5 innerhalb eines Formulars mit noch mehreren anderen Formularfeldern und kein Rating von 1 bis 5, welches bei Klick eine andere Ressource anfordert.
und eine Umstellung auf die Javascript-Variante sollte weitestgehend problemlos sein.
Ja, das ist unstrittig. Manchmal meine ich "mit JavaScript wäre es lösbar", wenn ich es schreibe ;-).
viele Grüße
Axel
-
Hallo.
Dann sind wir uns ja einig.
MfG, at
-
-
-
-
-
-
-
-
-
-
-
-
Hi Matthias!
Ich habe ein Formular. Dort drin sind 5 verschiedene Images, ungefähr so:
Meinst du Bilder?
Jetzt möchte ich, dass ein User ein auf eines der Bilder klickt und dieses dann ausgewählt ist. Der User soll aber nur eines der Bilder auswählen können (wie bei Radiobuttons).
Wieso setzt du dann keine Radiobuttons davor? Das funktioniert ohne Javascript und ist intuitiv!
MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:) -
Das mit den Radiobuttons wäre schon eine Möglichkeit. Danke erstmal für die Antworten. Aber anders wäre es mir wie gesagt lieber. Es ist zumal sowieso für eine Seite auf der ohne JavaScript gar nichts geht. Ich glaube ich werde mir im <head> eine Variable setzen und bei Klick auf das Bild den Wert dort speichern. Da das Ganze ohnehin per XMLHttpRequest verschickt wird zieh ich mir dann die Variable wieder.
Für andere Vorschläge bin ich gerne offen :-)
Sorry, dass ich so spät geantwortet habe, aber ich habs im Feedreader nicht gesehen, dass schon Antworten da waren.
Gruß
Matthias
-
Na super, jetzt hab ich 2mal geposted ;-)
-
-
Das mit den Radiobuttons wäre schon eine Möglichkeit. Danke erstmal für die Antworten. Aber anders wäre es mir wie gesagt lieber. Es ist zumal sowieso für eine Seite auf der ohne JavaScript gar nichts geht. Ich glaube ich werde mir im <head> eine Variable setzen und bei Klick auf das Bild den Wert dort speichern. Da das Ganze ohnehin per XMLHttpRequest verschickt wird zieh ich mir dann die Variable wieder.
Für andere Vorschläge bin ich gerne offen :-)
Sorry, dass ich so spät geantwortet habe, aber ich habs im Feedreader nicht gesehen, dass schon Antworten da waren.
Gruß
Matthias
-
Hallo,
Ich habe ein Formular. Dort drin sind 5 verschiedene Images, ungefähr so:
[] [] [] [] []
Darunter sind noch ein paar Text-Inputfelder.Jetzt möchte ich, dass ein User ein auf eines der Bilder klickt und dieses dann ausgewählt ist. Der User soll aber nur eines der Bilder auswählen können (wie bei Radiobuttons).
Wenn das Formular abgeschickt wird, wird die ID des Bildes und der Rest an den Server übermittelt.
hi,
vieleicht so
<input type="image" name="pic" src="BildAdresse" value="WasAuchImmer">
<input type="image" name="pic" src="AndersBildAdresse" value="WieAuchImmer">Das zeigt zwei Bilder an die als Submit-Buttons dienen, dabei wird aber noch pic.x und pic.y mit gesendet. Das sind die Koordinaten des Mausklicks.
mfg mysch