link (oder hover?) -> zwei Bilder und erklärungstext in neuem, kleinen Fenster an bestimmter Stelle über Webseite

[michaah]

Nachdem ich eine bestimmte Erweiterungsseite fertiggestellt habe bin ich von meiner Lösung nicht mehr so überzeugt weil sie zuviel redundante Info enthält. Ich bin am überlegen und würde gerne ausprobieren die gewünschte Zusatzinfo bei Bedarf (klick oder hover) mittels eines entsprechend kleinen neuen Fensters über der Hauptseite einzublenden. Dazu würde ich mir gerne (Code-) Beispiele ansehen, weiß aber gar nicht genau wonach ich suchen muß. Gibt es dazu hier irgendwo Beispiele? Möglichst ohne JS.

Wäre dankbar für einen Link auf entsprechende Seiten ...

[Matthias Apsel]

Hallo michaah,

Ich bin am überlegen und würde gerne ausprobieren die gewünschte Zusatzinfo bei Bedarf (klick oder hover) mittels eines entsprechend kleinen neuen Fensters über der Hauptseite einzublenden. Dazu würde ich mir gerne (Code-) Beispiele ansehen, weiß aber gar nicht genau wonach ich suchen muß.

Tooltip.

Gibt es dazu hier irgendwo Beispiele? Möglichst ohne JS.

Ohne JS ist es möglich, aber nicht sehr komfortabel. Mit JS kann ich tippy.js empfehlen.

Bis demnächst
Matthias

[JürgenB]

Hallo,

… Zusatzinfo bei Bedarf (klick oder hover) … Möglichst ohne JS …

https://wiki.selfhtml.org/wiki/HTML/Interaktiv/details

Gruß
Jürgen

[michaah]

Es geht um Bilder und Text. so wie ich dein Beispiel versteh funktioniert das ausschließlich mit Text.

Es gibt doch die Möglichkeit per Link ein neues Fenster kleiner als der maxviewport zu öffnen. Dazu würde ich gerne mehr erfahren an pro/cons, Fallen und Akzeptablem. Auch ob man so ein Fenster durch hovern öffnen kann.

[JürgenB]

Hallo,

das summary-Element darf auch Bilder enthalten.

Gruß
Jürgen

[michaah]

Danke.

Das hätte ich natürlich selber finden müssen, sorry.

Nachdem ich nun im Frickl etwas damit herumgespielt habe frage ich mich ob das so ein Element ist welches genau so funktioniert wie man nicht erwartet dass es funktioniert.

Ich nenne jetzt mal das detail-element "Überschrift" und das summary-element "(versteckter,aufklappbarer) Inhalt" damit zumindest hoffentlich klar ist wovon ich rede:

Mir ist es gelungen, die "Überschrift" (gegenüber dem Ort im Frickl) relativ frei zu positionieren (was ich gar nicht will!!!), demgegenüber habe ich keine Möglichkeit gefunden den aufgeklappten Inhalt (gegenüber der "Überschrift") mehr oder minder frei zu positionieren. Das scheint offenbar nicht vorgesehen zu sein (oder ich habe es nicht herausbekommen wie das ginge. Das wäre aber was ich brauche ...

Hat da jemand nen Vorschlag ?

[JürgenB]

Hallo,

hast du es mal mit

details {
	position: relative;
}

details > :not(summary) {
    position: absolute;
    background-color: white;
    top: 1em;
    z-index: 10;
}

versucht?

Gruß
Jürgen

[michaah]

Grundsätzlich geht das, danke dafür.

Hier schieden sich allerdings die Geister zwischen Könnern und Anfängern. für mich ist das kaum mehr zu durchsteigen, was mich aber nicht hindern würde zu versuchen es irgendwie hin zu bekommen.

Allerdings ist einfach die Lösung mit den popupboxen die einfachere, für mich durchschaubarere und vor allem für den Zweck wohl die passenste.

Danke hier an alle!

[Matthias Apsel]

Hallo michaah,

vielleicht auch https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/target#Infobox. Mit gewissen Nachteilen, unter anderem dem Zumüllen der Browserhistorie.

An der Zugänglichkeit muss auch noch gearbeitet werden. Ich bleibe bei meiner JS-Empfehlung.

Bis demnächst
Matthias

[michaah]

Das erscheint mir zumindest besser positionierbar als das "Akkordeon". Doch möglicherweise ist das weiter unten liegende Beispiel mit der Popupbox das was ich suche. Muss mir wohl diese Pseudoelemente mal genauer anschauen.

Leider wird mich das wohl wieder in verschiedene Sackgassen führen :-( . Ich hoffe es ist möglich diese Elemente beim Anklicken über vorhandenem Inhalt anzuzeigen (im Sinne von nicht verschieben, überlagernd).

[Rolf B]

Hallo michaah,

nein, das geht. Stichwort: position:fixed

Rolf