Realizați etichete de imagine interactive cu qTip (jQuery Plugin)

Publicitate

Imaginile pot fi destul de lipsite de viață și plictisitoare - dacă nu sunt interactive și minunate, adică. Și qTip face acest lucru ușor, cu puterea jQuery. Citiți mai departe pentru a afla cum puteți adăuga etichete interactive care apar atunci când utilizatorul trece peste părți ale unei imagini.

De ce ai vrea să faci asta? Personal, folosesc tehnica într-un nou site de comerț electronic - astfel încât utilizatorul să poată trece peste elemente o scenă (precum un catalog Ikea), cu titlul produsului și se adaugă butonul de coș care apare dinamic. De asemenea, ar putea fi folosit pentru a avea efecte bune pe ceva precum un campus sau o hartă a orașului, unde există o mulțime de elemente în formă ciudate, care ar putea face cu o descriere fără a aglomera harta. Un exemplu foarte simplu ar fi și etichetele de pe Facebook, unde trecerea pe fața unei persoane vă va spune cine sunt. Utilizările sale sunt limitate doar de imaginația ta.

Notă: presupun aici o cunoștință de bază despre jQuery și HTML - cel puțin asigură-te că ai citit

selectoare jQuery Tutorial - Noțiuni introductive: Noțiuni de bază și selectoriSăptămâna trecută, am vorbit despre cât de important este jQuery pentru orice dezvoltator web modern și de ce este minunat. Săptămâna aceasta, cred că a venit timpul să ne murdărim cu niște coduri și am învățat cum ... Citeste mai mult , metode Introducere în jQuery (Partea 2): Metode și funcțiiAceasta face parte dintr-o introducere pentru începători în seria de programare web jQuery. Prima parte a abordat elementele de bază ale jQuery despre cum să o incluzi în proiectul tău și selectori. În partea 2, vom continua cu ... Citeste mai mult , și funcții anonime Introducere în jQuery (Partea 3): Așteptarea paginii de încărcare și funcții anonimejQuery este, probabil, o abilitate esențială pentru dezvoltatorul web modern, iar în această mini-serie scurtă sper să vă ofer cunoștințele pentru a începe să o folosiți în propriile proiecte web. În... Citeste mai mult .

Q-Tip

qTip este un tooltip complet și plugin de etichetare pentru jQuery, cu o varietate de stiluri. O vom folosi în mod special cu funcționalitatea hărții imaginii, dar aceasta nu este cu siguranță tot ce poate face. Aruncă o privire la pagina pluginului pentru a afla mai multe sau pentru a citi mai departe pentru a începe.

Realizarea unei hărți de imagine

Hărțile cu imagini în sine, cu siguranță, nu sunt un lucru nou - elementele de marcare sunt disponibile de multă vreme și înapoi în ziua în care a fost considerată de fapt o modalitate bună de prezentare a unui sistem de navigație - cu părți ale imaginii care se pot face clic pe diferite secțiuni. Același cod de bază pentru harta imaginii este încă utilizat pentru acea porțiune a funcționalității, așa că va trebui să o definim mai întâi.

Puteți utiliza o varietate de instrumente pentru a crea o hartă de imagine - Adobe Fireworks sau Photoshop - dar cea mai simplă și gratuită soluție este un instrument online ca acesta. Cu siguranță nu este singurul instrument online și nu îl aprob în mod special, dar mi s-a părut suficient de simplu de utilizat - anunțați-ne în comentarii dacă găsiți unul mai bun. Puteți defini forme dreptunghiulare, circulare sau chiar poligonale.

Începeți prin a încărca o poză - în acest caz, voi eticheta o captură de ecran a site-ului web MakeUseOf. Este posibil să fie nevoie să micșorați pentru a vizualiza imaginea completă din instrument.

Ar trebui să fie destul de evident cum să-l folosești ca pe un program de pictură de bază - singurul lucru de reținut este ca atunci cand desenati o forma poli, trebuie sa tineti SHIFT pe ultimul punct pentru a inchide si finalizarea. Aici am definit 4 forme.

Când sunteți gata derulați în jos și copiați codul dat.

Creați un nou document HTML de bază și curățați puțin codul, adăugând o etichetă de imagine pentru a indica imaginea originală. Cel mai simplu mod de a face acest test este folosind un JSFiddle. Iată proba mea, în starea inițială (setul de cod final este dat mai târziu, nu vă faceți griji).

Nu uitați să oferiți imaginii usemap atribut, indicând #ID a hărții care conține coordonatele (usemap =“# mymap“, de exemplu).

Adăugarea în qTip

Dacă ați lipit codul la JSFiddle, veți vedea că există o opțiune în bara laterală pentru a include jQuery. Asigurați-vă că activați asta. Putem adăuga și alte resurse externe aici, așa că mergeți mai departe și adăugați adresele URL pentru CSS și JS enumerate pe pagina de descărcare qTip. Copiați și lipiți linkurile „toate caracteristicile și stilurile” în JSFiddle - deși în practică, utilizați instrumentul de configurare de mai jos pentru a crea un set personalizat de caracteristici sau stiluri.

Ghidul complet de implementare pentru qTip poate fi găsit aici, dar permite să mergem mai departe și să creăm câteva sfaturi de instrumente simple bazate pe text. Următorul Javascript va viza toate elementele din zonă (elementele care definesc părțile din harta imaginii noastre) la încărcarea paginii, spunând qTip să le lucreze cu conținut de orice este în atributul alt.

$ (document) .ready (funcție () { $ ("suprafață"). fiecare (funcție (index, element) { legătură var = $ (aceasta); $ (Link) .qtip ({ continut: link.attr ("alt") }); }); });

Designul implicit este destul de urât - puteți vedea o demonstrație a acestuia aici - dar este în regulă, să aplicăm un design personalizat la ferestrele de acest tip (Am omis o parte din cod, arătând doar secțiunea specifică qTip).

$ (Link) .qtip ({ continut: link.attr ("alt"), stil: { clase: 'qtip-bootstrap qtip-shadow' } });

Am inclus și BootStrap CSS fișier ca fișier extern, pentru a sorta fonturi urâte de browser standard. Știu că asta este foarte mult. Totuși: mult mai bine!

Un lucru pe care îl observ acum este că poziția implicită din partea dreaptă jos nu este chiar ideală. Pentru a ajusta acest lucru, să utilizăm setarea de poziție:

$ (Link) .qtip ({ continut: link.attr ("alt"), stil: { clase: 'qtip-bootstrap qtip-shadow' }, poziție: { țintă: „mouse”, ajustare: { mouse: true // Poate fi omis (de exemplu, comportament implicit) } } }); });

Acum treceți peste orice element, iar indicatorul va urma mouse-ul. Poti vizualizați demo-ul finalizat aici.

Puteți face, de asemenea, modalitatea pop-up (deci toate celelalte sunt întunecate și trebuie să faceți clic pe exterior pentru a vă întoarce), sau chiar să încărcați un anumit conținut printr-o solicitare AJAX. Cred că este un mic plugin destul de îngrijit care inspiră viață nouă într-un standard HTML destul de neutilizat - să vedem ce puteți veni și vă rugăm să ne informați în comentarii dacă ați făcut ceva aceasta.