Erstellen Sie interaktive Bildbeschriftungen mit qTip (jQuery Plugin)

Bilder können ziemlich leblos und langweilig sein - es sei denn, sie sind interaktiv und fantastisch. Und qTip macht dies mit jQuery einfach. Lesen Sie weiter, um herauszufinden, wie Sie interaktive Beschriftungen hinzufügen können, die angezeigt werden, wenn der Benutzer über Teile eines Bildes fährt.

Warum möchtest du das tun? Ich persönlich verwende die Technik in einer neuen E-Commerce-Site - so kann der Benutzer Elemente einer Szene (wie einen Ikea-Katalog) überfahren, wobei der Produkttitel und die Schaltfläche zum Einkaufswagen dynamisch angezeigt werden. Es kann auch verwendet werden, um auf einem Campus oder einer Stadtkarte eine gute Wirkung zu erzielen. Dort gibt es viele seltsam geformte Elemente, die mit einer Beschreibung wirklich funktionieren könnten, ohne die Karte zu stören. Ein sehr einfaches Beispiel wären auch Facebook-Tags, bei denen Sie durch das Schweben über dem Gesicht einer Person erfahren, wer sie sind. Ihre Verwendung ist nur durch Ihre Vorstellungskraft begrenzt.

Hinweis: Ich gehe davon aus, dass Sie sehr grundlegende Kenntnisse in jQuery und HTML besitzen. Stellen Sie sicher, dass Sie sich mit den Auswahlelementen vertraut gemacht haben. JQuery Tutorial - Erste Schritte: Grundlagen und Auswahlmöglichkeiten Wie wichtig jQuery für jeden modernen Webentwickler ist und warum es großartig ist. Ich denke, es ist an der Zeit, dass wir uns mit Code etwas schmutzig machen und erfahren haben, wie… Lesen Sie mehr, Methoden Einführung in jQuery (Teil 2): ​​Methoden und Funktionen Einführung in jQuery (Teil 2): ​​Methoden und Funktionen Dies ist Teil eines Einführung in die jQuery-Webprogrammierserie. Teil 1 befasste sich mit den jQuery-Grundlagen, wie man sie in Ihr Projekt einfügt, und Selektoren. In Teil 2 fahren wir mit… Lesen Sie weiter, und anonyme Funktionen. Einführung in jQuery (Teil 3): Warten auf die Seite zum Laden der anonymen Funktionen Einführung in jQuery (Teil 3): Warten auf die Seite zum Laden der anonymen Funktionen jQuery ist zweifellos eine essentielle Fähigkeit für den modernen Webentwickler, und ich hoffe, dass ich Ihnen in dieser kurzen Miniserie das Wissen vermitteln kann, das Sie in Ihren eigenen Webprojekten einsetzen können. In… Lesen Sie weiter .

qTipp

qTip ist ein umfassendes Tooltip- und Beschriftungs-Plugin für jQuery mit einer Vielzahl von Stilen. Wir werden es speziell mit der Image Map-Funktionalität verwenden, aber das ist sicherlich nicht alles, was es kann. Werfen Sie einen Blick auf die Plugin-Seite, um mehr zu erfahren, oder lesen Sie weiter, um zu beginnen.

Erstellen einer Imagemap

Image Maps selbst sind sicherlich nichts Neues - die Markup-Elemente stehen seit langem zur Verfügung, und früher galt es als eine gute Möglichkeit, ein Navigationssystem zu präsentieren - mit anklickbaren Bildteilen, die mit verschiedenen Abschnitten verknüpft sind . Derselbe grundlegende Image-Map-Code wird immer noch für diesen Teil der Funktionalität verwendet. Daher müssen wir diesen zuerst definieren.

Sie können eine Vielzahl von Werkzeugen zum Erstellen einer Imagemap verwenden - Adobe Fireworks oder Photoshop -, aber die einfachste und kostenlose Lösung ist ein Online-Werkzeug wie dieses. Es ist sicherlich nicht das einzige Online-Tool, und ich unterstütze es nicht besonders, aber es schien einfach zu verwenden - lassen Sie uns in den Kommentaren wissen, ob Sie ein besseres finden. Sie können rechteckige, kreisförmige oder sogar polygonale Formen definieren.

