Hoverlinks (Linkvorschau-Popups, wie bei Wikipedia)

STOPP!

Dies ist eine Vorlage und wird auf verschiedenen Seiten eingefügt.

FINGER WEG SONST FINGER AB!

---

Hoverlinks!

Es ist wie bei Wikipedia! Muss ich wirklich mehr sagen?

Ursprünglich von Croquembouche für die Verwendung in SCP-9001^ⓘSCP-9001 - FraktalEs stellt sich heraus, dass man seine eigenen Artikel in Komponenten einfügen kann. Wer wird sich beschweren? Du?- erstellt, Hoverlinks sind für diesen einen Fall intendiert, dass du liebend gern einen anderen interessanten und relevanten Artikel in der Mitte deiner Geschichte verlinken möchtest, aber du dem Leser nicht das Gefühl vermitteln willst, er verpasste etwas, wenn er ebendiesen Artikel nicht durchgelesen hat. Aber vermittels dem Einsatz von Hoverlinks kannst du prägnant den Kontext des Links zusammenfassen und mit dem verringerten Ablenkungsrisiko für den Leser fortfahren, sodass er deinen Artikel nicht für immer zurücklasse.

Benutzung

Auf jedem Wiki, klatsche das ganz oben, über jegliche CSS-Themes auf deine Seite:

[[include :scp-wiki-de:component:hoverlinks]]

Du benötigst es nur einmal, gleich wie viele Hoverlinks du auf deiner Seite haben möchtest.

Anschließend, für jeden einzelnen Hoverlink, den du auf der Seite haben möchtest, kopiere die folgende Syntax (oder nutzte den untenstehenden Generator) und füge es an die gewünschte Stelle ein.

+ Zeige die Syntax

Mit einem Bild:

[[span class="hoverlink"]][[[LINK_URL|LINK_TEXT]]]^^ⓘ^^[[span class="hoverlink-card"]][[span class="hoverlink-title"]]HOVER_TITLE[[/span]][[span class="hoverlink-text"]]HOVER_TEXT[[/span]][[span class="hoverlink-image" style="--src: url(Bild_URL)"]]-[[/span]][[/span]][[/span]]

Ohne ein Bild:

[[span class="hoverlink"]][[[LINK_URL|LINK_TEXT]]]^^ⓘ^^[[span class="hoverlink-card"]][[span class="hoverlink-title"]]HOVER_TITLE[[/span]][[span class="hoverlink-text"]]HOVER_TEXT[[/span]][[/span]][[/span]]

Generator

Nutze dieses Werkzeug, um einen Hoverlink für deine Seite zu generieren. Alles was du brauchst ist die Seiten-URL (es kann die vollständige URL oder nur die Kurzform sein, z. B. "SCP-173"). Danach kannst du Crom nach dem Ausfüllen der Felder für dich fragen [Anm. d. Ü.: außerhalb des EN-Wikis für bessere Funktionalität den vollständigen Link verwenden, vgl. o.]. Der Generator hat bereits ein zufälliges SCP eingetragen, sodass du es unverzüglich ausprobieren kannst.

Die von Crom genutzten Daten sind allerdings nicht wirklich ideal für einen Hoverlink - zum Beispiel stammt der Vorschautext [Amn. d. Ü.: Previewmodul] vom Autor und ist mehr eine Kurzbeschreibung als eine nutzbringende Zusammenfassung und die meisten Seiten haben sowas nicht mal. Du sollest Croms Daten als Ausgangspunkt wahrnehmen und den Link an deine spezifischen Bedürfnisse selbst anpassen.

Siehe auch: Wie diese Daten für deinen Artikel zu ändern sind.^ⓘCrom für AutorenAls ein Autor, der erste Eindruck, den die meisten Leute von deinem Artikel haben werden, wird von Crom sein. Zum Beispiel eine Discord-Einbettung, ein Redditbeitrag oder ein integriertes Suchmodul auf deiner Seite, oder diese eine Website. Da gibt es viele Erscheinungsformen wie Crom deine arbeiten präsentiert, die du als Autor bearbeiten kannst. - (en)

Gebrauchsanweisung

Was sollte der Hovertext sein?

Du solltest den Hover-Text stark anpassen, damit er speziell auf deinen Artikel und den konkreten Kontext des Links zugeschnitten ist.

Meine Empfehlung lautet, denke darüber nach weswegen du diesen Artikel verlinkst und nenne diesen Grund so prägnant wie möglich, z. B. in-universe:

• Wenn ich beispielsweise eine Geschichte schreibe über Antimemes und ich mag SCP-055^ⓘSCP-055Unbekanntes Objekt, an das sich nicht erinnert werden kann. Das erste von der Foundation sichergestellte Antimeme. verlinken, weil es das erste war. Ich könnte genau das tun, was ich gerade tat. Jetzt hat der Leser Zugriff auf Kontext hinter meiner Entscheidung und er weis, dass es nur zufälliges Worldbuilding ist, welches sie ignorieren können. Er kann mit Lesen fortfahren.
• Wenn ich eine Geschichte mit voraussetzten Lesen schreibe - lass uns sagen, es spielt im Ende-des-Todes-Kanon - so möchte ich vielleicht auf den Hub verlinken, wobei ich sowas sage wie "als Resultat eines herannahenden ΩK-Klasse Szenario^ⓘEnde des Todes - HubAktive ΩK-Klasse-Szenarios ausgelöst durch unbekannte Ereignisse, die dazu führen, dass kein Organismus sterben kann. Es wird erwartet, dass alle Forscher damit vertraut sind.- irgendwas irgendwas und so fort". Dies vermittelt dem Leser Wissen, diegetisch, dass sie wahrscheinlich aufhören sollten, meine Geschichte zu lesen, um aufzuholen.

Oder du möchtest dem Leser implizieren, er solle gehen und die verlinkte Seite umfassend lesen, oder den Eindruck erwecken, dass er eine riesige, zusammenhängende Informationsdatenbank lese, indem du genügend Text zum Hoverlink hinzufügst, sodass er abgeschnitten wird und ausläuft – genau wie bei Wikipedia.

Vermeide es, deinen Hoverlink in Kurzbeschreibungen zu verwandeln, indem du z. B. "coole Zitate" vom Artikel einfügst, oder Reviews. Das Ziel ist nicht, Verkäufer zu spielen, indem Marketing auf den Leser angewendet wird. Gebe ihm stattdessen das Werkzeug, das er braucht, um eine informierte Entscheidung über den Linkaufruf zu fällen. Außer es sei auf einer out-of-universe Seite, wie deiner Autorenseite, mach' in dem Fall was du willst.

Sehe von Spoilern irgendwelcher Twists ab, wenn es sich vermeiden lässt.

Was hat es mit dem ⓘ Symbol auf sich?

Ich denke, es ist eine gute Idee, für den Leser einen Hoverlink hervorzuheben. Die Wikis nutzten Links seit fast zwei Dekaden und deswegen gibt es eine menge internalisierter Vertrautheiten. Wenn du den Link nicht klar als Hoverlink zu erkennen gibst, werde es eine große Mehrheit der Nutzer nicht als solchen erkennen.

Falls du vielleicht nicht glaubst, es sei eine gute Idee. Du kannst es nach Ermessen entfernen. Entferne [Anm. d. Ü.: oder ersetzte] bloß das ^^ⓘ^^ aus der Syntax.

Sollte CSS die Hoverlinks gestalten?

Absolut. Wenn du ein Schöpfer eines Sigma-Themes bist, fühl dich frei, den Hoverlink anzupassen. Bist du ein Schöpfer eines Themes anderer Basis (BHL, Basalt), dann solltest du vor dem Restylen zuerst warten bis das Basistheme geupdatet wurde.

Warum gibt es kein [[include]] für den Hoverlink selbst?

Weil du keinen [[include]] binnen einer Textzeile einbauen kannst, gerade da, wo die meisten Links sitzen.

Kannst du einen Hoverlink erstellen, der kein Link ist?

