Vytvorte interaktívne obrázkové štítky pomocou qTip (jQuery Plugin)

Reklama

Obrázky môžu byť dosť živé a nudné - pokiaľ nie sú interaktívne a úžasné, to znamená. A qTip to uľahčuje s pomocou jQuery. Čítajte ďalej a zistite, ako môžete pridať interaktívne štítky, ktoré sa objavia, keď sa používateľ presunie na časti obrázka.

Prečo by ste to chceli urobiť? Osobne používam túto techniku ​​na novom webe s elektronickým obchodom - aby mohol používateľ umiestniť kurzor nad prvky scéna (napríklad katalóg Ikea) s názvom produktu a tlačidlom na pridanie do košíka dynamicky. Dalo by sa to tiež využiť na niečo, ako je kampus alebo mapa mesta, kde je veľa podivne tvarovaných prvkov, ktoré by mohli skutočne urobiť s popisom bez toho, aby boli mapy preplnené. Veľmi jednoduchým príkladom by boli aj značky Facebook, kde vám vznášanie sa nad tvárou osoby povie, kto sú. Jeho použitie je obmedzené iba vašou fantáziou.

Poznámka: Predpokladám tu veľmi základné znalosti jQuery a HTML - aspoň sa o nich dočítate selektory Výukový program jQuery - Začíname: Základy a výberyMinulý týždeň som hovoril o tom, aké dôležité je jQuery pre každého moderného webového vývojára a prečo je to úžasné. Tento týždeň si myslím, že je čas, aby sme si zašpinili ruky nejakým kódom a zistili sme, ako ...

Čítaj viac , metódy Úvod do jQuery (časť 2): Metódy a funkcieToto je súčasť pokračujúceho úvodného úvodu do programovacej série jQuery web. Časť 1 sa venovala základom jQuery, ako ju zahrnúť do vášho projektu, a výberom. V časti 2 budeme pokračovať ... Čítaj viac a anonymné funkcie Úvod do jQuery (3. časť): Čakanie na načítanie stránky a anonymné funkciejQuery je nepochybne nevyhnutnou zručnosťou pre moderného webového vývojára a v tejto krátkej mini-sérii dúfam, že vám poskytnem znalosti, ktoré vám umožnia začať ich používať vo vašich vlastných webových projektoch. V ... Čítaj viac .

qtip

qTip je komplexný popisný a označovací doplnok pre jQuery s rôznymi štýlmi. Budeme ho používať konkrétne s funkciou obrázkovej mapy, ale určite to nie je všetko, čo dokáže. Pozrite sa na stránka doplnku Ak sa chcete dozvedieť viac, alebo si prečítajte ďalšie informácie, začnite.

Vytvorenie obrazovej mapy

Samotné obrázkové mapy určite nie sú ničím novým - prvky značkovania sú k dispozícii už dlhší čas a späť v deň, keď bol v skutočnosti považovaný za dobrý spôsob prezentácie navigačného systému - s klikateľnými časťami obrázka, ktoré sa spájajú s inými profily. Rovnaký základný kód obrázkovej mapy sa stále používa pre túto časť funkcie, preto ju musíme najskôr definovať.

Na vytvorenie obrazovej mapy môžete použiť rôzne nástroje - Adobe Fireworks alebo Photoshop - ale najjednoduchšie a bezplatné riešenie je online nástroj ako tento. Určite to nie je jediný online nástroj a ja ho zvlášť neschvaľujem, ale zdalo sa, že jeho použitie je dosť jednoduché - ak nájdete lepšiu, dajte nám vedieť v komentároch. Môžete definovať obdĺžnikové, kruhové alebo polygonálne tvary.

Začnite odovzdaním obrázka - v tomto prípade označím snímku obrazovky webovej stránky MakeUseOf. Možno bude potrebné oddialiť zobrazenie celého obrázka v nástroji.

Malo by byť celkom zrejmé, ako sa používa ako základný maliarsky program - nezabudnite iba že pri kreslení poly tvaru musíte SHIFT podržať v poslednom bode, aby ste ho uzavreli a skončiť. Tu som definoval 4 tvary.

Keď budete pripravení, prejdite nadol a skopírujte uvedený kód.

Vytvorte základný nový dokument HTML a kód trochu vyčistite pridaním značky obrázka, aby ukazovala na pôvodný obrázok. Najjednoduchší spôsob, ako to otestovať, je použitie JSFiddle. tady moja vzorka, v pôvodnom stave (konečná sada kódu je uvedená neskôr, nebojte sa).

Nezabudnite dať obrázok a USEMAP atribút, ukazujúci na ID mapy, ktorá obsahuje súradnice (USEMAP = "# MyMap", napríklad).

Pridávanie v qTip

Ak ste vložili svoj kód do JSFiddle, na bočnom paneli sa zobrazí možnosť zahrnúť jQuery. Nezabudnite to povoliť. Môžeme tu tiež pridať ďalšie externé zdroje, takže pokračujte a pridajte adresy URL pre CSS a JS uvedené na stránke sťahovania qTip. Skopírujte a prilepte odkazy „všetky funkcie a štýly“ do JSFiddle - aj keď v praxi by ste na vytvorenie vlastnej sady funkcií alebo štýlov použili nižšie uvedený konfiguračný nástroj.

Kompletná implementačná príručka pre qTip môže byť nájdete tu, ale umožňuje pokračovať a vytvoriť niekoľko jednoduchých textových popisov. Nasledujúci Javascript bude zacieľovať na všetky elementy oblasti (položky, ktoré definujú časti našej obrazovej mapy) pri načítaní stránky a povie qTip, aby na nich pracoval s obsahom všetkého, čo je v atribúte alt.

$ (document) .ready (function () { $ ("area"). every (function (index, element) { var link = $ (this); $ (Link) .qtip ({ content: link.attr ("alt") }); }); });

Predvolený dizajn je dosť škaredý - môžete si pozrieť jeho ukážku tu - ale to je v poriadku, použijeme na vyskakovacie okná taký vlastný dizajn (Vynechal som časť kódu, ktorý zobrazuje iba časť špecifickú pre qTip).

$ (Link) .qtip ({ content: link.attr ("alt"), štýl: { triedy: 'qtip-bootstrap qtip-shadow' } });

Zahrnul som aj BootStrap CSS súbor ako externý súbor, aby ste zoradili škaredé štandardné písma prehliadača. Viem to veľmi prehnane. Stále: oveľa lepšie!

Jedna vec, ktorú si teraz všimnem, je, že predvolená pozícia vpravo dole nie je v ideálnom prípade. Ak to chcete upraviť, použite nastavenie polohy:

$ (Link) .qtip ({ content: link.attr ("alt"), štýl: { triedy: 'qtip-bootstrap qtip-shadow' }, pozícia: { target: 'mouse', upraviť: { mouse: true // Môže sa vynechať (napr. predvolené správanie) } } }); });

Teraz umiestnite kurzor myši na akýkoľvek prvok a popis bude nasledovať vašu myš. Môžeš tu si môžete pozrieť hotové demo.

Môžete tiež urobiť vyskakovacie okno modálne (takže všetko ostatné je stmavené a musíte kliknúť vonku, aby ste sa k nemu vrátili), alebo dokonca načítať nejaký obsah prostredníctvom žiadosti AJAX. Myslím, že je to celkom pekný malý doplnok, ktorý vdýchne nový život do pomerne nevyužitého štandardu HTML - Pozrime sa, čo môžete prísť, a ak ste s tým niečo urobili, dajte nám vedieť v komentároch ono.