Lag interaktive bildeetiketter med qTip (jQuery-plugin)

Bilder kan være ganske livløse og kjedelige - med mindre de er interaktive og kjempebra, det er. Og qTip gjør det enkelt, med kraften til jQuery. Les videre for å finne ut hvordan du kan legge til interaktive etiketter som vises når brukeren svinger over deler av et bilde.

Hvorfor vil du gjøre dette? Personlig bruker jeg teknikken på et nytt e-handelsnettsted, slik at brukeren kan sveve over elementene i en scene (som en Ikea-katalog), med produkttittelen og legg til i handlekurven som vises dynamisk. Det kan også brukes til god effekt på noe som et campus eller bykart, hvor det er mange merkelig formede elementer som egentlig kan gjøre med en beskrivelse uten å rote kartet. Et veldig enkelt eksempel vil også være Facebook-koder, hvor du svinger over et ansikt til ansikt, vil fortelle deg hvem de er. Dens bruk er begrenset bare av fantasien din.

Merk: Jeg antar en veldig grunnleggende kunnskap om jQuery og HTML her - i hvert fall sørg for at du har lest om selektorer jQuery Tutorial - Komme i gang: Grunnleggende & Selectors jQuery Tutorial - Komme i gang: Grunnleggende og valgorer I forrige uke snakket jeg om hvor viktig jQuery er for enhver moderne webutvikler og hvorfor det er kjempebra. I denne uken tror jeg det er på tide at vi fikk hendene våre skitne med noe kode og lærte hvordan ... Les mer, metoder Introduksjon til jQuery (del 2): ​​Metoder og funksjoner Introduksjon til jQuery (del 2): ​​Metoder og funksjoner Dette er en del av en igangværende nybegynnere introduksjon til jQuery webprogrammeringsserier. Del 1 dekket grunnleggende om jQuery om hvordan å inkludere det i prosjektet og selektorer. I del 2 fortsetter vi med ... Les mer og anonyme funksjoner Introduksjon til jQuery (del 3): Venter på siden for å laste og anonyme funksjoner Introduksjon til jQuery (del 3): Venter på siden for å laste og anonyme funksjoner jQuery er uten tvil en viktig ferdighet for den moderne webutvikleren, og i denne korte mini-serien håper jeg å gi deg kunnskapen om å begynne å bruke den i dine egne webprosjekter. I ... Les mer .

qtip

qTip er et omfattende verktøytips og merkingstillegg for jQuery, med en rekke stilarter. Vi bruker det spesielt med bildekartfunksjonaliteten, men det er absolutt ikke alt det kan gjøre. Ta en titt på plugin-siden for å lære mer, eller les videre for å komme i gang.

Lag en bildekart

Bildekartene selv er absolutt ikke noe nytt. Markupelementene har lenge vært tilgjengelig, og det var faktisk en god måte å presentere et navigasjonssystem på, med klikkbare deler av bildet som knytter seg til forskjellige seksjoner . Den samme grunnleggende bildekoden er fortsatt brukt for den delen av funksjonaliteten, så vi må definere det først.

Du kan bruke en rekke verktøy for å lage et bildekart - Adobe Fireworks eller Photoshop - men den enkleste og gratis løsningen er et elektronisk verktøy som dette. Det er absolutt ikke det eneste elektroniske verktøyet, og jeg støtter det ikke spesielt, men det virket enkelt nok å bruke - gi oss beskjed i kommentarene hvis du finner en bedre. Du kan definere rektangulære, sirkulære eller til og med polygonale former.

Start med å laste opp et bilde - i dette tilfellet skal jeg merke en skjermdump av MakeUseOf-nettsiden. Du må kanskje zoome ut for å se hele bildet i verktøyet.

Det bør være ganske opplagt å bruke det som et grunnleggende maleri-program - det eneste du må huske på er at når du tegner en polyform, må du holde SHIFT på det siste punktet for å lukke og avslutte. Her har jeg definert 4 former.

Når du er klar, bla ned og kopier koden gitt.

Opprett et grunnleggende nytt HTML-dokument, og lag opp koden litt, legg til en bildemerke for å peke på ditt opprinnelige bilde. Den enkleste måten å teste dette på, er å bruke en JSFiddle. Her er min prøve, i sin opprinnelige tilstand (den endelige kodesettet er gitt senere, ikke bekymre deg).

Husk å gi bildet a usemap attributt, peker til #ID av kartet som inneholder koordinatene (usemap =”#mymap”, for eksempel).

Legge til i qTip

Hvis du er klistret på koden din på JSFiddle, ser du at det er et alternativ på sidefeltet for å inkludere jQuery. Pass på at du aktiverer det. Vi kan også legge til andre eksterne ressurser her, så fortsett og legg til nettadressene for CSS og JS som er oppført på qTip-nedlastingssiden. Kopier og lim inn “alle funksjoner og stiler” koblinger til JSFiddle - men i praksis vil du bruke konfigurasjonsverktøyet nedenfor å bygge et tilpasset sett med funksjoner eller stiler.

Den fullstendige implementeringsveiledningen for qTip finner du her, men lar oss fortsette og lage noen enkle tekstbaserte verktøytips. Følgende Javascript vil målrette mot alle områdeelementer (elementene som definerer delene av vårt bildekart) på sidebelastning, og forteller qTip å jobbe med dem med innhold av hva som helst i alt-attributtet.

 $ (dokument) .ready (funksjon () $ ("område"). hver (funksjon (indeks, element) var link = $ (dette); $ (lenke) .qtip (content: link.attr alt ")););); 

Standarddesignet er ganske stygg - du kan se en demo av det her - men det er ok, la oss bruke et tilpasset design til popup-vinduene som dette (Jeg har utelatt noen av koden, og viser bare qTip-spesifikke delen).

$ (link) .qtip (innhold: link.attr ("alt"), stil: klasser: 'qtip-bootstrap qtip-shadow'); 

Jeg har også tatt med BootStrap CSS-filen som en ekstern fil, for å sortere ut stygge standard nettleserfonter. Dette er veldig mye overkill, vet jeg. Fortsatt: mye bedre!

En ting jeg nå merker er at stillingsstandarden nederst til høyre ikke egentlig er ideell. For å justere dette, la oss bruke posisjonsinnstillingen:

$ (link) .qtip (innhold: link.attr ("alt"), stil: klasser: 'qtip-bootstrap qtip-shadow', posisjon: target: 'mouse' / Kan utelates (f.eks. Standardadferd)); ); 

Beveg deg over et hvilket som helst element, og verktøytipset følger musen. Du kan se den ferdige demoen her.

Du kan også gjøre popupmodalet (så alt annet er nedtonet, og du må klikke utenfor for å komme tilbake til det), eller til og med laste inn noe innhold gjennom en AJAX-forespørsel. Jeg synes det er et ganske pent lite plugin som puster nytt liv til en ganske ubrukt HTML-standard - la oss se hva du kan komme opp, og vær så snill, gi oss beskjed i kommentarene hvis du har gjort noe med det.

Utforsk mer om: jQuery, Online Portfolio, Photo Sharing.