Skapa interaktiva bildetiketter med qTip (jQuery Plugin)

Annons

Bilder kan vara ganska livlösa och tråkiga - såvida de inte är interaktiva och fantastiska. Och qTip gör det enkelt med kraften i jQuery. Läs vidare för att ta 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 detta? Personligen använder jag tekniken på en ny e-handelswebbplats - så användaren kan sväva över delar av en scen (som en Ikea-katalog), med produktens titel och knappen Lägg till i kundvagnen visas dynamiskt. Det kan också användas för att påverka något som ett campus eller en stadskarta, där det finns massor av konstigt formade element som verkligen kan göra med en beskrivning utan att röra kartan. Ett mycket enkelt exempel skulle också vara Facebook-taggar, där du svävar över en persons ansikte kommer att berätta vem de är. Användningen begränsas 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 selektorer

jQuery Tutorial - Komma igång: Basics & SelectorsFörra veckan talade jag om hur viktigt jQuery är för alla moderna webbutvecklare och varför det är fantastiskt. Den här veckan tror jag det är dags att vi blir smutsiga med lite kod och lärde oss hur ... Läs mer , metoder Introduktion till jQuery (del 2): ​​Metoder och funktionerDetta är en del av en pågående introduktion av nybörjare till jQuery webbprogrammeringsserier. Del 1 omfattade grunderna för jQuery för hur du inkluderar 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å att sidan laddas och anonyma funktionerjQuery är utan tvekan en väsentlig färdighet för den moderna webbutvecklaren, och i denna korta miniserie hoppas jag ge dig kunskap om att börja använda det i dina egna webbprojekt. I... Läs mer .

QTIP

qTip är ett omfattande verktygstips och etikett-plugin för jQuery, med en mängd olika stilar. Vi kommer att använda den specifikt med bildkartfunktionen, men det är verkligen inte allt det kan göra. Ta en titt på plugin-sida för att lära sig mer eller läsa vidare för att komma igång.

Att skapa en bildkarta

Själva bildkartorna är verkligen inte en ny sak - markeringselementen finns tillgängliga länge och långt tillbaka till dagen ansågs faktiskt vara ett bra sätt att presentera ett navigationssystem - med klickbara delar av bilden som länkar till olika sektioner. Samma grundläggande kartkod används fortfarande för den delen av funktionaliteten, så vi måste definiera den först.

Du kan använda olika verktyg för att skapa en bildkarta - Adobe Fireworks eller Photoshop - men den enklaste och gratis 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 webbplatsen MakeUseOf. Du kan behöva zooma ut för att se hela bilden i verktyget.

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

När du är redo bläddrar du ned och kopierar den angivna koden.

Skapa ett grundläggande nytt HTML-dokument och rengör koden lite, lägg till en bildtagg som pekar på din ursprungliga bild. Det enklaste sättet att testa detta är att använda a JSFiddle. här är mitt prov, i dess ursprungliga tillstånd (den slutliga koduppsättningen ges senare, oroa dig inte).

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

Lägg till i qTip

Om du har klistrat in din kod på JSFiddle ser du att det finns ett alternativ på sidfältet för att inkludera jQuery. Se till att du aktiverar det. Vi kan också lägga till andra externa resurser här, så gå vidare och lägg till URL: er för CSS och JS som listas på qTip-nedladdningssidan. Kopiera och klistra in länkarna "alla funktioner och stilar" i JSFiddle - men i praktiken skulle du använda konfigurationsverktyget nedan för att skapa en anpassad uppsättning funktioner eller stilar.

Den fullständiga implementeringsguiden för qTip kan vara hittade här, men låter oss gå vidare och skapa några enkla textbaserade verktygstips. Följande Javascript kommer att rikta in sig på alla områdeselement (objekten som definierar delarna av vår bildkarta) på sidbelastningen och ber qTip att arbeta med dem med innehåll av allt som finns i alt-attributet.

$ (dokument). redan (funktion () { $ ("område"). varje (funktion (index, element) { var länk = $ (detta); $ (Länk) .qtip ({ innehåll: link.attr ("alt") }); }); });

Standarddesignen är ganska ful - du kan se en demo av den här - men det är ok, låt oss tillämpa en anpassad design på popups som denna (Jag har utelämnat en del av koden och visar bara det specifika avsnittet qTip).

$ (Länk) .qtip ({ innehåll: link.attr ("alt"), stil: { klasser: 'qtip-bootstrap qtip-skugga' } });

Jag har också inkluderat BootStrap CSS fil som en extern fil för att sortera fula vanliga webbläsarteckensnitt. Det här är mycket överdrivet, jag vet. Fortfarande: mycket bättre!

En sak jag nu märker är att standardinställningen längst ner till höger inte riktigt ä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-skugga' }, position: { mål: 'mus', justera: { mus: true // Kan utelämnas (t.ex. standardbeteende) } } }); });

Håll nu muspekaren över alla element och verktygstipet följer musen. Du kan visa den färdiga demonstrationen här.

Du kan också göra popup-modalen (så att 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 via en AJAX-begäran. Jag tycker att det är en ganska snygg liten plugin som andas nytt liv i en ganska oanvänd HTML-standard - låt oss se vad du kan komma på och låt oss veta i kommentarerna om du har gjort något med den.