E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale HTML

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  HTML  /  Bazele HTML (10)

VI. Maparea imaginilor

15.05.2008
VI. Maparea imaginilor

In acest tutorial vei invata cum sa realizezi maparea unei imagini in HTML, client-side, cat si maparea server-side.

Total vizualizari: 13372 13372 afisari   |   Comentarii  0   |   Rating   |   (4 voturi)   |   Timp necesar: 25 min 25 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  E-learn.ro  
Autor:  E-learn.ro
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
« 1 2
comenteaza printeaza

Forma

Coordonate

Dreptunghi

coords="x1,y1,x2,y2"
(Colturile din stanga sus si dreapta jos ale dreptunghiului)

Cerc

coords="x,y,r"
(Centrul si raza cercului)

Poligon

coords="x1,y1,x2,y2,x3,y3,..."
(Varfurile poligonului)



Poti observa ca toata valorile coordonatelor sunt relative la coltul din stanga sus al imaginii. Cu alte cuvinte, coltul din stanga sus are intotdeauna coordonatele (0,0).

Pentru un tag area ce are atributul shape="default", nu trebuie sa precizezi coordonatele.

href="hyperlink-ul ariei"

Acesta este URL-ul spre care ati dori sa redirectati zonele definite, el functionand la fel ca un tag <a href="..."> standard.

In plus, in loc de acesta poti specifica un atribut nohref daca vrei ca un contur sa nu aiba link.

target="hyperlink target"

Cu target poti preciza fereastra unde vrei sa se deschida pagina care reprezinta linkul ariei respective. Si acesta functioneaza ca atributul target dintr-un tag standard.

title="titlul ariei"

Acest atribut iti permite sa denumesti aria respectiva. Cand mouse-ul se afla deasupra acestei arii, browserul va afisa acest titlu.

Plasarea maparii imaginii intr-un fisier separat
Numele maparii imaginii specificat prin atributul usemap este de fapt un URI (Unique Resource Identifier), ceea ce inseamna ca se poate referi la o "harta" aflata in alt fisier de pe site.

De exemplu, daca ai salvat tag-ul map intr-un fisier denumit forme.map din acelasi director cu fisierul HTML, acest tag va fi accesat folosind:

<img src="imagini/relief.jpg" width="298"
height="225" border="0" usemap="forme.map">

Maparea imaginilor server-side
Ca o alternativa la definirea maparii in HTML ce poate fi citita de catre un browser, poti folosi maparea server-side. Cu acest tip de mapare, browser-ul trimite coordonatele (x,y) ale punctului pe care ai dat click la un script server-side (cum ar fi CGI).

Pentru a realiza o mapare server-side, trebuie doar sa incluzi atributul ismap si sa incadrezi imaginea intr-un tag <a href="...">, specificand scriptul server-side spre care vor fi trimise coordonatele (x,y):

<a href="formemap.cgi">
<img src="imagini/relief.jpg" width="298"
height="225" border="0" ismap>
</a>

Cand vei da click pe imagine, browser-ul va trimite coordonatele (x,y) ale punctului respectiv la scriptul server-side "formemap.cgi", care va interpreta valorile x si y, actionand corespunzator.

Ca observatie, in cazul de mai sus coordonatele sunt transmise ca parametri la sfarsitul caii URL.

De exemplu, daca vrei sa dai posibilitatea utilizatorului de a-si alege o tara dintr-o harta a lumii, poti utiliza scriptul server-side pentru a calcula pe ce tara a fost dat click, afisand informatiile destre tara respectiva.

Un alt mod de a crea o mapare server-side este prin includerea unui element de tip <input type="image" ... > in tag-ul form.

<form action="formemap.cgi">
<input type="image" name="relief_imagine"
src="imagini/relief.jpg" width="298"
height="225" border="0">
</form>

In acest caz, coordonatele (x,y) sunt considerate campuri ale tag-ului form, cu denumirea numele_campului.x si numele_campului.y. Deci in exemplul de mai sus, coordonatele vor fi continute in campurile relief_imagine.x si relief_imagine.y.

Este bine sa utilizezi maparea server-side atunci cand maparea presupune mai multe zone, sau cand aceste zone nu sunt simplu definite prin forme simple cum ar fi cercuri, dreptunghiuri sau poligoane.

Trucuri pentru a stabili coordonatele maparii
Daca folosesti un editor de pagini cum ar fi Macromedia Dreamweaver, poti realiza maparea desenand direct pe imagine si lasand editorul sa stabileasca coordonatele.

Daca realizezi pagina fara ajutorul unui editor, o modalitate simpla de a stabili coordonatele este sa schimbi maparea de la client-side la server-side inlocuind atributul usemap="numemap" cu ismap, si adaugand un tag <a href="..."> care sa contina imaginea:

<a href="#"><img src="imagini/relief.jpg" width="298"
height="225" border="0" ismap></a>

O alta metoda ar fi deschiderea imaginii intr-un editor grafic cum ar fi Adobe Photoshop. Cand vei muta mouse-ul deasupra imaginii, vei putea vedea coordonatele punctului respectiv.

Pagina:
« 1 2
comenteaza printeaza
Alte tutoriale HTML:
Noteaza acest tutorial
Rating tutorial
 
(4 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4335
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4200
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4185
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4020
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Flash Ruby on Rails Fotografie Action Script Fireworks COREL DRAW Outlook Photoshop Python Verilog Gimp SEO HTML Excel Vista PHP Powerpoint Javascript SWF Lightroom MySQL JSON Bridge AJAX Dreamweaver Swift 3D XML Word PSD StyleSheet RoR Sony Vegas Illustrator Java CSS XHTML
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software