| <html> |
- indica browserului ca incepe un document HTML |
| <head> |
- inceputul antetului |
<title> Harti de imagini - exemplu : map ,
usemap , area shape</title>
|
- titlul de pe bara de titlu a browserului |
| </head> |
- sfarsitul antetului |
| <body bgcolor=white> |
- inceputul corpului documentului |
| <h2> Harti de imagini - exemplu </h2> |
- primul text din pagina |
| <center> |
- aliniaza pe centru materialul care urmeaza |
<img src="../foto/imagine.gif"
usemap="#map1" border=0 width=200
height=200 alt="contine 3 zone"> |
- include imaginea (de dimensiuni 200x200 pixeli) si o defineste ca fiind o harta de imagini la client |
| </center> | - sfarsitul alinierii pe centru |
| <map name="map1"> | - incepem sa definim regiunile hartii de imagini numita map1 |
<area shape= "rect" coords= "30,30,70,70"
href= "rect.htm" alt="dreptunghi"> |
- defineste o regiune dreptunghiulara; coltul din stg. sus are x=30, y=30; coltul
din dr. jos are x=70, y=70; cu click ajungem la pagina (fisierul) rect.htm |
<area shape= "circle" coords= "150,50,40"
href= "circ.htm" alt="cerc"> |
- defineste o regiune circulara; centrul cercului are x=150, y=50, iar raza=40;
cu click ajungem la pagina (fisierul) circ.htm |
<area shape= "poly" href= "poly.htm"
coords= "0,110,200,110,100,200"
alt="poligon (triunghi in acest caz)"> |
- defineste o regiune de forma unui poligon cu 3 colturi; primul colt are x=0, y=110; al doilea are x=200, y=110; al treilea are x=100, y=200;
cu click ajungem la pagina (fisierul) poly.htm |
| <!-- |
- inceput de comentariu in codul sursa |
<area shape= "rect" coords= "0,0,200,200"
href= "rest.htm"> |
- este asezata ultima si defineste o regiune dreptunghiulara (definita prin coltul din stg.sus (0,0) si dr.jos (200,200)) de marimea intregii imagini (200 x 200 pixeli); in cazul unui click pe imagine dar oriunde in afara regiunilor definite mai sus, ne duce la pagina (fisierul) rest.htm; in acest caz instructiunea nu este interpretata de browser (deoarece este inclusa in codul sursa ca un comentariu) iar mouse-ul are forma unei palme (indica legatura) doar deasupra regiunilor definite mai sus |
| --> |
- sfarsit de comentariu in codul sursa |
| </map> |
- terminam de definit regiunile hartii de imagini numita map1 |
| </body> |
- sfarsitul corpului documentului |
| </html> |
- sfarsitul documentului HTML |
In acest caz, atributul HREF din cadrul instructiunilor AREA indica legaturi spre pagini (fisiere) diferite; este posibil ca unele dintre ele sa indice legaturi spre acelasi fisier, in cadrul caruia sa avem definite ancore
(cu <a name= nume_ancora> text_ancora 1, 2, ... </a>); atunci HREF
ar avea forma: HREF = " nume_fisier.html # nume_ancora ".
