Welche Lösungsansätze gibt es?

[Robert R.]

Liebe Mitdenker,
liebe Wissende,
liebe Neugierige,

ja!

wie würdet Ihr das machen, damit es möglichst auch ohne JavaScript läuft?

Es gibt eine Einkaufsseite. Auf der befinden sich mehrere Bilder. Durch Klicken in einen Bereich eines Bildes soll man das dort abgebildete Objekt auswählen können. Jedes der Bilder kann mehrere Objekte enthalten. Es kann von jedem Objekt jeweils nur eines ausgewählt werden (also immer nur Menge=1 oder 0).

Ich habe zuerst an Image-Map, also verweissenitive Grafiken gedacht. Aber da kann man ja immer nur ein Ereignis zur gleichen Zeit auslösen. Checkboxen wären technisch noch eine Idee. Aber wie positioniere ich die passend? Geht das uach ohne "postion: absolute"?

Gibts eine andere, bessere Idee?
Mit fällt heuite irgendwie nix ein.

Spirituelle Grüße
Euer Robert

[Felix Riesterer]

Lieber Robert R.,

Ich habe zuerst an Image-Map, also verweissenitive Grafiken gedacht. Aber da kann man ja immer nur ein Ereignis zur gleichen Zeit auslösen.

wäre das so schlimm? Das Ereignis könnte in einem anderen Teil des Formulars eine Checkbox setzen (nur setzen, nicht lösen)...

Liebe Grüße,

Felix Riesterer.

[Robert R.]

Lieber Felix,
liebe Mitdenker,
liebe Wissende,
liebe Neugierige,

ja!

Ich habe zuerst an Image-Map, also verweissenitive Grafiken gedacht. Aber da kann man ja immer nur ein Ereignis zur gleichen Zeit auslösen.

wäre das so schlimm? Das Ereignis könnte in einem anderen Teil des Formulars eine Checkbox setzen (nur setzen, nicht lösen)...

Bei der Endkontrolle vor dem Bestellen.
Dann müsste ich mehrere Durchgänge ermöglichen, so dass man mehrere Objekte sammeln kann.

Das Resultat ist dann zum Schluss die Checkboxliste.

Das wäre eine Möglichkeit.

Dann muss ich jetzt nur mal übern, wie man die bereits ausgewählten Bereiche in den Grafiken visuell kennzeichnen kann - einen Schleier drüber legen, oder wegnehmen mittels genertiertem CSS.

Geht das?

Spirituelle Grüße
Euer Robert

[Felix Riesterer]

Lieber Robert R.,

Dann müsste ich mehrere Durchgänge ermöglichen, so dass man mehrere Objekte sammeln kann.

Das Resultat ist dann zum Schluss die Checkboxliste.

ich kann doch in der Imagemap alle Objekte anklicken, ohne dass das Formular abgeschickt wird! Damit kann ich die Checkboxliste über ein nettes UI befüllen... bevor ich es zum ersten Mal ansende.

Das wäre eine Möglichkeit.

Du könntest auch mit raffiniertester visueller Checkbox-Ersetzung das "Bild" zusammenbauen und den Zustand der Checkboxen jeweils durch ein passendes (Hintergrund-)Bild darstellen. Damit wäre das Abwählen zusätzlich möglich.

Andere bieten Drag&Drop an, um den Warenkorb zu füllen...

Liebe Grüße,

Felix Riesterer.

[Robert R.]

Liebe Mitdenker,
liebe Wissende,
liebe Neugierige,

ja!

ich kann doch in der Imagemap alle Objekte anklicken, ohne dass das Formular abgeschickt wird! Damit kann ich die Checkboxliste über ein nettes UI befüllen... bevor ich es zum ersten Mal ansende.

Wie geht das ohne JavaScript?
Da fehlt mir jetzt die Idee.

Ich werde es mal mit den absolut positierten Checkboxen ausprobieren.

Drag & Drop ist bestimmt nett, geht doch aber nicht ohne JavaScript?

Spirituelle Grüße
Euer Robert