Beginnen Sie mit dem Hochladen eines Bildes - in diesem Fall beschriften Sie einen Screenshot der MakeUseOf-Website. Sie müssen möglicherweise herauszoomen, um Ihr gesamtes Bild im Werkzeug anzuzeigen.

Es sollte einleuchtend sein, wie man es wie ein einfaches Malprogramm verwenden kann - man muss nur daran denken, dass man beim Zeichnen einer Poly-Form die UMSCHALTTASTE an dem letzten Punkt halten muss, um den Vorgang abzuschließen und abzuschließen. Hier habe ich 4 Formen definiert.

Wenn Sie fertig sind, scrollen Sie nach unten und kopieren Sie den angegebenen Code.

Erstellen Sie ein grundlegendes neues HTML-Dokument, und bereinigen Sie den Code ein wenig, indem Sie ein Bildtag hinzufügen, das auf das Originalbild verweist. Am einfachsten testen Sie dies mit einem JSFiddle. Hier ist mein Beispiel in seinem ursprünglichen Zustand (der endgültige Codesatz wird später angegeben, keine Sorge).

Denken Sie daran, das Bild a zu geben usemap Attribut, das auf zeigt #Ich würde der Karte mit den Koordinaten (usemap =”#mymap”, zum Beispiel).

Hinzufügen in qTip

Wenn Sie Ihren Code in JSFiddle eingefügt haben, wird in der Seitenleiste eine Option zum Einfügen von jQuery angezeigt. Stellen Sie sicher, dass Sie das aktivieren. Wir können hier auch andere externe Ressourcen hinzufügen. Fügen Sie also die URLs für CSS und JS hinzu, die auf der qTip-Downloadseite aufgeführt sind. Kopieren Sie den “alle Funktionen und Stile” Verknüpfungen zu JSFiddle - in der Praxis würden Sie jedoch das darunterliegende Konfigurationstool verwenden, um einen benutzerdefinierten Satz von Features oder Stilen zu erstellen.

Das vollständige Implementierungshandbuch für qTip ist hier zu finden, wir können jedoch einige einfache textbasierte Tooltips erstellen. Das folgende Javascript zielt beim Laden der Seite auf alle Flächenelemente (die Elemente, die die Teile unserer Imagemap definieren). Dabei wird qTip angewiesen, sie mit dem Inhalt des Alt-Attributs zu bearbeiten.

 $ (document) .ready (function () $ ("area"). each (Funktion (Index, Element) var link = $ (this); $ (link) .qtip (content: link.attr (" alt ")););); 

Das Standarddesign ist ziemlich hässlich - Sie können hier eine Demo davon anzeigen -, aber das ist in Ordnung, lassen Sie uns ein Popup-Design auf diese Popups anwenden (Ich habe etwas Code weggelassen und nur den qTip-spezifischen Abschnitt angezeigt.).

$ (link) .qtip (content: link.attr ("alt"), Stil: classes: 'qtip-bootstrap qtip-shadow'); 

Ich habe auch die BootStrap-CSS-Datei als externe Datei eingefügt, um hässliche Standardbrowser-Schriftarten auszusortieren. Das ist sehr übertrieben, ich weiß. Trotzdem viel besser!

Eine Sache, die ich jetzt feststelle, ist, dass der Positionsfehler von rechts unten nicht ideal ist. Um dies anzupassen, verwenden wir die Positionseinstellung:

$ (link) .qtip (content: link.attr ("alt"), Stil: Klassen: 'qtip-bootstrap qtip-shadow', position: target: 'mouse', anpassen: mouse: true / / Kann weggelassen werden (z. B. Standardverhalten)); ); 

Bewegen Sie den Mauszeiger über ein beliebiges Element und der Tooltip folgt Ihrer Maus. Sie können die fertige Demo hier ansehen.

Sie können auch das Popup-Modal festlegen (so dass alles andere verdunkelt wird und Sie nach außen klicken müssen, um wieder darauf zuzugreifen) oder sogar einige Inhalte über eine AJAX-Anfrage geladen werden. Ich denke, es ist ein hübsches kleines Plugin, das einem ziemlich ungenutzten HTML-Standard neues Leben einhaucht - lassen Sie uns sehen, was Sie können, und lassen Sie uns in den Kommentaren wissen, ob Sie damit etwas gemacht haben.

Erfahren Sie mehr über: jQuery, Online-Portfolio, Fotofreigabe.