Vytvořte interaktivní štítky s obrázky pomocí qTip (jQuery Plugin)

reklama

Obrázky mohou být docela neživé a nudné - pokud nejsou interaktivní a úžasné, to je. A qTip to usnadňuje pomocí síly jQuery. Čtěte dále a zjistěte, jak můžete přidat interaktivní štítky, které se objeví, když uživatel umístí kurzor myši na části obrázku.

Proč to chcete udělat? Osobně používám techniku ​​na novém webu eCommerce - aby uživatel mohl umístit kurzor nad prvky scéna (jako katalog Ikea), s názvem produktu a tlačítkem Přidat do košíku dynamicky. Mohlo by se také použít k dobrému ovlivnění něčeho, jako je kampus nebo mapa města, kde je spousta podivně tvarovaných prvků, které by mohly opravdu dělat s popisem, aniž by došlo k přeplnění mapy. Velmi jednoduchým příkladem by byly také Facebookové značky, kde vám vznášení nad osobním obličejem řekne, kdo jsou. Jeho použití je omezeno pouze vaší fantazií.

Poznámka: Předpokládám velmi základní znalosti jQuery a HTML zde - alespoň se ujistěte, že jste si přečetli o selektory Výukový program jQuery - Začínáme: Základy a výběrMinulý týden jsem mluvil o tom, jak důležité je jQuery pro každého moderního webového vývojáře a proč je to úžasné. Tento týden si myslím, že je čas, abychom si zašpinili ruce nějakým kódem a zjistili, jak ...

Přečtěte si více , metody Úvod do jQuery (část 2): Metody a funkceToto je část úvodního úvodu do programovací série webů jQuery. Část 1 se zabývala základy jQuery o tom, jak ji zahrnout do vašeho projektu, a selektory. V části 2 budeme pokračovat ... Přečtěte si více , a anonymní funkce Úvod do jQuery (část 3): Čekání na načtení stránky a anonymní funkcejQuery je patrně nezbytnou dovedností moderního webového vývojáře a v této krátké mini-sérii doufám, že vám poskytnu znalosti, které vám umožní začít je používat ve vašich vlastních webových projektech. V... Přečtěte si více .

qTip

qTip je komplexní plugin pro popis a označování pro jQuery, s různými styly. Budeme ji používat konkrétně s funkcí obrazové mapy, ale to rozhodně není vše, co dokáže. Podívejte se na stránka pluginu dozvědět se více nebo začít číst dál.

Vytvoření obrazové mapy

Samotné obrazové mapy rozhodně nepředstavují novou věc - prvky značení jsou k dispozici po dlouhou dobu a zpět v den, kdy byl ve skutečnosti považován za dobrý způsob prezentace navigačního systému - s klikatelnými částmi obrazu, které odkazují na jiné sekce. Stejný základní kód obrazové mapy se stále používá pro tuto část funkce, takže ji musíme nejprve definovat.

K vytvoření obrazové mapy můžete použít celou řadu nástrojů - Adobe Fireworks nebo Photoshop - ale nejjednodušším a bezplatným řešením je online nástroj jako tento. Určitě to není jediný online nástroj a já ho zvlášť nepodporuji, ale zdálo se, že jeho použití je dost jednoduché - dejte nám vědět v komentářích, pokud najdete lepší. Můžete definovat obdélníkové, kruhové nebo dokonce polygonální tvary.

Začněte nahráním obrázku - v tomto případě označím screenshot obrazovky webu MakeUseOf. Možná budete muset zmenšit zobrazení celého obrázku v nástroji.

Mělo by být docela zřejmé, jak se používá jako základní malířský program - jediné, co si pamatujete, je že když kreslíte poly tvar, musíte podržet SHIFT na posledním bodě, aby se uzavřel a Dokončit. Zde jsem definoval 4 tvary.

Až budete připraveni, přejděte dolů a zkopírujte uvedený kód.

Vytvořte základní nový dokument HTML a trochu vyčistěte kód. Přidáním značky obrázku přejděte na původní obrázek. Nejjednodušší způsob, jak to provést, je použít JSFiddle. Tady je můj vzorek, v původním stavu (konečná sada kódu je uvedena později, nebojte se).

Nezapomeňte dát obrázek usemap atribut, ukazující na #id mapy obsahující souřadnice (usemap = ”# mymap”, například).

Přidávání v qTip

Pokud jste vložili svůj kód do JSFiddle, uvidíte na postranním panelu možnost přidat jQuery. Nezapomeňte to povolit. Můžeme zde také přidat další externí zdroje, takže pokračujte a přidejte adresy URL pro CSS a JS uvedené na stránce ke stažení qTip. Zkopírujte a vložte odkazy „všechny funkce a styly“ do JSFiddle - i když v praxi byste pomocí níže uvedeného konfiguračního nástroje vytvořili vlastní sadu funkcí nebo stylů.

Kompletní implementační příručka pro qTip může být najdete zde, ale umožňuje pokračovat a vytvořit několik jednoduchých textových popisů. Následující Javascript zacílí na všechny elementy oblasti (položky, které definují části naší obrazové mapy) při načítání stránky, a řekne qTip, aby na nich pracoval s obsahem všeho, co je v atributu alt.

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

Výchozí design je celkem ošklivý - můžete si prohlédnout jeho ukázku tady - ale to je v pořádku, použijeme na vyskakovací okna vlastní design (Vynechal jsem část kódu a zobrazoval jsem pouze konkrétní sekci qTip).

$ (link) .qtip ({ content: link.attr ("alt"), styl: { třídy: 'qtip-bootstrap qtip-shadow' } });

Také jsem zahrnul BootStrap CSS soubor jako externí soubor, k vyřešení ošklivých standardních písem prohlížeče. Vím, že je to velmi nadměrné. Stále: mnohem lepší!

Jedna věc, kterou si nyní všimnu, je, že výchozí pozice pravého dolního rohu není opravdu ideální. Chcete-li to upravit, použijeme nastavení polohy:

$ (link) .qtip ({ content: link.attr ("alt"), styl: { třídy: 'qtip-bootstrap qtip-shadow' }, pozice: { target: 'mouse', úprava: { mouse: true // Lze vynechat (např. výchozí chování) } } }); });

Nyní umístěte kurzor na libovolný prvek a popisek bude následovat vaši myš. Můžeš zde si můžete prohlédnout hotové demo.

Můžete také provést vyskakovací okno (takže vše ostatní je ztlumeno a pro návrat k němu musíte kliknout venku), nebo dokonce načíst nějaký obsah prostřednictvím požadavku AJAX. Myslím, že je to docela pěkný malý plugin, který vdechuje nový život do docela nepoužitého standardu HTML - Pojďme se podívat, co můžete přijít, a dejte nám prosím vědět v komentářích, pokud jste něco udělali to.