[Felix Riesterer]

Lieber Robert R.,

Wie geht das ohne JavaScript?

warum muss es ohne sein?

Liebe Grüße,

Felix Riesterer.

[Robert R.]

Liebe Mitdenker,
liebe Wissende,
liebe Neugierige,

ja!

Lieber Robert R.,

Wie geht das ohne JavaScript?

warum muss es ohne sein?

Weil es vom Capo so gewünscht wird. Ich kann da zwar JavaScript reinbauen, aber dann muss ich einen funktionierenden und sauberen Fallback nachweisen. :-|

Spirituelle Grüße
Euer Robert

[Gunnar Bittersmann]

@@Robert R.:

nuqneH

Ich kann da zwar JavaScript reinbauen, aber dann muss ich einen funktionierenden und sauberen Fallback nachweisen. :-|

Ja. Und den gibt’auch: die Checkboxen.

Komm nicht mit Nutzern, die JavaScript deaktiviert haben, aber trotzdem per Imagemap auswählen wollen. Solche gibt es nicht.

Qapla'

[Robert R.]

Liebe Mitdenker,
liebe Wissende,
liebe Neugierige,

ja!

Ich kann da zwar JavaScript reinbauen, aber dann muss ich einen funktionierenden und sauberen Fallback nachweisen. :-|

Ja. Und den gibt’auch: die Checkboxen.

Komm nicht mit Nutzern, die JavaScript deaktiviert haben, aber trotzdem per Imagemap auswählen wollen. Solche gibt es nicht.

Darf ich Dich beim Capo zitieren? Welche Konventionalstrafe akzeptierst Du? ;-P

Spirituelle Grüße
Euer Robert

[Gunnar Bittersmann]

@@Robert R.:

nuqneH

Komm nicht mit Nutzern, die JavaScript deaktiviert haben, aber trotzdem per Imagemap auswählen wollen. Solche gibt es nicht.

Darf ich Dich beim Capo zitieren?

Darfst du. Solltest du sogar. Es ist dein Job.

Zu deinem Job gehört auch, dem Capo klarzumachen, dass „instead of spending your time trying to make websites look the same in wildly varying browsers, you can spend your time making sure that the core functionality of what you’re building works everywhere, while providing the best possible experience for more capable browsers.“ [adactio]

Du bist der Experte. ;-)

Qapla'

[Robert R.]

Liebe Mitdenker,
liebe Wissende,
liebe Neugierige,

ja!

Darf ich Dich beim Capo zitieren?

Darfst du. Solltest du sogar. Es ist dein Job.

Zu deinem Job gehört auch, dem Capo klarzumachen, dass „instead of spending your time trying to make websites look the same in wildly varying browsers, you can spend your time making sure that the core functionality of what you’re building works everywhere, while providing the best possible experience for more capable browsers.“ [adactio]

Du bist der Experte. ;-)

Jo jo. Das muss ich erst einmal auf Italienisch übersetzen.

Spirituelle Grüße
Euer Robert

[Gunnar Bittersmann]

@@Robert R.:

nuqneH

Du bist der Experte. ;-)

Jo jo. Das muss ich erst einmal auf Italienisch übersetzen.

Is’ doch. Zahnrad > Untertitel auf italienisch

Qapla'

[Robert R.]

Liebe Mitdenker,
liebe Wissende,
liebe Neugierige,

ja!

Du bist der Experte. ;-)

Jo jo. Das muss ich erst einmal auf Italienisch übersetzen.

Is’ doch. Zahnrad > Untertitel auf italienisch

Suuuuper Take *ROTFL*

Spirituelle Grüße
Euer Robert

[ChrisB]

Hi,

Checkboxen wären technisch noch eine Idee.

Wenn mehrere Möglichkeiten an- und abgewählt werden können, vermutlich sogar eine der besten.

Aber wie positioniere ich die passend? Geht das uach ohne "postion: absolute"?

Ja, möglicherweise schon. Aber auch gegen den Einsatz absoluter Positionierung spricht absolut gar nichts.

MfG ChrisB

