Responsive Imagemap für Tablet und Smartphone

[TH@selfhtml]

Liebe Leserinnen und Leser in diesem Forum,

für meine Schülerinnen und Schüler möchte ich in dieser Corona-Zeit nach der Anleitung unter selfhtml-Tutorial ein Suchbild zu Tieren und Pflanzen in der Stadt erstellen, und das funktioniert am PC mit der Maus auch gut. Allerdings nutzen die meisten SuS Smartphone und Tablet, ich kann nicht davon ausgehen, dass jeder und jede Zugang zu einem PC hat. Aber mit diesen Touch-Geräten funktioniert mein Suchbild nicht, auch nicht mit folgender Ergänzung im svg-Code:

<defs>
    <style>
    	circle:focus {
	    fill: red;
	    opacity:0.7;
	  }
      circle:hover {
	    fill: red;
	    opacity:0.7;
	  }
    </style>
  </defs>   

Was mache ich falsch, wie geht es richtig? Mit den Stichworten hover und touch habe ich zum Beispiel den Hinweis auf zusätzlich :focus gefunden, aber damit allein scheint es noch nicht zu funktionieren.

Vielen Dank für hilfreiche Hinweise im Voraus!

Tobias Hilbricht

[Felix Riesterer]

Lieber TH@selfhtml,

Mit den Stichworten hover und touch habe ich zum Beispiel den Hinweis auf zusätzlich :focus gefunden, aber damit allein scheint es noch nicht zu funktionieren.

mier fiele da nur noch :active ein.

Liebe Grüße

Felix Riesterer

[TH@selfhtml]

Vielen Dank für die rasche Rückmeldung!

Ich habe jetzt auch noch ein entsprechendes :active hinzugefügt und sehe auch, dass es am PC das tut, was es soll, aber auf meinem Test-Tablet nicht.

Funktioniert so ein hover-Ersatz für Mobilgeräte womöglich nur mit Javascript? Dazu habe ich auch etwas gefunden, wollte das aber mangels bisheriger Erfahrungen meiden, während ich die Image-Map aus dem Tutorial auf meinem Kenntnisstand direkt verwenden konnte.

Weiterhin dankbar für hilfreiche Hinweise und mit freundlichen Grüßen

Tobias Hilbricht

[Rolf B]

Hallo TH@selfhtml,

ich habe das gerade man auf meinem Smartphone aufgerufen (Android, mit Chrome), und da reagieren die Image-Flächen. Ich halte den Finger drauf und das Rechteck wird hell.

Allerdings ist das kein Retina-Gerät, wo CSS-Pixel und Display-Pixel nicht 1:1 sind. Kann das ein Problem sein? Welches Mobilgerät verwendest Du?

Rolf

[klawischnigg]

Hi there,

Allerdings ist das kein Retina-Gerät, wo CSS-Pixel und Display-Pixel nicht 1:1 sind. Kann das ein Problem sein? Welches Mobilgerät verwendest Du?

Der Browser weiß von "Display-Pixel" unter Garantie nichts, um so etwas kümmert sich das Betriebssystem...

[JürgenB]

Hallo,

ich habe das gerade man auf meinem Smartphone aufgerufen (Android, mit Chrome), und da reagieren die Image-Flächen. Ich halte den Finger drauf und das Rechteck wird hell.

Allerdings ist das kein Retina-Gerät, wo CSS-Pixel und Display-Pixel nicht 1:1 sind. Kann das ein Problem sein? Welches Mobilgerät verwendest Du?

auf meinem iPhone6 wird bei kurzem Touch dem Link gefolgt (Click), bei langem Touch wird das Rechteck für ca. 1s eingefärbt (hoover).

Gruß
Jürgen

[TH@selfhtml]

Hallo Rolf, vielen Dank für die Rückmeldung! Ich habe ein Tablet und ein Smartphone mit Android und Chrome, auf denen ich das testen kann.

Ich habe das entsprechende Tutorial ebenfalls aufgerufen, und es funktioniert dort, wenn ich weiß wo ich suchen soll, d. h. wenn ich auf einen der Köpfe drücke. Was nicht geht auf Mobilgeräten (jedenfalls bei mir hier nicht) ist mit dem Finger über das Bild zu ziehen, und wenn ich über den Kopf komme, dann blinkt das weiße Rechteck auf. Mit der Maus am PC geht das, ich ziehe mit der Maus über den Kopf, ein weißes Rechteck erscheint. Auf Mobilgeräten müsste man das Suchbild also "abklopfen", lieber hätte ich, wenn es wie am PC funktionieren würde.

Ich suche noch mal weiter nach einer Lösung und warte auch mal ab, was ich von den SuS an Rückmeldungen bekomme.

Mit freundlichen Grüßen Tobias Hilbricht

[JürgenB]

Hallo Tobias,

das geht meines Wissens nach nur per Javascript. Da deine Schüler evtl. auch noch ältere iPhones (<=6) haben, musst du dich dann um Touch- und um Pointer-Events kümmern. Wie gut sind deine JS-Kentnisse?

Gruß
Jürgen

[TH@selfhtml]

Hallo Jürgen,

meine Javascript-Kenntnisse existieren noch nicht, aber ich habe es mit Hilfe von SelfHTML im Hinblick auf HTML, CSS und PHP geschafft, schnell einen Online-Klassenraum aufzubauen Webseite , der das tut, was ich brauche.

Wenn ich weiß, dass sich mein Suchbild nur mit Javascript vernünftig realisieren lässt, dann versuche ich mich da auch einzuarbeiten. Dann hätte ich auch etwas, was ich als Zusatzangebot zur Verfügung stellen kann, wenn die Schule wieder geöffnet wird.

Mit freundlichen Grüßen

Tobias Hilbricht