Sicher^ⓘHoverlinks!Hoverlinks! Hoverlinks! Hoverlinks!. Alles notwendige ist [# LINK_TEXT] anstelle von [[[LINK_URL | LINK_TEXT]]] zu benutzten. Es sieht immer noch nach einem Link aus (, und das muss es auch, so kann er immer noch mit Keyboardnavigation angesteuert werden), aber er führt nirgendwo hin.

Quelle CSS

Hier ist das CSS für Hoverlinks:

+ Hier drin

/* HOVERLINKS! */
:root {
  /**
   * Konfigurationsvariablen
   * CSS-Themes sollten mit der Veränderung dieser starten
   * Verändere andere Eigenschaften nur wenn nötig
   */
 
  --hoverlink-bg-color: white;
  --hoverlink-text-color: black;
 
  /* Vertikale Ausdehnung zwischen Popup und Link */
  --hoverlink-distance: 0.5rem;
 
  /* Wie weit das Popup sich bewegt beim Verschwinden */
  --hoverlink-motion-distance: 1rem;
 
  /* Weite des Popup auf dem Desktop, inklusive Bild */
  --hoverlink-width: 30rem;
 
  /* Höhe des Popups */
  --hoverlink-height: 12rem;
 
  /* Weite des Bildes auf dem Desktop  */
  --hoverlink-image-width: var(--hoverlink-height);
 
  /* Text am Kartenende. Benutze "" zum Entfernen */
  --hoverlink-read-more: "↗ Lese mehr";
}
 
.hoverlink > a[href="javascript:;"] ~ .hoverlink-card {
  --hoverlink-read-more: "";
}
 
.hoverlink {
  position: relative;
}
@media (max-width: 1200px) {
  .hoverlink {
    position: static;
  }
}
 
.hoverlink-card {
  display: grid;
  grid-template-areas: "title" "text";
  grid-template-rows: auto 1fr;
  border: thin solid #0006;
  border-radius: 0.25rem;
  width: calc(var(--hoverlink-width) - var(--hoverlink-image-width));
  height: var(--hoverlink-height);
  box-shadow: 0 2.5rem 5rem -1rem #0002;
  background-color: var(--hoverlink-bg-color);
  color: var(--hoverlink-text-color);
  text-align: left;
  font-style: normal;
  font-weight: normal;
 
  opacity: 0;
  visibility: hidden;
  transition-property: opacity, transform, visibility;
  transition-duration: 0.2s, 0.2s, 0s;
  transition-timing-function: ease-out;
  transition-delay: 0s, 0s, 0.4s;
 
  position: absolute;
  z-index: 9;
  top: 0; left: 50%;
  pointer-events: none;
  user-select: none;
  transform: translate( -50%, calc(
    -100%
    - var(--hoverlink-distance)
    + var(--hoverlink-motion-distance)
  ));
}
.hoverlink-card:where(:has(.hoverlink-image)) {
  grid-template-areas: "title image" "text image";
  grid-template-columns: auto var(--hoverlink-image-width);
  width: var(--hoverlink-width);
}
@media (max-width: 1200px) {
  .hoverlink-card {
    top: auto;
    transform: translate(-50%, calc(
      0px
      - var(--hoverlink-distance)
      + var(--hoverlink-motion-distance)
    ));
    --hoverlink-distance: 100% - 2rem;
  }
}
@media (max-width: 600px) {
  .hoverlink-card {
    --hoverlink-image-width: 16rem;
    width: 16rem;
    height: auto;
    min-height: var(--hoverlink-height);
    max-height: 15rem;
  }
  .hoverlink-card:has(.hoverlink-image) {
    height: 28rem;
    grid-template-areas: "title" "text" "image";
    grid-template-rows: auto 1fr var(--hoverlink-image-width);
    grid-template-columns: auto;
    max-height: none;
  }
}
.hoverlink-image {
  grid-area: image;
  aspect-ratio: 1;
  width: var(--hoverlink-image-width);
  background-image: var(--src);
  background-size: cover;
  background-position: center;
  color: transparent;
}
.hoverlink-title {
  grid-area: title;
  font-size: 1.2em;
  font-weight: 600;
  margin: 0.5rem;
}
.hoverlink-text {
  grid-area: text;
  margin-inline: 0.5rem;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
}
.hoverlink-text::after {
  position: absolute;
  pointer-events: none;
  inset: 0;
  background-image: linear-gradient(to bottom,
    transparent 70%,
    var(--hoverlink-bg-color) 95%
  );
 
  content: var(--hoverlink-read-more);
  font-size: 80%;
  display: flex;
  align-items: end;
  justify-content: end;
  opacity: 0.9;
}
 
.hoverlink > a {
  /* Deaktiviert die Seitenvorschau auf iOS wenn es das Popup verdeckt. Du kannst es nicht entlassen, ohne das Popup zu entlassen */
  -webkit-touch-callout: none;
}
.hoverlink > :is(a:hover, a:active, a:focus, sup:hover) ~ .hoverlink-card,
.hoverlink-card--static {
  opacity: 1;
  visibility: visible;
  --hoverlink-motion-distance: 0rem;
  transition-delay: 0.2s, 0.2s, 0s;
}
.hoverlink-card--static {
  position: relative;
  pointer-events: auto;
  user-select: auto;
  transform: translate(-50%, -0.5rem);
  --hoverlink-distance: 0.5rem;
  --hoverlink-motion-distance: 0rem;
}
.hoverlink > sup {
  user-select: none;
  top: -0.4em;
  margin-right: -0.25ch;
}
 
/* Entfernt den 'Lese mehr' Text, wenn es ein Dummylink ist */
.hoverlink > a[href="javascript:;"] ~ .hoverlink-card {
  --hoverlink-read-more: "";
}