Imagini senzitive
Imaginile senzitive permit specificarea unor regiuni ale unei imagini (sau obiect, mai general) carora sa li se asocieze o actiune specifica (de exemplu īncarcarea unei resurse, lansarea unui program, etc). Cīnd regiunea este activata de utilizator se executa actiunea respectiva. O imagine senzitiva este creata prin asocierea unui obiect cu o specificatie a zonelor suprafetei obiectului respectiv. Exista doua tipuri de imagini senzitive:
Client-side. Cīnd utilizatorul activeaza o regiune a unei imagini senzitive de acest tip cu mouse-ul coordonatele punctului respectiv (īn pixeli) sīnt interpretate de catre agentul utilizatorului (browserul acestuia). Navigatorul selecteaza o legatura ce a fost specificata pentru regiunea activata si o urmeaza.
Server-side. Cīnd utilizatorul activeaza o regiune a unei imagini senzitive de acest tip cu mouse-ul coordonatele punctului respectiv (īn pixeli) sīnt trimise agentului serverului (programului de pe server) si care e specificat de atributul HREF al elementului A. Programul de pe server este cel care interpreteaza aceste coordonate si realizeaza o anumita actiune.
De obicei sīnt preferate imaginile senzitive client īn fata celor de tip server-side din doua motive: sīnt accesibile si celor ce folosesc browsere fara facilitati grafice si ofera un feed-back imediat, indiferent daca 929i82j se pointeaza īntr-o zona activa sau nu.
1. Imagini senzitive client-side
Acest tip de imagini senzitive realizeaza senzitivitatea imaginii prin legaturi īn textul care īnsoteste figura si care desemneaza zonele active din figura. Aceasta metoda nu numai ca este mult mai rapida decīt cea care implica programe care ruleaza pe server, dar permite si ceva ce varianta cu imagini senzitive de tip sever-side nu putea realiza: utilizarea figurilor senzitive si īn navigatoarele care lucreaza īn mod text deoarece textul care descrie figura este cel care defineste maparea figurii.
Imaginea senzitiva de tip client-side poate fi definita cu unul dintre elementele IMG, OBJECT sau INPUT. Cu aceasta se asociaza o harta de legaturi ce se defineste cu elementul MAP. Legatura dintre cele doua componenete se realizeaza prin intermediul atributului USEMAP al elementului cu care se defineste imaginea senzitiva.
Prezenta atributului USEMAP la definirea unui obiect (cu OBJECT) impune ca obiectul respectiv (ce este inclus) sa fie o imagine. Mai mult, cīnd acesta are o harta asociata cu el, browserele trebuie sa implementeze actiunea cu obiectul respectiv exclusiv īn termenii imaginii senzitive, putīnd fi chiar omisa īncarcarea sau procesarea continutului propriu-zis al acestuia (daca nu poate fi facuta de browserul respectiv). Fiecare element MAP poate contine cel putin unul dintre urmatoarele elemente:
Unul sau mai multe elemente AREA. Acestea nu au continut dar specifica regiunile geometrice ale hartii asociate cu imaginea si legaturile asociate cu fiecare regiune īn parte. De notat ca atunci cīnd aceasta metoda este folosita elementul MAP nu afiseaza nimic. Autorii trebuie sa ofere un text alternativ pentru fiecare portiune definita cu AREA, utilizīnd atributul ALT.
Continut de tip bloc (block-level). Acesta va include elemente A ce specifica regiunile geometrice ale hartii si legaturile asociate cu fiecare regiune īn parte. De notat ca atunci cīnd se foloseste aceasta metoda elementul MAP poate fi afisat de browser, rezultīnd o metoda de creare a unor documente mai accesibile decīt cea descrisa anterior.
Daca doua sau mai multe regiuni se suprapun, elementul definit īn regiunea ce apar mai devreme īn document este cel luat īn consideratie.
Sintaxa:
<MAP>...</MAP>
Atribute posibile:
NAME=CDATA (numele hartii)
atribute comune
Contine:
Unul sau mai multe elemente AREA, sau unul sau mai multe elemente de tip bloc
Continut īn:
elemente de tip inline, elemente de tip bloc (block-level)
Descriere:
Acest element defineste o imagine senzitiva de tip client-side pentru a fi utilizata cu un element IMG sau OBJECT. Atributul NAME este folosit ca ancora pentru atributul USEMAP al elementelor IMG sau OBJECT. Īn timp ce MAP poate defini imagini senzitive incluse īn alte fisiere, browserele suporta de obicei numai imagini care au definita harta de legaturi cu MAP doar īn acelasi fisier cu imaginea. Initial MAP a fost definit sa aiba asociat unul sau mai multe elemente AREA care sa specifice coordonatele unei regiuni active (clicabile).
HTML 4.0 extinde acest element astfel īncīt sa poata avea ca atribute unul sau mai multe elemente de tip bloc ca o alternativa la utilizarea elementelor de tip AREA. Combinate cu OBJECT acestea permit o alternativa cu continut mai bogat la imagini. Dar nu toate browserele suporta acestea varianta (cu OBJECT), astfel ca varianta cu IMG este mult mai sigura. Cīnd MAP se foloseste cu OBJECT, continutul acesteia nu este afisat de browser.
Sintaxa:
<AREA>
Atribute posibile:
SHAPE = [ rect | circle | poly | default ] (forma regiunii)
COORDS=Coords (coordonatele regiunii)
HREF=URI (resursa indicata de legatura)
TARGET=FrameTarget (frame-ul īn care se īncarca legatura)
NOHREF (regiune inactiva)
ALT=Text (text alternativ)
TABINDEX=Number (pozitia īn ordinea de parcurgere cu TAB-ul)
ONFOCUS=Script (regiunea a primit focusul)
ONBLUR=Script (regiunea a pierdut focusul)
atribute comune
Contine:
nimic
Continut īn:
elementul MAP
Descriere:
Acest element defineste o regiune īntr-o imagine senzitiva. Fiecare regiune este o bucata de imagine care are asociata a alta actiune cīnd se face clic cu mouse-ul pe ea.
Atributele SHAPE si COORDS specifica partea din imagine ce este inclusa īn acea regiune. Valoarea implicita este "rect" care defineste un dreptunghi folosind COORDS="left, top, right, bottom". Alte valori ale lzui SHAPE:
default, specifica toata imaginea;
circle, specifica o regiune circulara folosind COORDS="center-x, center-y, radius";
poly, specifica o regiune poligonala folosind COORDS="x1, y1, x2, y2, , xN, yN".
Valorile coordonatelor sīnt relative la coltul stīnga-sus si sīnt exprimate īn pixeli sau procente.
Atributul HREF specifica o legatura la o alta resursa (ca de exemplu un document HTML sau o imagine JPEG). TITLE poate fi folosit pentru a descrie pe scurt continutul legaturii si se foloseste ca "tool-tip". Atributul boolean NOHREF indica faptul ca regiunea respectiva nu are legatura asociata.
Atributul ALT ofera text alternativ pentru cazul īn care nu se īncarca imaginea. Se recomanda ca acesta sa descrie functia si nu regiunea.
Atributul TARGET este folosit cu frame-uri pentru a indica īn ce frame se īncarca resursa indicata de legatura. Daca numele indicat nu exista se va folosi o fereastra noua. Numele speciale de frame-uri īncep cu underscore (liniuta de subliniere):
_blank, indica fereastra noua
_self, indica frame-ul curent
_parent, indica frame-ul parinte al celui curent
_top, indica o fereastra noua, fara frame-uri
Atributul ACCESSKEY specifica un caracter unic UNICODE folosit ca tasta de activare (shortcut) pentru urmarirea legaturii. TABINDEX specifica un numar īntre 0 si 32767 care indica ordinea de parcurgere cu tasta TAB. O regiune cu TABINDEX=0 sau fara TABINDEX va fi vizitata dupa toate elementele cu o valoare pozitiva a acestui atribut. Cu cīt valoarea pozitiva este mai mica cu atīt regiunea va fi vizitata mai devreme. Īn caz de ambiguitate elementul ce apare mai īntīi īn document are prioritate.
AREA acdepta īn plus fata de evenimentele uzuale (core) acceptate de majoritatea elementelor si atribute folosite de scripturile client:
ONFOCUS, ce apare cīnd regiunea primeste focusul;
ONBLUR, ce apare cīnd regiunea pierde focusul.
Exemplu:
Acest exemplu defineste o harta numita "mymap" ale carei zone active (3) sīnt dreptunghiuri care indica spre trei adrese diferite, fiecare avīnd si alternative pentru cazul cīnd imaginea nu este īncarcata:
<MAP NAME=mymap>
<AREA HREF="/reference/" ALT="HTML
and CSS Reference" COORDS="5,5,95,195">
<AREA HREF="/design/" ALT="Design Guide" COORDS="105,5,195,195">
<AREA HREF="/tools/" ALT="Tools" COORDS="205,5,295,195">
</MAP>
Aceasta harta este folosita cu imaginea īncarcata din fisierul "sitemap.gif", de dimensiuni 300 pixeli x 200 pixeli, plasata īn documentul HTML cu tagul:
<IMG SRC="sitemap.gif" ALT="Site map" USEMAP="#mymap" WIDTH=300 HEIGHT=200>
Exemplu:
Acest exemplu foloseste doua imagini, de tipuri diferite, a doua fiind o alternativa a primeia īn cazul īn care aceasta nu este suportata. Ambele imagini partajeaza o harta comuna care este inclusa īn fiecare dintre elementele definite cu OBJECT. Elementul MAP contine si o lista de legaturi de meniu care sīnt afisate daca browserul nu īncarca imaginile:
<OBJECT DATA="sitemap.png" USEMAP="#map" TYPE="image/png" TITLE="Sitemap" WIDTH=300
HEIGHT=200>
<OBJECT DATA="sitemap.gif" USEMAP="#map" TYPE="image/gif" TITLE="Site map" WIDTH=300
HEIGHT=200>
<MAP NAME=map>
<UL>
<LI><A HREF="/reference/" COORDS="5,5,95,195"> HTML and CSS Reference
</A></LI>
<LI><A HREF="/design/" COORDS="105,5,195,195">
Design Guide </A></LI>
<LI><A HREF="/tools/index.html"
COORDS="205,5,295,195"> Tools </A></LI>
</UL>
</MAP>
</OBJECT>
</OBJECT>
Īn acest mod, maparea figurii (si transformarea ei īntr-o imagine senzitiva) se realizeaza īn urmatorii pasi:
a). Definirea legaturilor
Exemplu: Pentru o bara de butoane:
<UL>
<LI><A HREF=" Editorial.html">Editorial</A>
<LI><A HREF=" Index.html">Index</A>
<LI><A HREF=" Presa.html">Presa</A>
<LI><A HREF=" Oaspeti.html">Oaspeti</A>
</UL>
b). Adaugarea figurii:
<IMG SRC=logo.gif>
<UL>
<LI><A HREF="Editorial.html">Editorial</A>
<LI><A HREF="Index.html">Index</A>
<LI><A HREF="Presa.html">Presa</A>
<LI><A HREF="Oaspeti.html">Oaspeti</A>
</UL>
</IMG>
c). Adaugarea atributul SHAPE pentru a indica localizarea si forma zonelor active. Valorile lui sīnt cele cunoscute din meniurile grafice de selectie:
SHAPE="default" pentru selectia implicita
SHAPE="circle x,y,r" pentru a defini un cerc de raza r, cu centrul īn x,y.
SHAPE="rect x,y,l,h" pentru dreptunghi (x,y stīnga sus, l latime, h īnaltime)
SHAPE="polygon x1,y1,x2,y2..." pentru poligon determinat de punctele xi,yi
Exemplu:
<IMG SRC=logo.gif>
<UL>
<LI><A HREF="Editorial.html" SHAPE="rect 0,0,100,100"> Editorial</A>
<LI><A HREF="Index.html" SHAPE="rect 100,0,100,100"> Index</A>
<LI><A HREF="Presa.html" SHAPE="rect 200,0,100,100"> Presa</A>
<LI><A HREF="Oaspeti.html" SHAPE="rect 300,0,100,100"> Oaspeti</A>
</UL>
</IMG>
2. Imagini senzitive server-side
Daca harta imaginii senzitive este mult prea complicata (si, implicit, dificil de descris cu metoda anterioara) se poate lasa sarcina aceasta pe seama serverului. Imaginile senzitive de scest tip lucreaza cu ajutorul unui script CGI (un program rezident pe server). Cīnd navigatorul activeaza o legatura de pe o imagine senzitiva, apeleaza de fapt (indirect) un program special (dedicat acestei actiuni) din folderul (directorul) cgi-bin al serverului caruia īi trimite coordonatele (x,y) ale punctului īn care a fost activata imaginea (unde s-a facut clic cu mouse-ul).
Programul special pentru imaginile mapate cauta īntr-un fisier-harta unde sīnt stabilite corespondentele īntre diversele regiuni ale imaginii si resursele/documentele care sīnt apelate. Face apoi cīteva calcule pentru a vedea ce pagina sa īncarce si īncarca pagina.
Din cauza naturii grafice a imaginilor senzitive, ele pot fi "vazute" numai de navigatoarele grafice. De fapt daca se īncearca sa se vada o astfel de imagine senzitiva cu un navigator care lucreaza numai īn modul text (de pilda Lynx) nu se poate vedea nici macar ca o astfel de imagine exista. Prima grija deci, daca se utilizeaza o imagine senzitiva, este sa se creeze un text echivalent pentru utilizatorii care se conecteaza īn modul text.
Ca si īn cazul altor scripturi CGI, fiecare server are o alta metoda de implementare a maparii imaginilor, mai mult chiar, metodele pot diferi chiar pentru serverele de pe aceeasi platforma. De pilda, serverele de tip CERN si NCSA utilizeaza metode diferite pentru implementarea imaginilor senzitive. Totusi, toate serverele utilizeaza aceleasi elemente de baza:
Marcarea cu tag-uri HTML a imaginii (īn document) pentru a arata ca aceasta este o imagine senzitiva.
Scrierea unui fisier de mapare a imaginii, care va specifica legatura īntre diferite regiuni ale imaginii si URL-urile documentelor Web la care acestea fac referinta.
Un script CGI (program) īn directorul cgi-bin care le ajuta sa functioneze īmpreuna.
Procesul de realizare a unei imagini senzitive de tip server side, pentru diverse servere HTTP mai cunoscute si utilizate (CERN si NCSA) este descris īn continuare.
A. Tag-urile imaginii senzitive
Primul pas este alegerea unei imagini care satisface anumite criterii pentru a fi potrivita ca imagine senzitiva. Cele mai potrivite sīnt cele care contin arii vizuale distincte care pot fi selectate individual (de pilda, imagini care pot fi cu usurinta īmpartite īn poligoane). Fotografiile sīnt mai dificil de mapat deoarece elementele tind sa aiba o anumita continuitate (prin tonurile de culoare, de pilda) sau sīnt de forme complicate.
Marcarea imaginii īn documentul HTML se face de forma:
<a href="https://nume_server/cgi-bin/nume_script/cale/fisier_de_mapare_imagine.map">
<img src="nume_imagine_senzitiva.jpg" ISMAP alt="mesaj pentru text">
</a>
unde:
<a> si </a> sīnt etichetele nevide pentru ancora imagine
href = indica fisierul de mapare a zonelor de pe imagine cu diferite resurse
http = protocolul de aducere a fisierului
cgi-bin = directorul īn care sīnt rezidente script-urile
nume_script = numele script-ului care face legatura īntre fisierul imagine.map, care contine maparea imaginii si documentele HTML asociate legaturii (htimage pentru serverul CERN sau imagemap pentru serverul NCSA)
imagine.map = fisierul care contine maparea imaginii
ISMAP = tag-ul care declara ca imaginea este senzitiva
<img> = eticheta pentru imagine, cu atributul src cel care specifica fisierul imagine
Exemplu:
Imaginea pentru a fi prelucrata este logo.jpg. Marcarea ei īn documentul HTML s-a facut cu:
<a href="https://www.comp-craiova.ro/cgibin/htimage/maps/poza.map">
<img src="logo.jpg" ISMAP alt="CSD Site" border=0 height=160 width =500></a>
Tag-ul border a luat aici valoarea zero. Atributele height si width declara īnaltimea respectiv latimea imaginii pentru ca navigatorul sa rezerve loc pentru imagine si sa continue sa afiseze textul chiar daca imaginea nu este īnca adusa. Daca valorile specificate sīnt mai mici decīt dimensiunea imaginii, aceasta este scalata pentru spatiul rezervat.
B. Maparea imaginii
Procesul de mapare īnseamna alegerea regiunilor active si a fisierelor (sau documentelor HTML) apelate, gasirea coordonatelor regiunilor desemnate si scrierea fisierului de mapare (poza.map, īn cazul nostru). Forma fisierului de mapare depinde de scriptul CGI utilizat de server.
Pentru serverul CERN fisierul arata de forma:
default URL
circle (x,y) r URL
rectangle (x,y) (x,y) URL
polygon (xl,yl) (x2,y2) ... (xn,yn) URL
Pentru serverul NCSA fisierul va fi de forma:
default URL
circle URL x,y r
rectangle URL x,y x,y
polygon URL xl,yl x2,y2 ... xn,yn
point URL x,y
Semnificatia este:
pentru cerc: coordonatele centrului si raza (m pixeli)
pentru dreptunghi: coltul stīnga sus si dreapta jos
pentru poligon: coordonatele fiecarui nod
pentru puncte: coordonatele punctelor
Originea sistemului de coordonate (0,0) se afla īn coltul din stīnga sus al imaginii iar directia pozitiva a axei Oy este īn jos.
Exemplu:
default /diropt/fisopt1.html default
rect (16,65) (122,100) /diropt/fisopt2.html
rect (319,68) (431,98) /diropt/fisopt3.html
poly (92,158) (149,85) (302,90) (375,156) (95,154) /diropt/fisopt4.html
Observatii
URL-ul implicit (default) este utilizat ori de cīte ori mouse-ul activeaza o regiune care nu trimite spre un anumit document (īn acest caz unul dintre dreptunghiuri sau regiunea trapezoidala).
Ordinea regiunilor din fisierul de mapare conteaza. Daca de pilda doua regiuni selectate se suprapun partial (sau total) regiunea mentionata mai la īnceputul fisierului are prioritate la activare.
Punctele (īn maparile NCSA) permit specificarea faptului ca un clic care nu cade direct pe o anumita regiune, va activa cel mai apropiat punct definit īn fisierul de mapare care apare pe imagine. Includerea optiunii default īntr-un fisier pentru serverul NCSA presupune ca nu veti introduce nici un punct activ deoarece existenta unui asemenea punct inhiba optiunea default.
Maparea imaginii se poate face fie manual, īncarcīnd imaginea īntr-un program care sa permita notarea coordonatelor zonelor de interes, fie automat, utilizīnd unul din produsele care permit desenarea regiunilor selectate cu ajutorul mouse-ului. Programe de acest tip: Mapedit (sub Windows) HotSpots for Windows, WebMap for Macintosh sau Mapedit (pentru X). Toate permit salvarea fisierului .map fie īn format CERN fie īn format NCSA.
C. Script-ul
Mai īntīi scriptul (programul) pentru maparea imaginilor trebuie sa fie instalat īn directorul cgi-bin (htimage pentru CERN sau imagemap pentru NCSA) si apoi fisierul poza.map (creat anterior) trebuie depus īntr-un director (sa zicem maps) aflat la acelasi nivel cu cgi-bin. Legatura īntre scriptul htimage si fisierul de mapare a imaginii se face atasīnd calea catre acesta din urma imediat dupa numele scriptului (htimage).
Exemplu:
<a href="https://www.comp-craiova.ro/cgi-bin/htimage/maps/poza.map"> <img src="logo.jpg" ISMAP> </a>
Activarea unei zone a imaginii senzitive īnseamna transmiterea catre script a coordonatelor punctului activat. Coordonatele sīnt exprimate ca valori (īn pixeli) relative la coltul stīnga-sus al imaginii. Modalitatea prin care se transmit aceste coordonate este urmatoarea: se deriveza o noua adresa (URI) din cea specificata de atributul href a elementului A prin adaugarea caracterului ? urmat de coordonatele x si z, separate de virgula. Legatura care se urmeaza este data de aceasta noua adresa. De exemplu, daca pentru imaginea senzitiva definita astfel:
<A href="https://www.acme.com/cgi-bin/competition"> <IMG src="game.gif" ismap alt="target"> </A>
se face click īn punctul de coordonate x=10, y=27, noua adresa derivata ce va fi folosita pentru navigare va fi: "https://www.acme.com/cgi-bin/competition?10,27"
|