[Robert R.]

Liebe Mitdenker,
liebe Wissende,
liebe Neugierige,

ja!

Checkboxen wären technisch noch eine Idee.

Wenn mehrere Möglichkeiten an- und abgewählt werden können, vermutlich sogar eine der besten.

Aber wie positioniere ich die passend? Geht das uach ohne "postion: absolute"?

Ja, möglicherweise schon. Aber auch gegen den Einsatz absoluter Positionierung spricht absolut gar nichts.

Hab ich jetzt auch so gemacht. Und weil die Checkboxen so mickrig waren, hab ich noch ein bisschen gesucht und gefunden:

[code lang=css]
.samples input[type="checkbox"] {
/* All browsers except webkit*/
transform: scale(2.0);

	/\* Webkit browsers\*/  
	-webkit-transform: scale(2.0);  
	background-color: transparent;	  
}  

[/css]

Nun kann man sie auch auf einem Tablet wunderbar ein- und ausschalten.

Jetzt such ich nur noch eine gute Idee, wie ich bei ca. 20 Checkboxen auf einer Seite beim Hovern einer Box immer ein größeres Bild einblenden lassen könnte. Das Problem wird da neben der Forderung "ohne JavaScript" vermutlich wieder die Tabletbedienung ohne Maus sein...

Spirituelle Grüße
Euer Robert

[Gunnar Bittersmann]

@@Robert R.:

nuqneH

.samples input[type="checkbox"] {  

  /* All browsers except webkit*/  
  transform: scale(2.0);  

  /* Webkit browsers*/  
  -webkit-transform: scale(2.0);  
  background-color: transparent;	  

}

  
Die präfixfreie Deklaration sollte immer als letzte notiert werden, damit sie die veralteten mit Prafix uberschreibt.  
  
