Skapa interaktiva bildetiketter med qTip (jQuery-plugin)

Bilder kan vara ganska livlösa och tråkiga - såvida de inte är interaktiva och fantastiska, det är. Och qTip gör det enkelt, med kraften i jQuery. Läs vidare för att få reda på hur du kan lägga till interaktiva etiketter som visas när användaren svävar över delar av en bild.

Varför skulle du vilja göra det här? Personligen använder jag tekniken på en ny eCommerce-webbplats, så användaren kan sväva på en scen (till exempel en Ikea-katalog), med produkttiteln och knappen Lägg till i kundvagnen visas dynamiskt. Det kan också användas för att få bra effekt på något som en campus eller stadskarta, där det finns massor av märkligt formade element som verkligen kan göra med en beskrivning utan att stela kartan. Ett mycket enkelt exempel skulle också vara Facebook-taggar, där svävar över en persons ansikte kommer att berätta för vem de är. Dess användningsområden är begränsade endast av din fantasi.

Obs! Jag antar en mycket grundläggande kunskap om jQuery och HTML här - åtminstone se till att du har läst om väljare JQuery Handledning - Komma igång: Grunder och väljare JQuery Handledning - Komma igång: Grunder och väljare I förra veckan pratade jag om hur viktigt jQuery är för alla moderna webbutvecklare och varför det är fantastiskt. I veckan tror jag att det är dags att vi fick våra händer smutsiga med lite kod och lärde oss hur ... Läs mer, metoder Introduktion till jQuery (del 2): ​​Metoder och funktioner Introduktion till jQuery (del 2): ​​Metoder och funktioner Detta är en del av en pågående nybörjare introduktion till jQuery webbprogrammeringsserier. Del 1 omfattade jQuery-grunderna om hur man ska inkludera det i ditt projekt och väljare. I del 2 fortsätter vi med ... Läs mer och anonyma funktioner Introduktion till jQuery (Del 3): Väntar på sidan för att ladda och anonyma funktioner Introduktion till jQuery (Del 3): Väntar på sidan för att ladda och anonyma funktioner jQuery är förmodligen en viktig färdighet för den moderna webbutvecklaren, och i denna korta mini-serie hoppas jag ge dig kunskapen för att börja använda den i dina egna webbprojekt. I ... Läs mer .

QTIP

qTip är ett omfattande verktygstips och märkningsprogram för jQuery, med olika stilar. Vi använder det specifikt med bildkortsfunktionaliteten, men det är inte allt det kan göra. Ta en titt på plugin-sidan för att lära dig mer, eller läs vidare för att komma igång.

Gör en bildkarta

Bildkartor själva är verkligen inte nya - markupelementen har varit tillgängliga under en längre tid, och det blev faktiskt ansett som ett bra sätt att presentera ett navigationssystem - med klickbara delar av bilden som länkar till olika sektioner . Samma grundläggande bildkod används fortfarande för den delen av funktionaliteten, så vi måste definiera det först.

Du kan använda en mängd olika verktyg för att skapa en bildkarta - Adobe Fireworks eller Photoshop - men den enklaste och fria lösningen är ett onlineverktyg som den här. Det är verkligen inte det enda onlineverktyget och jag stöder det inte särskilt, men det verkade enkelt att använda - låt oss veta i kommentarerna om du hittar en bättre. Du kan definiera rektangulära, cirkulära eller till och med polygonala former.

Börja med att ladda upp en bild - i det här fallet kommer jag att märka en skärmdump av MakeUseOf-webbplatsen. Du kan behöva zooma ut för att se din fullständiga bild i verktyget.

Det borde vara ganska uppenbart hur man använder det som ett grundläggande målningsprogram - det enda du behöver komma ihåg är att när du gör en polyform måste du hålla SHIFT på sista punkten för att stänga och avsluta. Här har jag definierat 4 former.

När du är klar bläddra ner och kopiera koden.

Skapa ett nytt nytt HTML-dokument och rengör koden lite, lägg till en bildtagg för att peka på din ursprungliga bild. Det enklaste sättet att testa detta använder en JSFiddle. Här är mitt prov, i det ursprungliga tillståndet (den slutliga koduppsättningen ges senare, oroa dig inte).

Kom ihåg att ge bilden a usemap attribut, pekar på #id av kartan som innehåller koordinaterna (usemap =”#mymap”, till exempel).

Lägger till i qTip

Om du har klistrat in din kod på JSFiddle ser du att det finns ett alternativ på sidofältet för att inkludera jQuery. Se till att du aktiverar det. Vi kan också lägga till andra externa resurser här, så fortsätt och lägg till webbadresserna för CSS och JS som finns på qTip-hämtningssidan. Kopiera och klistra in “alla funktioner och stilar” länkar till JSFiddle - men i praktiken skulle du använda konfigurationsverktyget nedanför att bygga en anpassad uppsättning funktioner eller stilar.

Den fullständiga implementeringsguiden för qTip kan hittas här, men låter fortsätta och skapa några enkla textbaserade verktygstips. Följande Javascript kommer att rikta sig mot alla områdeselement (de objekt som definierar delarna av vår bildkarta) på sidladdning och säger qTip att arbeta med dem med innehåll av vad som helst i alt-attributet.

 $ (dokument) .ready (funktion () $ ("area"). Varje (funktion (index, element) var länk = $ (detta); $ (länk) .qtip (content: link.attr alt ")););); 

Standarddesignen är ganska ful - du kan se en demo av den här - men det är okej, låt oss applicera en anpassad design till popup-filerna så här (Jag har utelämnat en del av koden och visar endast den specifika sektionen qTip).

$ (länk) .qtip (innehåll: link.attr ("alt"), stil: klasser: 'qtip-bootstrap qtip-shadow'); 

Jag har också inkluderat BootStrap CSS-filen som en extern fil, för att sortera ut fula standardbläddringsfonter. Det här är mycket överkill, jag vet. Fortfarande: mycket bättre!

En sak som jag nu märker är att positionsinställningen av nederst till höger inte är idealisk. För att justera detta, låt oss använda positionsinställningen:

$ (länk) .qtip (innehåll: link.attr ("alt"), stil: klasser: 'qtip-bootstrap qtip-shadow', position: target: 'mouse' / Kan utelämnas (t.ex. standardbeteende)); ); 

Håll nu över något element, och verktygstipset följer musen. Du kan se den färdiga demo här.

Du kan också göra popup-modal (så allt annat är nedtonat och du måste klicka utanför för att komma tillbaka till det), eller till och med ladda in något innehåll genom en AJAX-förfrågan. Jag tycker att det är en ganska snygg liten plugin som andas nya liv i en ganska oanvänd HTML-standard - låt oss se vad du kan komma upp och låt oss meddela oss i kommentarerna om du har gjort något med det.

Utforska mer om: jQuery, Online Portfolio, Fotodelning.