Tee interaktiivisia kuvamerkkejä qTip-ohjelmalla (jQuery Plugin)

Mainos

Kuvat voivat olla aika elottomia ja tylsää - elleivät ne ole vuorovaikutteisia ja mahtavia, eli. Ja qTip tekee tämän helpoksi jQueryn avulla. Lue lisätietoja siitä, kuinka voit lisätä vuorovaikutteisia tarroja, jotka näkyvät, kun käyttäjä siirtyy hiirellä kuvan osiin.

Miksi haluat tehdä tämän? Henkilökohtaisesti käytän tekniikkaa uudessa verkkokauppasivustossa - joten käyttäjä voi siirtää hiiren osoittimen kohteisiin kohtaus (kuten Ikea-luettelo), tuotteen otsikko ja lisää ostoskoriin -painike ilmestyvät dynaamisesti. Sitä voidaan käyttää myös vaikuttamaan kampuksen tai kaupunkikartan kaltaiseen, jossa on paljon omituisen muotoisia elementtejä, jotka todella voisivat tehdä kuvauksen kanssa pilaantumatta karttaa. Hyvin yksinkertainen esimerkki olisi myös Facebook-tunnisteet, joissa osoittamalla ihmisten kasvojen päälle kertovat kuka he ovat. Vain mielikuvitus rajoittaa sen käyttöä.

Huomaa: Oletan, että täällä on hyvin perustiedot jQuerystä ja HTML: stä - ainakin varmista, että olet lukenut

valitsimet jQuery-opas - Aloittaminen: Perusteet ja valitsimetViime viikolla puhuin siitä, kuinka tärkeä jQuery on kaikille nykyaikaisille web-kehittäjille ja miksi se on mahtava. Tällä viikolla mielestäni on aika saada kädet likaantumaan jollain koodilla ja oppia kuinka ... Lue lisää , menetelmät Johdanto jQueryyn (osa 2): Menetelmät ja toiminnotTämä on osa käynnissä olevaa aloittelijaa jQuery-web-ohjelmasarjoihin. Osa 1 kattoi jQuery-perusteet sen sisällyttämisestä projektiisi ja valitsimiin. Osassa 2 jatkamme ... Lue lisää ja anonyymit toiminnot Johdanto jQueryyn (osa 3): Sivun odottaminen ladattavaksi ja nimettömät toiminnotjQuery on kiistatta välttämätön taito nykyaikaiselle web-kehittäjälle, ja toivon antavan sinulle tämän lyhyen minisarjan avulla tiedon käytön aloittamiseen omissa verkkoprojekteissasi. Sisään... Lue lisää .

QVihje

qTip on kattava työkaluvihje ja etikettilaajennus jQuerylle, monilla tyyleillä. Käytämme sitä erityisesti kuvakarttatoiminnoissa, mutta se ei todellakaan ole kaikki, mitä se voi tehdä. Katsokaa laajennussivu oppia lisää tai lukea jatkaaksesi aloittamista varten.

Kuvakartan luominen

Itse kuvakartat eivät todellakaan ole uusi asia - merkintäelementit ovat olleet käytettävissä jo pitkään ja ne ovat takaisin päivän aikana. todella pidettiin hyvänä tavana navigointijärjestelmän esittämisessä - napsautettavissa olevat kuvan osat linkittävät erilaisiin kohdat. Samaa peruskuvakarttakoodia käytetään edelleen siihen osaan toiminnallisuudesta, joten meidän on ensin määriteltävä se.

Voit luoda erilaisia ​​kuvia - Adobe Fireworks tai Photoshop - työkaluilla, mutta helpoin ja ilmainen ratkaisu on online-työkalu niinkuin tämä. Se ei todellakaan ole ainoa verkkotyökalu, enkä tue sitä erityisesti, mutta se vaikutti riittävän yksinkertaiselta - ilmoita meille kommenteissa, jos löydät paremman. Voit määrittää suorakulmaisia, pyöreitä tai jopa monikulmaisia ​​muotoja.

Aloita lähettämällä kuva - tässä tapauksessa aion merkitä kuvakaappauksen MakeUseOf-verkkosivustosta. Saatat joutua pienentämään kuvaa nähdäksesi koko kuvan työkalussa.

