Lav interaktive billedmærkater med qTip (jQuery-plugin)

Reklame

Billeder kan være ret livløse og kedelige - medmindre de er interaktive og fantastiske. Og qTip gør det nemt med kraften i jQuery. Læs videre for at finde ud af, hvordan du kan tilføje interaktive etiketter, der vises, når brugeren svæver over dele af et billede.

Hvorfor vil du gøre dette? Personligt bruger jeg teknikken på et nyt e-handelswebsted - så brugeren kan holde musen over elementerne i en scene (som et Ikea-katalog), med produktets titel og knappen Tilføj til indkøbskurv vises dynamisk. Det kan også bruges til god effekt på noget som et campus eller et bykort, hvor der er masser af mærkeligt formede elementer, der virkelig kan gøre med en beskrivelse uden rodet kortet. Et meget simpelt eksempel ville også være Facebook-tags, hvor man svever over et personers ansigt fortæller dig, hvem de er. Dets anvendelser er kun begrænset af din fantasi.

Bemærk: Jeg antager en meget grundlæggende viden om jQuery og HTML her - i det mindste skal du sørge for at have læst om selektorer jQuery-tutorial - Kom godt i gang: Basics & Selectors

Sidste uge talte jeg om, hvor vigtigt jQuery er for enhver moderne webudvikler, og hvorfor det er fantastisk. Denne uge tror jeg, det er på tide, at vi får vores hænder beskidte med noget kode og lærte hvordan ... Læs mere , metoder Introduktion til jQuery (del 2): ​​Metoder og funktionerDette er del af en igangværende introduktion til jQuery-webprogrammeringsserier. Del 1 dækkede grundlæggende oplysninger om jQuery om, hvordan man inkluderer det i dit projekt og vælgere. I del 2 fortsætter vi med ... Læs mere , og anonyme funktioner Introduktion til jQuery (del 3): Venter på, at siden indlæses og anonyme funktionerjQuery er uden tvivl en væsentlig færdighed for den moderne webudvikler, og i denne korte miniserie håber jeg at give dig viden til at begynde at gøre brug af den i dine egne webprojekter. I... Læs mere .

qTip

qTip er et omfattende værktøjstip og mærkning plugin til jQuery med en række forskellige stilarter. Vi bruger det specifikt med billedkortfunktionaliteten, men det er bestemt ikke alt, hvad det kan gøre. Se på pluginside for at lære mere eller læse videre for at komme i gang.

Oprettelse af et billedkort

Billedkort i sig selv er bestemt ikke en ny ting - markeringselementerne er tilgængelige i lang tid og langt tilbage i dagen blev faktisk betragtet som en god måde at præsentere et navigationssystem på - med dele, der kan klikkes på, linker til forskellige sektioner. Den samme grundlæggende billedkortkode bruges stadig til den del af funktionaliteten, så vi bliver nødt til at definere den først.

Du kan bruge en række forskellige værktøjer til at oprette et billedkort - Adobe Fireworks eller Photoshop - men den nemmeste og gratis løsning er et online værktøj som denne. Det er bestemt ikke det eneste online-værktøj, og jeg støtter det ikke specielt, men det virkede enkelt nok til at bruge - fortæl os det i kommentarerne, hvis du finder en bedre. Du kan definere rektangulære, cirkulære eller endda polygonale former.

Start med at uploade et billede - i dette tilfælde vil jeg mærke et skærmbillede af MakeUseOf-webstedet. Du skal muligvis zoome ud for at se dit fulde billede i værktøjet.

Det skal være temmelig indlysende, hvordan man bruger det som et grundlæggende maleriprogram - det eneste, man skal huske er at når du tegner en polyform, skal du holde SKIFT på det sidste punkt for at lukke og Afslut. Her har jeg defineret 4 figurer.

Når du er klar skal du rulle ned og kopiere den angivne kode.

Opret et grundlæggende nyt HTML-dokument, og ryd koden lidt op, tilføj et billedtag for at pege på dit originale billede. Den nemmeste måde at udføre test på er at bruge en JSFiddle. Her er min prøve, i dets oprindelige tilstand (det endelige kodesæt gives senere, ikke bekymre dig).

Husk at give billedet en USEMAP attribut, der peger på #id af kortet, der indeholder koordinaterne (USEMAP =”# MyMap”, for eksempel).

Tilføjelse i qTip

Hvis du har indsat din kode på JSFiddle, ser du, at der er en mulighed på sidebjælken til at inkludere jQuery. Sørg for, at du aktiverer det. Vi kan også tilføje andre eksterne ressourcer her, så gå videre og tilføj webadresserne til CSS og JS, der er angivet på qTip-downloadsiden. Kopier og indsæt linkene "alle funktioner og stilarter" i JSFiddle - selvom du i praksis vil bruge konfigurationsværktøjet nedenfor til at oprette et brugerdefineret sæt funktioner eller stilarter.

Den komplette implementeringsvejledning til qTip kan være fundet her, men lad os gå videre og oprette nogle enkle tekstbaserede værktøjstip. Følgende Javascript vil målrette mod alle områdeelementer (de emner, der definerer delene af vores billedkort) på sideindlæsning, idet vi beder qTip om at arbejde på dem med indhold af hvad der er i alt-attributten.

$ (dokument). allerede (funktion () { $ ("område"). hver (funktion (indeks, element) { var link = $ (dette); $ (Link) .qtip ({ indhold: link.attr ("alt") }); }); });

Standarddesignet er ret grimt - du kan se en demo af det her - men det er ok, lad os anvende et tilpasset design til popups som dette (Jeg har udeladt noget af koden, der kun viser det qTip-specifikke afsnit).

$ (Link) .qtip ({ indhold: link.attr ("alt"), stil: { klasser: 'qtip-bootstrap qtip-skygge' } });

Jeg har også inkluderet BootStrap CSS fil som en ekstern fil for at sortere grimme standard browser skrifttyper. Dette er meget overdreven, ved jeg. Stadig: meget bedre!

Én ting, jeg nu lægger mærke til, er, at standardindstillingen i nederste højre ikke virkelig er ideel. For at justere dette, lad os bruge positionsindstillingen:

$ (Link) .qtip ({ indhold: link.attr ("alt"), stil: { klasser: 'qtip-bootstrap qtip-skygge' }, position: { mål: 'mus', juster: { mus: sand // Kan udelades (f.eks. standardopførsel) } } }); });

Hold markøren over ethvert element, og værktøjstipet følger din mus. Du kan se den færdige demo her.

Du kan også oprette popup-modal (så alt andet er dæmpet væk, og du skal klikke udenfor for at komme tilbage til det) eller endda indlæse noget indhold via en AJAX-anmodning. Jeg synes, det er et temmelig pænt lille plugin, der indånder nyt liv i en temmelig ubrugt HTML-standard - lad os se, hvad du kan komme frem, og lad os vide det i kommentarerne, hvis du har lavet noget med det.