Austauschbares Bild bei Seitenaufruf präsentieren?

[Gunnar Bittersmann]

@@stehjan

Gelöst habe ich das, wie bereits beschrieben, über Anker (#) und :target (wie in dem Abschnitt "Infoboxen" beschrieben). […] Aber es funktioniert erst mal zufriedenstellend im Verhältnis zum beabsichtigten Zweck.

Nein, es funktioniert eben nicht. Bei Tastaturbedienung springt der Fokus auf das große Bild, anstatt auf dem Thumbnail zu verbleiben, sodass man zum vorigen oder nächsten Bild kommt.

:target ist für diese Anwendung einfach die falsche Lösung. Dass das so im SELFHTML-Wiki steht, ist darin begründet, dass dort oft das Pferd von hinten aufgezäumt wird. Man versucht, Technologien zu erklären und zieht dafür Beispiele an den Haaren herbei. Und dann kommt eben Murks dabei raus. Richtig wäre es, vom Problem auszugehen und zu beschreiben, welche Technologien man zu dessen Lösung braucht.

Vor Java schrecke ich im Moment noch ein wenig zurück weil ich mich bis dato damit noch gar nicht auseinandergesetzt habe und da erst mal von Anfang an einsteigen müsste. Aber auf Dauer komm ich da wohl nicht drumherum.

Doch, das kommst du. 😏

Um JavaScript eher nicht. Und wenn du dich damit auseinandersetzt, wirst du wissen, dass Java mit JavaScript so viel gemeinsam hat wie Puder mit Pu-der-Bär.^[1]

Das akute Problem war (wie Du dann richtig bemerkt hast): Bevor ein Bild per Klick aufgerufen wird, ist bei Seitenaufruf an der vorgesehenen Position natürlich eine unmotiviert freie Fläche. Es ist eben halt kein Bild zu sehen. Ich dachte es gäbe vielleicht eine Möglichkeit den Browser dazu zu bringen, bei Seitenaufruf gleich auch eines der Bilder aufzurufen

Gibt es. Genauso wie du das angewählte Bild mit :target { display: block } sichtbar machst, könntest du das erste sichtbar machen, wenn kein anderes angewählt ist. In meinem Beispiel:

#big-picture > img:first-of-type:not(:has(~ :target)) {
	display: block;
}

Könntest – wenn da nicht Firefox wäre, der :has() noch unzureichend implementiert hat. Auch das Kapseln in einen @supports selector(…)-Block hilft hier nicht.

Möglich wäre, initial das letzte Bild anzuzeigen:

#big-picture > img:last-of-type {
	display: block;
}

#big-picture > :is(:target ~ img:last-of-type) {
	display: none;
}

Aber erwähnte ich schon, dass :target für diese Anwendung einfach die falsche Lösung ist?

🖖 Живіть довго і процвітайте

---

1. Gibt’s Matthias’ Sammlung noch irgendwo? ↩︎