MouseOver und Touchpads - Möglichkeiten einer Bedienbarkeit

[StephanBo]

Habe mir eine Deutschlandkarte mittels z-indizes gebastelt. Fahre ich mit der Maus über ein Bundesland, so färbt sich dieses ein und man kann es anwählen. Ich denke ihr wisst schon wie so was aussieht...

Mit der Maus stellt das kein Problem dar. Mit Touchpads sieht die Sache aber anders aus. Hier lässt sich nämlich mit dem Finger nicht über das Bundesland fahren, so dass dieses eine andere Farbe bekommt. Der Touchscreen richtet nämlich die gesamte Seite weiter aus und der MouseOverEffekt kann hier nicht angewendet werden.

Gibt es hierzu Möglichkeiten, Mouseover-Effekte auf Touchscreens/pads zu erzeugen?

 

[Extremefall]

Ich kenne keine Möglichkeit, da Touchpads darauf nicht ausgelegt sind. Und selbst wenn es ein Workaround gibt, wirst du damit sicher nicht glücklich, da der Aufwand viel zu groß ist. Wieso nutzt du nicht einfach OnClick, um das Bundesland beim Anklicken zu färben? Du musst es ja noch nicht anwählen. Du kannst ja festlegen, dass es erst nach einem Doppelklick angewählt ist. Was hältst du davon?

 

[StephanBo]

Mit ein bzw. zwei Klicks wäre es natürlich auch möglich. Kann ich das denn mit dem Mouseovereffekt gleichzeitig implementieren? Also das Mausbenutzer den Mouseovereffekt sehen und Padbenutzer ein- bzw. zweimal klicken müssen?

 

[Extremefall]

Das geht. Du kannst auch mittels JS prüfen, ob es sich um ein mobiles Gerät handelt. JS ist natürlich die Voraussetzung.

 

[threadi]

Ich habe mit einem iPad da vor einiger Zeit schon Erfahrungen sammeln können. JavaScript onclick funktioniert dort gar nicht. Was aber geht ist die CSS hover-Pseudoklasse. Ich habe das an einem Aufklapp-Menü getestet. Dieses ist mit purem CSS geschrieben, kein JavaScript. Das Aufklappen mit der Maus funktioniert per hover perfekt. Auf einem Touchscreen reagiert der Browser auf einen Fingertipp genauso als wäre der Finger eine Maus die darüber fährt. Ich habe auch JavaScript-basierte Menüs gesehen die aber in keinem Fall auf einem Touchscreen funktionierten.

Du müsstest also versuchen deine Karte nicht mit JavaScript vollzupflastern sondern auf einfachste Techniken zurück zu greifen: CSS.

Hinweis: es kann sein das andere Betriebssysteme und Browser anders reagieren als ein iPad.