Diese JavaScript-Technik kann für viele Effekte verwendet werden, einschließlich Tooltips und Imagemaps.

Interaktive Websites können den Benutzern ein ansprechenderes Erlebnis bieten. Es gibt viele Möglichkeiten, eine Website interaktiver zu gestalten, z. B. durch Hinzufügen von Animationen, QuickInfos oder anderen zusätzlichen Effekten.

Einige Websites zeigen auch Informationen an, wenn der Benutzer mit der Maus über ein Element auf der Seite fährt. Dazu gehören Karten oder andere visuelle Daten, die es dem Benutzer ermöglichen, den Mauszeiger über das Bild zu bewegen, um einen Datenpunkt mithilfe einer QuickInfo anzuzeigen.

Sie können diesen Effekt mit HTML, CSS und JavaScript erzielen, indem Sie bestimmte CSS-Techniken und JavaScript-DOM-Konzepte verwenden.

Bilder können ein nützliches Mittel sein, um Informationen auf visuell ansprechende Weise auf einer Webseite zu vermitteln. Sie sind auch nützlich, um andere ansprechende Effekte hinzuzufügen, wie z einfache Bildergalerie.

Sie können mithilfe von CSS und JavaScript einen Tooltip über einem Bild in HTML hinzufügen.

Der in diesem Projekt verwendete Code ist in diesem verfügbar GitHub-Repository unter einer MIT-Lizenz.

  1. Fügen Sie in einer neuen Datei namens index.html die Grundstruktur einer HTML-Datei hinzu:
    html>
    <html>
    <Kopf>
    <Titel>Bild-Tooltip-BeispielTitel>
    Kopf>
    <Körper>
    Körper>
    html>
  2. Fügen Sie innerhalb des Body-Tags ein Container-Div hinzu. Dieses div enthält sowohl das Bild als auch die Tooltip-Elemente:
    <divKlasse="Container">
    div>
  3. Fügen Sie im Container ein Bild hinzu. Stellen Sie sicher, dass sich ein Bild mit einem passenden Dateinamen im selben Ordner wie Ihre HTML-Datei befindet:
    <BildQuelle="Bild.jpg"Klasse="Bild"Höhe="420"Breite="840"alt="Dein Bild">
  4. Fügen Sie unter dem Bild ein div hinzu, um den Tooltip darzustellen:
    <divKlasse="Kurzinfo">div>
  5. Fügen Sie im Head-Tag ein Style-Tag hinzu. Fügen Sie innerhalb des style-Tags ein Styling für den Bildcontainer und den Tooltip hinzu:
    <Stil>
    .Container {
    Position: relativ;
    Anzeige: Inline-Block;
     }

    .Kurzinfo {
    Position: absolut;
    links: 0;
    Anzeige: keiner;
    Polsterung: 5px;
    Hintergrundfarbe: #000;
    Farbe: #F f f;
    Schriftgröße: 12px;
     }
    Stil>
  6. Erstellen Sie ein neues Skript-Tag am Ende des Body-Tags:
    <Körper>
     Ihre Webseiteninhalte hier 
    <Skript>
    Skript>
    Körper>
  7. Innerhalb des script-Tags Verwenden Sie den DOM-Selektor Funktion querySelector, um die HTML-Elemente des Bildes und den Tooltip zu erhalten:
    konst Bild = dokumentieren.querySelector('.Bild');
    konst Kurzinfo = dokumentieren.querySelector('.tooltip');
  8. Fügen Sie einen Ereignis-Listener für die hinzu Mouseover Fall. Diese Funktion wird ausgeführt, wenn Sie mit der Maus über das Bild fahren. In diesem Fall wird der Tooltip auf dem Bildschirm angezeigt:
    image.addEventListener('mouseover', () => {
     tooltip.style.display = 'Block';
    });
  9. Fügen Sie einen Ereignis-Listener für die hinzu Maus aus Fall. Diese Funktion wird ausgeführt, wenn die Maus das Bild verlässt. In diesem Fall verschwindet der Tooltip vom Bildschirm:
    image.addEventListener('mouseout', () => {
     tooltip.style.display = 'keiner';
    });
  10. Öffnen Sie die Datei index.html in einem beliebigen Browser und bewegen Sie den Mauszeiger über das Bild, um den Tooltip anzuzeigen:

So berechnen und zeigen Sie die X- und Y-Pixelkoordinaten des Bildes an

Jetzt, da der Tooltip auf der Seite sichtbar ist, ändern Sie seine Position und seinen Text, um die X- und Y-Koordinaten der Maus anzuzeigen.

  1. Ändern Sie das CSS-Styling des Tooltips, sodass der Tooltip nicht sichtbar ist, bevor Sie den Mauszeiger über das Bild bewegen. Dadurch wird verhindert, dass Sie den Tooltip am unteren Rand des Bildes sehen, bevor Sie zur Position des Cursors springen:
    .Kurzinfo {
    Position: absolut;
    Spitze: -30px;
    links: 0;
    Anzeige: keiner;
    Polsterung: 5px;
    Hintergrundfarbe: #000;
    Farbe: #F f f;
    Schriftgröße: 12px;
    }
  2. Fügen Sie innerhalb des script-Tags einen weiteren Ereignis-Listener hinzu, um auf die zu lauschen Mausbewegung Fall. Diese Funktion wird jedes Mal kontinuierlich ausgeführt, wenn Ihre Maus über ein neues Pixel schwebt. Fügen Sie den Ereignisparameter hinzu, der Informationen über die eingibt Mausbewegung Ereignis in die Funktion. Diese Informationen umfassen die Bildkoordinaten, an denen sich die Maus an diesem Punkt befindet:
    image.addEventListener('Mausbewegung', (e) => {
    });
  3. Ändern Sie mithilfe des Ereignisses die horizontale Position des Tooltips mithilfe der linken CSS-Eigenschaft. Jedes Mal, wenn sich die Maus bewegt, wird der Wert so aktualisiert, dass er mit den X-Koordinaten des Cursors übereinstimmt, die in gespeichert sind KundeX Variable:
    tooltip.style.left = e.clientX + 'px';
  4. Ändern Sie die vertikale Position des Tooltips mit der CSS-Eigenschaft top. KundeY stellt die y-Koordinaten der Maus dar. Der OffsetHöhe -Eigenschaft enthält alle zusätzlichen Auffüllungen oder Rahmen innerhalb der QuickInfo. Da Sie den Tooltip nicht direkt dort haben möchten, wo sich der Cursor befindet, können Sie weitere 10 Pixel von der Position entfernen:
    tooltip.style.top = e.clientY - tooltip.offsetHeight - 10 + 'px';
  5. Ändern Sie den Textinhalt des Tooltips, um die Koordinaten anzuzeigen:
    tooltip.textContent = `X: ${e.offsetX}, Y: ${e.offsetY}`;
  6. Öffnen Sie die Datei index.html in einem beliebigen Browser und bewegen Sie den Mauszeiger über das Bild, um den aktualisierten Tooltip anzuzeigen:

Hinzufügen von Effekten zu Ihrer interaktiven Webseite

Jetzt wissen Sie, wie Sie einen interaktiven Tooltip über einem Bild auf Ihrer Webseite hinzufügen. Sie können Ihre HTML- und CSS-Kenntnisse weiter verbessern, indem Sie mit anderen interessanten HTML-Effekten experimentieren.