Krenulo je na jedan način… izašla mi je na Skype klijentu pop-up reklama za novu uslugu land-line (pozivanje “fiksnog”) telefoniranja po flat-rate tarifi. Odem tamo, i naravno na listi zemalja koje ulaze “Unlimited World countries” nema Srbije. Odnosno po flat-rate tarifi ne možete Skypeom zvati “fiksni” u Srbiji.

Rekoh krenulo je na jedan način, a onda sam se (tipično web developerski) uhvatio za to kako su na Skypeu iscrtali onoliko nacionalnih zastavica na toj stranci. Pogledam… lepo… jedan HTTP request – jedna slika (~27kb) za sve zastavice… i onda sada već klasičan css hak, sa pomeranjem pozadine (background-position).

U markapu, takođe lepo… element ima dve klase tipa

class=”flag rs”

Jedino što treba da zaboravite na dvoslovna imena klasa, pošto su skoro sve kombinacije na ovaj način iskorištene…

… međutim onda pogledam u css:

.flag.AD { background-position:-16px -44px; }
.flag.AE { background-position:-16px -55px; }
.flag.AF { background-position:-16px -66px; }
…

… i tako 11kb css – nije puno, ali treba ovo pisati(!)

Ovim je nešto “ubrljana” inače odlična ideja da se napravi ta matrica sa zastavicama, gde u vertikali i horizontali imate slova od A-Z, te da je svaka zastavica na “koordinati” svoje dvoslovne međunarodne oznake. Na primer za Srbiju – u koloni R i redu S – RS.

Relativno malim “parčetom” JavaScript kôda moguće je postići isti efekat (kao na Skype) ali tako što će JavaScript na osnovu imena klase npr. “flag_rs” izvući ta slova “r” i “s”, očitati njihov ASCII kôd (sa charCodeAt), pošto je kod slova malo “a” – 97, oduzimamo 96 te množenjem sa visinom (11 px) i širinom (16) zastavice dobija se tačna pozicija za “background-position”. Razlika između 96 i 97 je zbog toga što na slici (nepotrebno) postoji taj redi i kolona sa slovima – te je ta razlika 1 x 11px potrebna.

Pogledajte primer koji radi sa Jquery bibliotekom, ili drugi koji radi bez posebne biblioteke (sirovi, ali unobtrusive JavaScript). Oba primera možete pokupiti i u zip datoteci.

Za kraj “geekovski” vic:

Baka: Dajte mi 200g praške šunke.
Mesar: Da vam narežem?
Baka: Ma ne, baci mi na flash!