 |
||
 |
 |
 |
  |
||
Nu arata prea grozav, nu? Plus ca mi-a luat mai mult de o ora sa construiesc tot
exemplul asta. :-( De asemenea, e clar ca nu voi putea folosi o portiune prea complicata
a unei imagini ca hyperlink. In trecut, cei care doreau neaparat sa realizeze astfel
de lucruri, daca nu stiau programare, erau morti. Lucrurile se intamplau in felul
urmator. Vizitatorul dadea un click pe o portiune a imaginii. Informatia era transmisa
la server. Pe server rula un mic programas care analiza unde a fost pozitionat mouse-ul
in imagine si in functie de asta stabilea ce pagina sa trimita drept raspuns. Acum
toata treaba o face browserul. Cum il invatam pe dl. browser sa se orienteze? Ca pe
om.
Asociem imaginii o harta. Harta spune lucruri de felul: imaginea contine
urmatoarele suprafete speciale; cand s-a dat click pe cutare suprafata, incarca pagina
cutare s.a.m.d. Ce forme pot avea suprafetele? Pot fi dreptunghiuri, cercuri sau poligoane.
Cum le definim? Dam coordonatele unor puncte. Pentru un dreptunghi, de pilda, dam
coordonatele coltului din stanga sus si pe cele ale coltului din dreapta jos. Pentru
un cerc, dam coordonatele centrului si lungimea razei. Pentru un poligon dam, pe rand,
coordonatele fiecarui colt, in ordinea in care trebuie sa apara acestea atunci cand
poligonul e desenat in sensul acelor de ceas. Ok, fac un desen:
Cum se stabilesc coordonatele? Folosind un sistem de coordonate. Acum trebuie
sa mai scriu ceva pentru ca desenul urmator sa vina mai jos decat desenul cu poligonul.
Bla-bla-blaaaaaaaa... Ce mai faceti? Si eu la fel, mersi. De ce sa te chinui sa scrii
un tutorial de HTML cand exista atatea pe Internet? Habar n-am. Nu am vazut nici unul
in limba romana, dar asta nu e important. Poate cineva o sa invete ceva de aici, dand
peste acest tutorial din intamplare, inainte sa dea peste altul. Ce conteaza?
Faptul ca lucrez la asta, in orice caz, imi foloseste si mie. Asa se intampla mereu,
cand explici ceva altcuiva, intelegi si tu mai bine :-) De ce povestea asta nu costa
nici un ban? Fiindca nici eu nu am cheltuit nimic ca sa invat toate lucrurile astea.
Gata, am revenit la sistemul de coordonate. Exista mai multe feluri in care pot fi
date coordonatele unui punct intr-un plan. E sistemul cu cele doua axe, x
si y, pe care l-am invatat cu totii la scoala (cred ca se vorbea despre
coordonate carteziene). Mai este, de pilda un alt sistem. Tot doua valori, doar
ca prima specifica unghiul sub care se duce un linie din centrul sistemului de
coordonate catre punctul cu pricina (in grade, radiani, nasturi, kilograme de sfecla
etc.) iar a doua specifica distanta la care se afla punctul de centrul sistemului, pe
linia respectiva (think, daca in loc de un plan am suprafata unei sfere si in loc
de o linie dreapta am o linie curbata care traseaza un diametru al sferei, pot sa
folosesc acest sistem pentru a preciza pozitia unui punct pe suprafata unei sfere,
fara sa folosesc trei valori (gen x, y, z) ca la geometria in spatiu;
de altfel, asa si fac pentru a preciza pozitia geografica a unui loc de pe pamant). Ok,
coordonatele se dau, in HTML, dupa sistemul obisnuit. Doar ca centrul sistemului de
coordonate nu apare, cum aparea de obicei in desenele de la scoala, in stanga jos,
ci apare in dreapta sus. Acum pun desenul:
"0" este la coltul din stanga sus al imaginii. x=0, y=0. Pe masura ce iau un punct
mai la dreapta, am o valoare mai mare pentru x. Pe masura ce merg in jos am
o valoare mai mare pentru y. Sa vedem acum si niste etichete. Ca si la frames,
liste, tabele s.a.m.d. am etichete incapsulate unele in altele. Mai intai o eticheta
dubla in care cuprind harta: <MAP> </MAP>. Trebuie sa specific in
interiorul ei atributul NAME. Totul e la fel ca la ancora tinta. Dau un nume hartii,
iar in eticheta imaginii voi pune un atribut suplimentar, USEMAP, a carui valoare
(#numele_pe_care_l-am_dat) imi spune ce harta sa asociez imaginii respective. Ceva de
felul acesta:
Exercitiu:
Construiti, pentru imaginea de mai sus, o harta care sa contina o singura suprafata clickabila - un patrat cu latura de 20 de pixeli aflat chiar in centrul imaginii.
Pentru un cerc, coordonatele se dau astfel: x pt. centrul cercului, y pentru centrul cercului, lungimea razei. Eticheta unui cerc care ocupa cam un sfert din imagine (partea din stanga sus) va arata asa:
Construiti, tot pentru imaginea de mai sus, o harta care sa contina eticheta pentru un cerc cu raza de 20 de pixeli aflat in centrul imaginii.
Urmeaza partea mai complicata - poligonul. Tineti minte desenul nu? Bun. Coordonatele merg asa: x pt. primul punct, y pt. primul punct, x pt. al doilea punct, y pentru al doilea punct, etc. (in desen mergeam pana la punctul 6). Pentru exemplificare, sa definim un triunghi echilateral cu baza lipita de partea de jos a imaginii, mare cat jumatatea din latimea acesteia (incepand din coltul din stanga):
Exercitiu (simplu):
Definiti patratul de la primul exercitiu cu eticheta pentru poligon.
Intrebare ajutatoare: cite valori trebuie sa aiba, in acest caz, atributul COORDS?
Acum sa combinam tot ce am facut intr-o singura harta. Pastram cercul, triunghiul si dreptunghiul din jumatatea dreapta. Codul este:
Pana acum am evitat suprapunerile suprafetelor. Ce se intampla insa atunci cand am asa ceva? Regula este: prima suprafata definita in cod este cea activa pe portiunea suprapunerii. Asta iti poate da idei. In loc sa definesti un poligon foaaaaaaaaaaaaaaaaaaaaarte complicat pentru a crea o suprafata de forma unui inel ai putea defini doua cercuri cu acelasi centru si raze de lungimi diferite, scriind mai intai codul pentru cercul mare si apoi codul pentru cercul mic. Mai ramane un lucru. Suprafata cercului mai mic nu trebuie sa fie clickabila. Iar pentru asta poate fi folosit un atribut special. Tineti minte atributul NORESIZE de la frame-uri? Nu era nevoie sa primeasca nici un fel de valoare. Pentru ca o suprafata sa nu poata fi folosita ca hyperlegatura, desi a fost definita, in loc de atributul HREF cu valoarea de rigoare folosim atributul NOHREF. Totul arata cam asa:
Folositi imaginea de mai sus (imaginea poate fi salvata cu click-dreapta: Save Image As...), codul pentru inel, cel pentru triunghi si cel pentru dreptunghi pentru a crea o harta, respectiv o pagina noua. Daca doriti sa folositi si ceea ce ati invatat in lectia anterioara, puneti pagina cu harta si imaginea intr-un frame si modificati link-urile definite in harta pentru a incarca pagini intr-un alt frame.
Daca vreti sa va lamuriti mai bine cu privire la suprapunerea suprafetelor, uitati-va la acest exemplu.
Hei! Uitati-va la cod, nu la cum se vede pagina! :-)
In plus, va puteti uita si la codul exemplului de la inceput (aici) pentru a afla cateva lamuriri suplimentare.
Ma cam apropii de sfarsit. Sa nu uit sa va spun asta: in caz ca vi se pare destul de complicat sa definiti suprafete clickabile prin intermediul coordonatelor &cetera, e bine sa stiti ca existe editoare grafice care pot genera harti pentru imagini (unul dintre ele este Gimp -> fuga la motoarele de cautare de pe Internet si o sa aflati unde il gasiti). Un avantaj suplimentar al hartilor este ca aceeasi harta poate fi asociata mai multor imagini. La ce se poate folosi asta? O sa va ganditi singuri, in timp ce eu incep sa lucrez la urmatoarea lectie.
Cuprins Lectia anterioara Lectia urmatoare