Außerdem stimmt der Kommentar nicht: Chrome und Opera [unterstützen transform](http://caniuse.com/#feat=transforms2d) ohne Prafix. (Oder zählen die nicht als WebKit, da Blink?) Der neuste Android-Browser auch.  
  
Für IE 9 hingegen ist noch ein -ms-Präfix nötig.  
  
Qapla'

-- 
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

[Robert R.]

Lieber Gunnar,
liebe Mitdenker,
liebe Wissende,
liebe Neugierige,

ja!

.samples input[type="checkbox"] {  

  /* All browsers except webkit*/  
  transform: scale(2.0);  

  /* Webkit browsers*/  
  -webkit-transform: scale(2.0);  
  background-color: transparent;	  
}

>   
> Die präfixfreie Deklaration sollte immer als letzte notiert werden, damit sie die veralteten mit Prafix uberschreibt.  
>   
> Außerdem stimmt der Kommentar nicht: Chrome und Opera [unterstützen transform](http://caniuse.com/#feat=transforms2d) ohne Prafix. (Oder zählen die nicht als WebKit, da Blink?) Der neuste Android-Browser auch.  
>   
> Für IE 9 hingegen ist noch ein -ms-Präfix nötig.  
  
\*ups\*  
  
Gut, dass ich das nochmal zur Diskussion gestellt habe!  
Isch 'abe leider keinen IE9, aber ich werde mal die Allwissende benutzen ;-)  
  
background-color geht ja leider auch nicht. Da muss ich mir noch einen standfesten Hack aussuchen, der es ermöglicht, die Checkbox grau (disabled) grün (noch auswählbar) und rot (vom User ausgewählt) einzufärben.  
  
Das muss entweder über eine Klasse, eine Pseudoklasse oder eine Attribut (disabled, checked) erfolgen. Mehr Möglichkeiten lässt das CMS, in das es hinein muss, nicht zu.  
  
  
  
  
  
Spirituelle Grüße  
Euer Robert

-- 
Möge der Forumsgeist wiederbelebt werden!

[ChrisB]

Hi,

Isch 'abe leider keinen IE9, aber ich werde mal die Allwissende benutzen ;-)

Wenn du einen IE 10 oder 11 hast, kannst du 9 aber über die Developer Tools emulieren lassen.

background-color geht ja leider auch nicht. Da muss ich mir noch einen standfesten Hack aussuchen, der es ermöglicht, die Checkbox grau (disabled) grün (noch auswählbar) und rot (vom User ausgewählt) einzufärben.

Das muss entweder über eine Klasse, eine Pseudoklasse oder eine Attribut (disabled, checked) erfolgen. Mehr Möglichkeiten lässt das CMS, in das es hinein muss, nicht zu.

Die Möglichkeit, dir die dafür passende HTML-Struktur generieren zu lassen, musst du aber wenigstens haben – denn Ansätze, die auf input:checked ~ foo basieren, um das foo-Element abhängig vom checked-Status der Checkbox zu formatieren, sind in der Hinsicht limitiert dadurch, dass CSS nur eine Selektion „nach unten“ zulässt, und nicht nach oben (parent-Selektor).

Ohne passende HTML-Struktur bleibt dir ggf. nur noch die Möglichkeit, die Checkbox selber zu formatieren – und dann bist du ziemlich limitiert, was die Möglichkeiten angeht, da die Browser die Formatierung von Formularelementen teilweise ziemlich einschränken.

MfG ChrisB

[Robert R.]

Liebe Mitdenker,
liebe Wissende,
liebe Neugierige,

ja!

Die Möglichkeit, dir die dafür passende HTML-Struktur generieren zu lassen, musst du aber wenigstens haben – denn Ansätze, die auf input:checked ~ foo basieren, um das foo-Element abhängig vom checked-Status der Checkbox zu formatieren, sind in der Hinsicht limitiert dadurch, dass CSS nur eine Selektion „nach unten“ zulässt, und nicht nach oben (parent-Selektor).

Das CMS lässt die Definition des HTML (oder was auch immer benutzt wird dafür) zu, ohne dass man in die Steuerung eingreifen muss. Es gibt ein Riesen-Array, dass aus hunderten von Detail-Dateien (HTML) erzeugt wird (als Cache-Datei). Ich kann in jeder Parameter einfügen. Es gibt aber meistens schon welche für alle Möglichkeiten des HTML. Und über das Attribut Class kann ich dann jedwede CSS-Vorgaben machen.

Das gefällt mir eigentlich alles recht gut. Ich überlege daher auch, ob ich es auf HTML5 aufbohren kann. Ist nämlich bisher nur HTML 4.01-fähig. Ich bin mir noch nicht klar darüber, ob es nun bei HTML5 nur ein paar mehr Definitionen (Tags) gibt, oder ob man da auch eigene erfinden darf. Dann würde das System näcmlich nicht mehr geeignet sein. "Ein paar mehr" kann ich einpflegen.

Spirituelle Grüße
Euer Robert

[Matthias Apsel]

Om nah hoo pez nyeetz, Robert R.!

Das gefällt mir eigentlich alles recht gut. Ich überlege daher auch, ob ich es auf HTML5 aufbohren kann. Ist nämlich bisher nur HTML 4.01-fähig. Ich bin mir noch nicht klar darüber, ob es nun bei HTML5 nur ein paar mehr Definitionen (Tags) gibt, oder ob man da auch eigene erfinden darf. Dann würde das System näcmlich nicht mehr geeignet sein. "Ein paar mehr" kann ich einpflegen.

Es gibt in HTML5 neue Elemente (≠ Tags) - siehe http://wiki.selfhtml.org/wiki/Kategorie:HTML5, eine ganze Anzahl neuer Attribute, vor allem für das input-Element, aber nicht die Möglichkeit, sich neue Elemente oder Attribute „auszudenken“. Eine Ausnahme bilden die data-*-Attribute, die dafür gedacht sind, eigene Daten mit bestimmten HTML-Attributen zu verknüpfen.

Matthias

[Gunnar Bittersmann]

@@Robert R.:

nuqneH

Isch 'abe leider keinen IE9

Warum nisch?

background-color geht ja leider auch nicht. Da muss ich mir noch einen standfesten Hack aussuchen, der es ermöglicht, die Checkbox grau (disabled) grün (noch auswählbar) und rot (vom User ausgewählt) einzufärben.

Das muss entweder über eine Klasse, eine Pseudoklasse oder eine Attribut (disabled, checked) erfolgen.

Pseudoklassen.

Qapla'

[Gunnar Bittersmann]

@@Robert R.:

nuqneH

Ich habe zuerst an Image-Map, also verweissenitive Grafiken gedacht. Aber da kann man ja immer nur ein Ereignis zur gleichen Zeit auslösen. Checkboxen wären technisch noch eine Idee.

Eine hervorragende Idee. Damit stellst du die Grundfunktionalität sicher. Die Seite ist bedienbar, und das auch (wenn du nichts dagegen tust) barrierefrei. (Entsprechende Labels vorausgesetzt.)

Aber wie positioniere ich die passend?

Gar nicht. Du lässt die Checkboxen neben/unter dem Bild und sorgst mit JavaScript dafür, dass die Auswahl per Imagemap auch funktioniert, d.h. die entsprechenden Checkboxen setzt.

Progressive enhancement wie aus dem Bilderbuch. (Pun intended.)

Du müsstest dem Nutzer dann nur noch[tm] klarmachen, dass die Auswahl auch im Bild möglich ist.

Wie schon im Thread gesagt wurde, wäre drag and drop die nächste Stufe von progressive enhancement – für Browser, die das API unterstützen.

Qapla'

[Robert R.]

Liebe Mitdenker,
liebe Wissende,
liebe Neugierige,

ja!

Ich habe zuerst an Image-Map, also verweissenitive Grafiken gedacht. Aber da kann man ja immer nur ein Ereignis zur gleichen Zeit auslösen. Checkboxen wären technisch noch eine Idee.

Eine hervorragende Idee. Damit stellst du die Grundfunktionalität sicher. Die Seite ist bedienbar, und das auch (wenn du nichts dagegen tust) barrierefrei. (Entsprechende Labels vorausgesetzt.)

Aber wie positioniere ich die passend?

Ich habe sie jetzt mittels "position:absolute" positioniert. Da sich alle auszuwählenden Elemente immer in _einem_ _gemeinsamen_ Bild befinden, sehe ich auch keine andere Möglichkeit.

Dazu gibts für den Backoffice-Bediener des CMS ein Tool _mit_ JavaScript. Der muss muss nur in das Bild klicken, und bekommt automatisch ein "Popup"-Div mit der Positionsangabe und den Eingabemöglichkeiten für Bezeichner, Beschreibung, usw. Die Checkbox wird dann dort passend positioniert (Datenbankeintrag)

Gar nicht. Du lässt die Checkboxen neben/unter dem Bild und sorgst mit JavaScript dafür, dass die Auswahl per Imagemap auch funktioniert, d.h. die entsprechenden Checkboxen setzt.

Geht leider nicht, aber ich denke, so ist die Lösung noch gut genug museumsfähig... *grins*

Progressive enhancement wie aus dem Bilderbuch. (Pun intended.)

Du müsstest dem Nutzer dann nur noch[tm] klarmachen, dass die Auswahl auch im Bild möglich ist.

Wie schon im Thread gesagt wurde, wäre drag and drop die nächste Stufe von progressive enhancement – für Browser, die das API unterstützen.

Kannst Du nicht mal einen kleinen Artikel zu diesem Thema schreiben fürs Wiki? Du scheinst dich doch ganz excellent auszukennen :-)

Spirituelle Grüße
Euer Robert

[Gunnar Bittersmann]

@@Robert R.:

nuqneH

Wie schon im Thread gesagt wurde, wäre drag and drop die nächste Stufe von progressive enhancement – für Browser, die das API unterstützen.

Kannst Du nicht mal einen kleinen Artikel zu diesem Thema schreiben fürs Wiki? Du scheinst dich doch ganz excellent auszukennen :-)

Ich könnte das nicht besser als Jeremy Keith. (bereits verlinkt: [adactio])

Qapla'