Maak interactieve beeldlabels met qTip (jQuery Plugin)

Afbeeldingen kunnen behoorlijk levenloos en saai zijn, tenzij ze interactief en geweldig zijn. En qTip maakt dit gemakkelijk, met de kracht van jQuery. Lees verder om erachter te komen hoe u interactieve labels kunt toevoegen die worden weergegeven wanneer de gebruiker over delen van een afbeelding zweeft.

Waarom zou je dit willen doen? Persoonlijk gebruik ik de techniek op een nieuwe eCommerce-site - zodat de gebruiker de elementen van een scène (zoals een Ikea-catalogus) kan laten zweven, terwijl de titel van het product en de knop Toevoegen aan winkelwagentje dynamisch worden weergegeven. Het kan ook worden gebruikt voor een goed effect op zoiets als een campus- of stadsplattegrond, waar veel vreemd gevormde elementen zijn die echt een beschrijving kunnen geven zonder de kaart te overbelasten. Een heel eenvoudig voorbeeld zijn ook Facebook-tags, die over een gezicht van een persoon zweven en u vertellen wie ze zijn. Het gebruik ervan wordt alleen beperkt door uw verbeeldingskracht.

Opmerking: ik veronderstel hier een basiskennis van jQuery en HTML - zorg er in elk geval voor dat je over selectors hebt gelezen jQuery zelfstudie - Aan de slag: Basics en selectors jQuery zelfstudie - Aan de slag: Basics & Selectors Vorige week heb ik het gehad over hoe belangrijk jQuery is voor elke moderne webontwikkelaar en waarom het geweldig is. Deze week denk ik dat het tijd wordt dat we onze handen vuil maken met een code en leren hoe ... Lees meer, methoden Inleiding tot jQuery (deel 2): ​​methoden en functies Inleiding tot jQuery (deel 2): ​​methoden & functies Dit maakt deel uit van een doorlopende beginners introductie tot jQuery web programming series. Deel 1 behandelde de jQuery-basisprincipes van hoe deze in uw project moest worden opgenomen, en selectors. In deel 2 gaan we verder met ... Lees meer, en anonieme functies Inleiding tot jQuery (deel 3): wachten op de pagina om te laden en anonieme functies Inleiding tot jQuery (deel 3): wachten tot de pagina wordt geladen en anonieme functies jQuery is aantoonbaar een essentiële vaardigheid voor de moderne webontwikkelaar en in deze korte miniserie hoop ik je de kennis te geven om er gebruik van te maken in je eigen webprojecten. In ... Lees meer .

qtip

qTip is een uitgebreide tooltip en labeling plug-in voor jQuery, met een verscheidenheid aan stijlen. We zullen het specifiek gebruiken met de functionaliteit van de imagemap, maar dat is zeker niet alles wat het kan doen. Kijk op de plug-in-pagina voor meer informatie of lees verder om aan de slag te gaan.

Een imagemap maken

Image maps zelf zijn zeker geen nieuw iets - de markup-elementen zijn al lang beschikbaar, en nog lang geleden was het zelfs een goede manier om een ​​navigatiesysteem te presenteren - met klikbare delen van de afbeelding die linken naar verschillende secties . Dezelfde basisafbeeldingskaartcode wordt nog steeds gebruikt voor dat gedeelte van de functionaliteit, dus we moeten dat eerst definiëren.

U kunt verschillende hulpmiddelen gebruiken om een ​​imagemap te maken - Adobe Fireworks of Photoshop - maar de eenvoudigste en gratis oplossing is een online tool zoals deze. Het is zeker niet de enige online tool en ik ben het niet in het bijzonder aan het bekrachtigen, maar het leek eenvoudig genoeg om te gebruiken - laat het ons weten in de comments als je een betere vindt. U kunt rechthoekige, ronde of zelfs veelhoekige vormen definiëren.

Begin met het uploaden van een afbeelding - in dit geval ga ik een screenshot labelen van de MakeUseOf-website. Mogelijk moet u uitzoomen om uw volledige afbeelding in de tool te bekijken.

Het moet vrij duidelijk zijn hoe je het moet gebruiken als een basisvervaardigingsprogramma - het enige om te onthouden is dat je bij het tekenen van een poly-vorm SHIFT op het laatste punt moet houden om af te sluiten en te eindigen. Hier heb ik 4 vormen gedefinieerd.

Als u klaar bent, scrollt u naar beneden en kopieert u de gegeven code.

Maak een standaard nieuw HTML-document en ruim de code een beetje op door een afbeeldingstag toe te voegen die naar uw oorspronkelijke afbeelding verwijst. De eenvoudigste manier om dit te testen is met behulp van een JSFiddle. Hier is mijn voorbeeld, in zijn oorspronkelijke staat (de definitieve codeset wordt later gegeven, maak je geen zorgen).

Vergeet niet om de afbeelding een te geven usemap attribuut, wijzend naar #ID kaart van de kaart met de coördinaten (usemap =”#mymap”, bijvoorbeeld).

Toevoegen in qTip

Als je je code hebt geplakt op JSFiddle, zie je dat er een optie in de zijbalk is om jQuery op te nemen. Zorg ervoor dat je dat inschakelt. We kunnen hier ook andere externe bronnen toevoegen, dus ga door en voeg de URL's voor CSS en JS toe die worden vermeld op de qTip-downloadpagina. Kopieer en plak de “alle functies en stijlen” links naar JSFiddle - hoewel u in de praktijk de onderstaande configuratietool zou gebruiken om een ​​aangepaste reeks functies of stijlen te bouwen.

De volledige implementatiegids voor qTip is hier te vinden, maar laten we doorgaan en een aantal eenvoudige op tekst gebaseerde tooltips maken. De volgende Javascript zal alle gebiedselementen targeten (de items die de delen van onze imagemap bepalen) bij het laden van de pagina, en vertelt qTip om eraan te werken met de inhoud van wat zich ook in het alt-attribuut bevindt.

 $ (document) .ready (function () $ ("area"). each (functie (index, element) var link = $ (this); $ (link) .qtip (content: link.attr (" alt ")););); 

Het standaard ontwerp is vrij lelijk - je kunt hier een demo van bekijken - maar dat is ok, laten we een aangepast ontwerp toepassen op de pop-ups zoals deze (Ik heb een deel van de code weggelaten, alleen de qTip-specifieke sectie getoond).

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

Ik heb ook het BootStrap CSS-bestand opgenomen als een extern bestand om lelijke standaardbrowserlettertypen te sorteren. Dit is erg overdreven, ik weet het. Nog steeds: veel beter!

Een ding dat ik nu opvalt, is dat positie-instelling van rechtsonder niet echt ideaal is. Om dit aan te passen, gebruiken we de positie-instelling:

$ (link) .qtip (content: link.attr ("alt"), stijl: classes: 'qtip-bootstrap qtip-shadow', position: target: 'mouse', adjust: mouse: true / / Kan worden weggelaten (bijvoorbeeld standaardgedrag)); ); 

Zweven nu over elk element, en de tooltip volgt je muis. Je kunt de voltooide demo hier bekijken.

Je kunt ook de pop-up modaal maken (dus alles wordt grijs weergegeven en je moet buiten klikken om er weer op te komen), of zelfs wat inhoud laden via een AJAX-verzoek. Ik denk dat het een vrij nette kleine plug-in is die een vrij ongebruikte HTML-standaard nieuw leven in blaast - laten we eens kijken wat je kunt verzinnen en laat het ons alsjeblieft weten in de comments als je er iets mee hebt gemaakt.

Ontdek meer over: jQuery, online portfolio, delen van foto's.