Toolboxes nur mit CSS3 und Bild — Erste Erfolge
Das war die Ausgangslage:
Findest du 5 Fehler? — Fahre mit der Maus über das Bild um Hinweise zu finden, was ein Fehler sein könnte.
Fange oben mit der Suche an. Gehe dabei von links nach rechts vor.
Wenn du mit der Maus über dem gefundenen Fehler bleibst, kommt der Begriff zum Vorschein.
Schön wäre es, wenn es bei den Bild-Areas statt des <area titles="xy" ...> einer der unten gezeigten Tooltips funktionieren würde.
Der 1. Schritt ist gemacht:
Beim Überfahren des Schildes Museum wird eine Toolbox mit dem Hinweis auf den „Fehler” angezeigt; in reinem CSS3 und ohne Javascript.
Allerdings habe ich es noch nicht geschafft, dass die Toolbox verschwindet, wenn der Bereich verlassen wird. So wird die Box auch angezeigt, wenn mit der Maus von rechts das Bild angesteuert wird.
⇓ Hier wird nicht das Schild Museum angezeigt, sondern der Opa. Auch hier wieder: So wird die Box auch angezeigt, wenn mit der Maus von rechts das Bild angesteuert wird.
Durch die Umbenennung des Namens bei usemap="#myMap" zu usemap="#myMap1" ist der folgende Effekt aufgelöst. Und noch ein interessanter Effekt ist zu beobachten: fährt die Maus auf das Schild Museum, wird im oberen Bild auf den Fehler beim Schild verwiesen.
Umgekehrt passiert das nicht. Fehler 2: Opa wird nicht im oberen Bild angezeigt.
Ideen und Lösungsvorschläge erwünscht!
Dazu schrieb am 10.4.2021 Karl Richard Lembach: Wenn ich Dich richtig verstanden hab, möchtest Du einen formatierten Tooltip ausgeben, wenn der Cursor über dem gewünschten Bereich der Grafik steht.
Eigentlich ist dafür der title-tag von area zuständig.
Laut selfhtm ist es nicht möglich area mit CSS zu stylen.
Es hilft also auch nicht für jeden area-Bereich eine eigene class zu definieren (da wäre sonst was mit '::before oder ::after' machbar).
Der hover-sensitive span-tag interagiert jedoch nicht mit dem area-tag. Es ist egal, ob er innerhalb des map-Bereiches oder ausserhalb davon steht. Sein 'rahmendes' Element ist alleine der a-tag. Somit ist der gesamte Bereich, der durch den a-tag aufgespannt wird (hier das Bild) die Sensorfläche.
Um nur einen Teil der Grafik als Sensor für den Tooltip zu aktivieren, bleibt nach meinem Wissen nur dieser Weg:
Grafik in rechteckige Teile aufteilen (Mosaik) und diese im Gerüst einer Tabelle ausgeben. Richtig formatiert sieht man nur die ganze Grafik.
Einzelne Zellen kann man dann für den Tooltip sensibilisieren.
Das ist jedoch MEGA - aufwändig!!!
Da ist es einfacher, das mit area und javascript und mouseover / mouseout zu realisieren.