Pitäisi olla melko selvää, kuinka sitä käytetään kuten perusmaalausohjelmaa - muista vain että piirrettäessä poly-muotoa, sinun on pidettävä näppäintä SHIFT viimeisessä pisteessä sulkeutuaksesi ja viedä loppuun. Tässä olen määritellyt 4 muotoa.

Kun olet valmis, vieritä alas ja kopioi annettu koodi.

Luo uusi HTML-perusdokumentti ja puhdista koodi hiukan lisäämällä kuvan tunniste alkuperäisen kuvan osoittamiseksi. Helpoin tapa testata tämä on käyttämällä JSFiddle. tässä minun näyte, sen alkuperäisessä tilassa (lopullinen koodi asetetaan myöhemmin, älä huoli).

Muista antaa kuva a usemap attribuutti, osoittaen #tunnus kartasta, joka sisältää koordinaatit (usemap =”# mymap”, esimerkiksi).

Lisääminen qTipiin

Jos olet liittänyt koodisi JSFiddle-sovellukseen, näet, että sivupalkissa on vaihtoehto sisällyttää jQuery. Varmista, että otat sen käyttöön. Voimme lisätä tähän myös muita ulkoisia resursseja, joten jatka ja lisää qTip-lataussivulla luetellut CSS: n ja JS: n URL-osoitteet. Kopioi ja liitä “kaikki ominaisuudet ja tyylit” -linkit JSFiddleen - vaikka käytännössä käytätkin alla olevaa määritystyökalua rakentaaksesi mukautettuja ominaisuuksia tai tyylejä.

Täysi qTip-toteutusopas voi olla löytyi täältä, mutta päästään eteenpäin ja luodaan yksinkertaisia ​​tekstipohjaisia ​​työkaluvihjeitä. Seuraava Javascript kohdistaa kaikki alueelementit (kohteet, jotka määrittelevät kuvakarttamme osat) sivukuormituksella, käskeen qTipia työskentelemään niiden kanssa sisällöllä mitä tahansa Alt-määritteessä.

$ (asiakirja). jo (toiminto () { $ ("alue"). kukin (toiminto (hakemisto, elementti) { var link = $ (tämä); $ (Linkki) .qtip ({ sisältö: link.attr ("alt") }); }); });

Oletusmuoto on melko ruma - voit katsella siitä esittelyn tässä - mutta se on ok, käytämme räätälöityä suunnittelua tällaisiin ponnahdusikkunoihin (Olen poistanut osan koodista, näyttäen vain qTip-erityisen osan).

$ (Linkki) .qtip ({ sisältö: link.attr ("alt"), tyyli: { luokat: 'qtip-bootstrap qtip-shadow' } });

Olen mukana myös BootStrap CSS tiedosto ulkoisena tiedostona rumajen vakioselaimen kirjasinten selvittämiseksi. Tiedän, että tämä on erittäin ylenmääräistä. Silti: paljon parempi!

Yksi asia, jonka huomaan nyt, on, että oikeassa alakulmassa oleva oletusasetus ei ole oikeastaan ​​ihanteellinen. Säädä tämä käyttämällä sijaintiasemaa:

$ (Linkki) .qtip ({ sisältö: link.attr ("alt"), tyyli: { luokat: 'qtip-bootstrap qtip-shadow' }, sijainti: { tavoite: 'hiiri', säädä: { hiiri: totta // voidaan jättää pois (esim. oletuskäyttäytyminen) } } }); });

Vie hiiri minkä tahansa elementin päälle, ja työkaluvihje noudattaa hiirtäsi. Sinä pystyt katso valmis demon täältä.

Voit myös tehdä ponnahdusmuodon (joten kaikki muu on himmennetty, ja sinun täytyy napsauttaa ulkopuolta palataksesi siihen) tai jopa ladata sisältöä AJAX-pyynnön avulla. Minusta se on melko siisti pieni plugin, joka hengittää uutta elämää melko käyttämättömään HTML-standardiin - katsotaan mitä voit keksiä, ja ilmoita meille kommenteissa, jos olet tehnyt jotain se.