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: 13482 13482 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

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

Prin mapare, in cadrul unei imagini dintr-o pagina web pot fi definite mai multe contururi speciale, cu cate un link asociat. Aceasta inseamna ca in loc sa ai toata imaginea ca un singur link, poti defini mai multe linkuri in cadrul aceleiasi imagini.

Ca exemplu, imaginea de mai jos contine 3 asemenea contururi, care vor afisa diferite mesaje JavaScript atunci cand dai click pe ele.

HTML - Maparea imaginilor

Atributul "usemap"
Pentru maparea unei imagini trebuie sa adaugi atributul usemap in tag-ul img. In exemplul de mai sus, maparea imaginii este denumita forme, deci tag-ul img va arata in felul urmator:

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

Poti observa ca atributul usemap="#forme" asigura maparea imaginii.

Tag-ul "map"
Urmatorul pas pentru maparea imaginii este definirea unei harti. Astfel ii putem transmite browserului care sunt zonele (contururile) speciale si ce link corespunde fiecaruia.

Harta este definita de tag-urile <map></map>. Pentru exemplul de mai sus, tag-ul map arata in felul urmator:

<map name="forme">
  <area shape="circle"
    coords="187,114,50"
    href="javascript:clicked_on('Cerc');"
    title="Cerc">
  <area shape="rect"
    coords="30,22,121,100"
    href="javascript:clicked_on('Dreptunghi');"
    title="Dreptunghi">
  <area    shape="polygon"
    coords="83,125,132,201,31,201"
    href="javascript:clicked_on('Triunghi');"
    title="Triunghi">
<area    shape="default"
    nohref>
</map>

Poti vedea ca am definit 3 contururi - un cerc, un dreptunghi si un poligon - ce delimiteaza arii si ca aceste arii au fost corelate cu o functie JavaScript care afiseaza denumirile lor corespunzatoare.

In acest exemplu, tag-ul map este plasat in fisierul HTML dupa tag-ul img. In realitate, el poate aparea oriunde in sectiunea body.

In general, sintaxa pentru tag-ul map este:

<map name="nume">
<area    shape="forma ariei"
    coords="coordonatele ariei"
    href="hyperlink-ul ariei" sau nohref
    target="hyperlink target"
    title="titlul ariei">
<area shape="forma ariei...">
</map>

Deci, fiecare mapare a unei imagini are un nume (name) si contine mai multe tag-uri area. Tag-urile area au urmatoarele atribute:

shape="rect | circle | poly | default"

Atributul shape precizeaza forma ariei. Valorile posibile sunt:
  - rect (forma dreptunghiulara),
  - circle (forma circulara),
  - poly (un poligon arbitrar cu 3 sau mai multe varfuri), sau
  - default (reprezinta restul imaginii care nu este definita in tag-urile area).

coords="coordonate"
Acest atribut precizeaza coordonatele care definesc colturile ariei. Coordonatele depind de forma ariei specificata prin atributul shape.

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
4435
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4335
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4295
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4140
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Ruby on Rails Lightroom Swift 3D Word MySQL Illustrator Powerpoint Outlook Bridge PHP Fireworks Excel JSON RoR Verilog Photoshop AJAX Java StyleSheet Sony Vegas Javascript Python XHTML Action Script XML Gimp HTML Flash PSD Vista Dreamweaver SEO Fotografie COREL DRAW CSS SWF
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