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.
Jquery image map
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
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
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)
Ž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.
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
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)
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.
Slični sadržaj:
- Simple drop down multilevel horisontal menu (Jako slično)
- Kada Highslide.js ne radi ispravno u IE7 (Jako slično)
- 18 jQuery skripti i tutoriala (Jako slično)
- Najbolje od JavaScript-a u 2008. godini (Slično)
- 10 kreativnih i bogatih UI i kako ih napraviti (Slično)
5 komentara
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.
moglo se i css-om ovo rijesit… jednostavnije 😀
a mogao si i napisati kako… kad si već tu 🙂
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”); });
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>
eto, sad imamo dvije verzije, ako netko ima treću neka javi 🙂