Die Webentwicklung ist ein wesentlicher Bestandteil unseres Lebens und hat sich in den letzten Jahren erheblich verändert. Jetzt können wir mit verschiedenen Technologien und Programmiersprachen schöne und interaktive Websites erstellen. Eine Möglichkeit, die wir implementieren können, besteht darin, Quickinfos zu erstellen, wenn Sie auf bestimmte Elemente zeigen.
In diesem Artikel erfahren Sie, wie Sie einen Tooltip oder "Tooltips" erstellen, wenn Sie mit der HTML-Markupsprache über ein Bild schweben. Dazu verwenden wir Inline-HTML-Attribute wie title.
Es sollte beachtet werden, dass Quickinfos in HTML eine einfache und bequeme Lösung zum Hinzufügen zusätzlicher Informationen zu Elementen auf einer Webseite sind. Sie sind besonders nützlich, wenn Sie erklären müssen, was ein bestimmtes Bild oder Text bedeutet, und sie können auch verwendet werden, um die Benutzerfreundlichkeit und Benutzerfreundlichkeit zu verbessern.
Erstellen einer Quickinfo in HTML beim Hover
Eine Möglichkeit, eine Quickinfo in HTML zu erstellen, besteht darin, ein Attribut zu verwenden title. Fügen Sie dazu ein Attribut hinzu title zu einem Element, das eine Eingabeaufforderung haben sollte. Zum Beispiel könnte es für ein Bild wie folgt aussehen:
Wenn Sie den Mauszeiger über dieses Bild bewegen, wird daher eine Quickinfo mit einer Beschreibung angezeigt.
Jedoch, das Attribut title hat seine Grenzen. Es erlaubt Ihnen nicht, Markup und Stile zu verwenden, um komplexere Eingabeaufforderungen zu erstellen. Sie können JavaScript oder CSS verwenden, um dieses Problem zu beheben. Zum Beispiel mit CSS und einem Pseudoelement ::after Sie können eine benutzerdefinierte Quickinfo mit Ihren eigenen Stilen und Inhalten erstellen.
Hier ist ein Beispielcode mit CSS:
.tooltip .tooltip::after .tooltip:hover::afterТекст с подсказкой
Wenn Sie den Mauszeiger über den Text "Quickinfo-Text" bewegen, wird daher eine Quickinfo mit den angegebenen Stilen und Inhalten angezeigt.
Dies sind nur zwei einfache Möglichkeiten, um eine Quickinfo in HTML zu erstellen. Abhängig von den Anforderungen und der Komplexität der Aufgabe können Sie auch andere Ansätze wie JavaScript oder Bibliotheken von Drittanbietern verwenden.
Kennung ![]()
um ein Bild einzufügen
Syntax für das Tag sieht wie folgt aus:
Die src-Eigenschaft gibt den Pfad zum Bild an, der absolut sein kann (z. B. "https://www .example.com/image.jpg ") oder relativ (z. B. "images/image.jpg").
Die alt-Eigenschaft gibt den alternativen Text an, der angezeigt wird, wenn das Bild nicht geladen werden kann oder wenn ein Besucher einen Bildschirmleser verwendet. Dieser Text hilft auch Suchmaschinen, den Inhalt des Bildes zu verstehen.
Kennung kann mit verschiedenen Attributen wie width , height , title und anderen ergänzt werden, um Größen, Hinweise und andere Bildeigenschaften anzugeben.
Beispiel für die Verwendung eines Tags :
In diesem Beispiel fügen wir das Bild "cat.jpg" mit Pfad "images/cat.jpg" und geben Sie den alternativen Text "Das Bild der Katze" an. Wenn das Bild nicht hochgeladen werden kann, sieht der Besucher den angegebenen alternativen Text.
Title-Attribut zum Erstellen einer Eingabeaufforderung
Es ist ziemlich einfach, einen Tooltip auf dem Bild anzuzeigen. Fügen Sie dazu dem img-Tag ein title-Attribut hinzu und geben Sie den Text an, den Sie in der Quickinfo anzeigen möchten.
Wenn der Benutzer in diesem Beispiel den Mauszeiger über ein Bild bewegt, wird die Quickinfo "Bildbeschreibung" im Fenster angezeigt.
Es ist wichtig zu beachten, dass die mit dem title-Attribut erstellten Tooltips vom Browser und vom Betriebssystem des Benutzers abhängen und auf verschiedenen Geräten unterschiedlich angezeigt werden können.
Erstellen eines Hinweises
Wenn Sie eine Quickinfo für ein Bild in HTML erstellen, ist es wichtig, darauf zu achten, dass es gestaltet ist, damit es für den Benutzer verständlich und ansprechend ist. Dazu können Sie verschiedene Stile und Designelemente verwenden.
Eine Möglichkeit, die Eingabeaufforderung zu gestalten, besteht darin, einen attraktiven Hintergrund und einen attraktiven Rahmen für den Bereich mit der Eingabeaufforderung festzulegen. Dies kann mit CSS geschehen, indem Sie die entsprechenden Werte für die background- und Border-Eigenschaften festlegen.
Sie können auch eine Vielzahl von Schriftarten und Textfarben verwenden, um einen Hinweis hervorzuheben und ihn sichtbarer zu machen. Sie können die Eigenschaften font-family und color für den Text innerhalb der Quickinfo festlegen.
Sie können eine Animation festlegen, wenn die Eingabeaufforderung ein- und ausgeblendet wird, um ein spektakuläreres Design zu erstellen. Beispielsweise können Sie die Eigenschaften opacity und transition verwenden, um die Eingabeaufforderung reibungslos zu erscheinen und zu verschwinden.
Das Akzentuieren von Stichwörtern oder Phrasen im Hinweistext kann für Benutzer hilfreich sein, um die benötigten Informationen schnell zu finden. Dazu können Sie die Tags strong oder em verwenden, um diese Textausschnitte hervorzuheben.
Es ist wichtig sich daran zu erinnern, dass das Design der Eingabeaufforderung mit dem Gesamtdesign der Seite übereinstimmen muss und die Benutzeroberfläche nicht übermäßig belastet ist. Es wird empfohlen, Tests durchzuführen und Feedback von Benutzern zu sammeln, um die Anforderungen der Benutzer optimal zu erfüllen.
CSS-Stile für Quickinfo
Um eine Quickinfo in HTML zu erstellen, wenn Sie sich über ein Bild bewegen, können Sie CSS-Stile verwenden. Dazu können Sie Pseudoelemente und eine Eigenschaft verwenden position.
Das folgende Beispiel zeigt, wie Sie eine Quickinfo erstellen:
.tooltip .tooltip .tooltiptext .tooltip:hover .tooltiptextТекст подсказки
In diesem Beispiel wird ein Container mit der Tooltip-Klasse verwendet, in dem sich ein Bild und ein Element mit der Tooltiptext-Klasse befinden, das den Quickinfo-Text enthält. Das Styling erfolgt über CSS-Klassen.
Für den Container mit der Klasse "tooltip" wird eine relative Positionierung und ein Inline-Blockdarstellungstyp festgelegt. Für ein Element mit der Tooltiptext-Klasse werden die folgenden Stile festgelegt: unsichtbarkeit der Quickinfo (Visibility-Eigenschaft), Breite, Hintergrundfarbe, Textfarbe, zentrierte Ausrichtung, Verrundung der Grenzen, innere Einrückung, absolute Positionierung relativ zum übergeordneten Container an der Unterseite und mittlere Ausrichtung relativ zum übergeordneten Container.
Wenn Sie auf einen Container mit der Tooltip-Klasse zeigen, wird das Element mit der Tooltiptext-Klasse sichtbar (durch Ändern des Werts der visibility-Eigenschaft) und die Transparenz wird durch die Opacity-Eigenschaft gleichmäßig geändert.
