Volite web dizajn?

Zašto ne podijelite svoje znanje s cijelim svijetom? Svatko može pisati za Kroativ i na taj način se promovirati.

Pomoć potrebitima

http://www.hck.hr

Hrvatski Crveni križ

u službi humanosti od 1878.

Jquery image map

Autor/ica Weberica

Završila fotografiju na ŠPU, a nakon toga grafički i web dizajn. Rođena, živi i radi u epicentru Zagreba. Stalni član Kroativ mreže i autor mnogih korisnih članaka, radi kao stalni suradnik Web Inkubator studija.

Oglas

Image map je naziv za jedan zgodan efekt na web stranici pomoću kojeg dijelovi jedne slike služe kao linkovi. Na prijelaz mišem pojavljuje se oblačić sa opisom linka (tooltip). Korisnici facebooka znaju za taj efekt jer prilikom umetanja slike imaju opciju umetanja “tag-a” na dijelu slike koje sami odrede.

Danas ćemo naučiti kako napraviti Image map pomoću Jquery-a. DEMO

Za primjer smo uzeli sliku koju sam nedavno snimila i ubaciti ćemo link sa tooltip-om na ptičicu i na mačku. (slika 1)

slika 1

slika 1

Određivanje koordinata slike

Da bismo odredili koje područje slike oko ptičice će biti područje linka, moramo sliku otvoriti u photoshopu i odrediti koordinate. Također, to područje može biti četvrtastog (rectangle) oblika ili okruglog (circle).

Koordinate možemo odrediti u photoshopu na dva načina:  prvi je da uključimo view / show /grid i pogledamo koliko pixela iznose udaljenosti koje nas zanimaju. Drugi način je da idemo na Analysis / set measurment scale / custom – i onda mišem, odnosno kursorom povlačimo od ruba slike do točaka koje nam trebaju kao koordinate. (slika 2)

slika 2

slika 2

Ako želimo četvrtasto područje moramo odrediti koordinate gornjeg lijevog i donjeg desnog ugla. Iznos duljina 1, 2, 3 i 4 u pixelima zapišemo točno tim redom, a zatim isto ponovimo i za područje oko mace. Pritom pazimo da nam se ta dva područja ne preklapaju. (slika 3)

slika 3

slika 3

Želimo li označiti okruglo područje trebamo odrediti koordinate centra kruga i radius te zabilježiti 3 duljine, redom od 1 do 3 (slika 4), a onda sve to ponovimo i za macu.

slika 4

slika 4

Određivanje koordinata Tooltip-a

Tooltip će se pojavljivati u donjem desnom uglu područja. U ovom slučaju, treba se pojaviti na mjestu koje će biti ispod ptičice (da je ne prekrije) ali  kada se dođe na macu ne smije izlaziti izvan slike. Riješenje je da za ptičicu odredimo područje koje će biti barem 20 px ispod i desno od ptičice a koordinatama za tooltip damo predznak “-” odnosno minus. Na taj način tooltip će se pojaviti unutar područja (slika5)

slika 5

slika 5

Javascript

Da bi mapa radila ubaciti ćemo dvije .js skripte. Ako želimo promjeniti mjesto gdje se pojavljuje tooltip oblačić , otvoriti ćemo skriptu “jquery.qtip-1.0.0-rc3.js” i izmjeniti koordinate koje se nalaze između 493 i 504 linije koda.  Te koordinate označavaju udaljenosti između donjeg desnog ugla tooltipa i donjeg desnog ugla označenog područja. Ako je predznak “minus” tada se tooltip pojavljuje unutar područja, u suprotnom će se pojaviti izvana. (slika 6)

slika 5

slika 6

HTML

Sada je vrijeme da otvorimo svoj HTML i u njega upišemo:

<img src=”maca-ptica.jpg” alt=”maca i ptica” usemap=”#ime-mape” />
<map name=”ime-mape”>
<!–koordinate za četverokut–>
<area shape=”rect” href=”http://www.weberica.net/” coords=”155,30,265,170″ alt=”lovina” /></a>
<area shape=”rect” href=”http://www.weberica.net/” coords=”220,150,500,350″ alt=”lovac” /></a>
<!–ili koordinate za krug –>
<area shape=”circle” href=”#” coords=”180,70,70″ alt=”lovina” /></a>
</map>

U tooltip će se pojaviti tekst koji se nalazi u “alt” slike.

Ako imamo više slika i mapa na stranici tada svaka mapa mora imati drugo ime (map name).

Ako ne želimo da označena područja linkaju tada ćemo iz koda izbaciti ovaj dio:  “href=”http://www.weberica.net/” ></a>” ali ćemo ostaviti koordinate i “alt” tag.

Sada još samo preostaje u HTML-u pozvati obje javascripte i naša mapa će raditi.

DEMO: http://www.weberica.net/demo/imagemap/index.html

DOWNLOAD FILES: http://www.weberica.net/download.html

Skripte preuzete sa craigsworks.com , isprobane i dorađene za ovaj tutorial.

Označeno s: , , , , ,
Za ovaj članak možete glasati na CroPortalu i tako pomoći u njegovoj promociji. Ako članak još nije objavljen vi možete biti prvi!
Stavovi i mišljenja izrečena u ovome članku i/ili komentarima odnose se samo na autora/icu članka i/ili komentara, a ne i cijele Kroativ mreže. Zabranjeno je neovlašteno prenošenje članaka u cjelosti bez prethodnog dogovora ili bez istaknutog povratnog linka na www.kroativ.net stranicu te imena autora.
Oglas

5 komentara

  • faax kaže:

    moglo se i css-om ovo rijesit… jednostavnije 😀

  • weberica kaže:

    a mogao si i napisati kako… kad si već tu 🙂

    • faax kaže:

      ev na brzaka neka varijanta, s tim da se to moze ushminkat al ja nisam imao vremena 🙂

      HTML:

      Lovina
      Lovac

      CSS:
      .mapa { width: 500px; height: 333px; position: relative; }
      .mapa a { display: block; padding: 5px 10px; position: absolute; z-index: 999; background-color: #000; }
      .mapa span { display: none; }
      .mapa :hover span { display: block; }
      a.lovac { top: 32px; left: 132px; }
      a.lovina { top: 192px; left: 293px; }

      Uz jQuery (zadnja verzija):
      $(“.mapa a”).mouseenter( function () {
      $(this).fadeIn(“slow”); });
      $(“.mapa a”).mouseleave( function () {
      $(this).fadeOut(“slow”); });

  • faax kaže:

    HTML (posto se gore ne vidi):

    <div class="mapa"> <img src="maca-ptica.jpg" width="500" height="333" alt="" /> <a href="#" class="lovina"><span>Lovina</span></a> <a href="#" class="lovac"><span>Lovac</span></a> </div>

  • weberica kaže:

    eto, sad imamo dvije verzije, ako netko ima treću neka javi 🙂

Trackbacks & Pingbacks

Ostavite komentar

Autori s više od 10 komentara nemaju tag nofollow na svojim linkovima! Zabranjeno je vrijeđanje, omalovažavanje ili na bilo koji drugi način ometanje normalnog toka komentara. Također je zabranjeno oglašavanje u komentarima i sve druge vrste spam-a.

(*) polja su obavezna

XHTML: Možete koristiti: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">