Ich habe ein Bild und darauf Logos (es ist eine Karte), ich möchte ein kleines Popup mit Informationen über den Standort dieses Logos haben, wenn der Benutzer seine Maus über das Logo bewegt.
Kann ich das tun, ohne ein Javascript-Framework zu verwenden? Wenn ja, gibt es kleine Bibliotheken / Skripte, die mir das erlauben?
Ja, das geht ohne Javascript. Verwenden Sie eine HTML-Imagemap mit Titelattributen wie folgt:
%Vor% Das Stack Overflow-Logo bezieht sich auf die Imagemap , die a Rechteck für jedes der beiden Wörter mit einem area -Tag. Jedes area -Tag title -Element gibt den Text an, den Browser normalerweise als Tooltip anzeigen. Das shape -Attribut kann auch einen Kreis oder ein Polygon angeben.
Ein einzelnes Bild allein gibt dem Browser nicht die semantischen Informationen zu den Logos innerhalb. Sie können eine Imagemap verwenden, um die Koordinaten anzugeben. Um Tooltips zu erzielen, wenden Sie einfach ein title -Attribut auf jeden Link an. Für anspruchsvollere QuickInfos (wie zum Beispiel Styling, mehrere Zeilen usw.) benötigen Sie etwas nicht standardmäßiges wie UniTip .
MooTools hat ein raffiniertes Skript dafür. Siehe MooTools-Tipps . Lightweight auf dem HTML auch.
Hier ist eine Demo der Version 1.11.
Tatsächlich ist mootools eines der vielen Frameworks
mit denen Sie Funktionalität zu jedem Element auf
hinzufügen können
Ihre Webseite. Hier ist ein Link zu einem kleinen Tutorial.
Ссылка
Mootools ist nicht wirklich ein Copy-Paste-Typ von Framework,
es ermutigt dich, über den mitgelieferten code und die seite zu schauen
Rollen Sie Ihre eigene Lösung mit einigen ausgezeichneten Beispielen.
Sie können JavaScript-Widget auf Ссылка ausprobieren. Skript erlaubt das Hinzufügen von Tooltips für den Teil des Bildes - wenn der Benutzer die Maus über die Region auf dem Foto bewegt, wird der Skript-Popup-Tooltip angezeigt, umrandet die Region und blendet andere Teile aus. Coole Sache, um Leute auf dem Foto zu markieren. Sehen Sie sich die Demo auf Ссылка
an Sie können das Attribut title für einen einfachen Tooltip verwenden. es funktioniert bei fast allen DOM-Objekten.
Tags und Links javascript html