Hărţi de imagini

Hărţile de imagini permit declararea unor zone din imagine ca legături către alte pagini web şi implică două aspecte.

Imaginea este declarată ca fiind harta. Pentru aceasta tag-ul <img> a imaginii are următoarele atribute:

  1. src fisierul sau adresa fisierului imagine;
  2. usemap are valoarea de genul #nume care este folosit în interiorul tag-ului <map> prezentate mai jos;

Harta se defineşte folosind perechea de tag-uri <map> şi </map>, cu atributul obligatoriu name, avand aceeaşi valoare ca la usemap din <img>.

Zona sau zonele conţinute de hartă sunt introduse prin tag-ul <area> cu atributele obligatorii:

  1. shape = forma ariei declarate cu valorile: rect=dreptunghiulară, circle=circulară, poly=poligonală, default=alte forme (diferite de cele anterioare);
  2. coords = coordonatele zonei;
  3. href = adresa paginii destinaţie a legăturii;

Originea coordonatelor este colţul stânga sus al imaginii. Aria rectangulară (rect) se declară prin coordonatele colţului stânga sus şi colţul dreapta jos. Aria circulara (circle) se declară prin coordonatele centrului şi rază. Aria poligonala (poly) se declară prin coordonatele fiecărui colţ.

În tabelul de mai jos puteţi vedea atributele care se folosesc şi descrierea acestora:

Vizualizare

harti

Iată un exemplu practic, avem imaginea de mai jos.

În această imagine avem trei zone distincte: dreptunghi, cerc şi triunghi (poligon); pe care, prin codurile HTML de creare a hărţii de imagini, le-am definit să fie tratate ca zone diferite, separate, şi când dam click pe ele, fiecare deschide câte o pagină diferită (sugerată de numele din zona respectivă).

harta tabele sunete liste sunete sunete

Observaţi cum mouse-ul îşi schimbă forma numai când este deasupra zonelor care au fost definite ca să fie suprafeţe a hărţii de imagini. Această definire nu este facută prin desen, ci prin coordonatele folosite în atributul "coords", coordonate care au fost alese pentru a se potrivi cu desenul. Reperul cel mai important este lungimea în pixeli din colţul stânga-sus până în punctele care formează zona dorită.

Codul HTML pentru acest exemplu este următorul:

Codul html
<html>
<head>
<title>Exemplu harta de imagini </title>
</head>
<body>
<img src="harta.jpg" usemap="#harta" border="0" width="300" height="300"/>
<map name="harta">
<area shape="rect" coords="6,116,97,184" href="tabele.html" alt="tabele"/>
<area shape="rect" coords="20,90,120,140" href="sunete.html"alt="sunete"/>
<area shape="circle" coords="251,143,47" href="liste.html"alt="liste"/>
<area shape="circle" coords="200,80,60" href="sunete.html"alt="sunete"/>
<area shape="poly" coords="150,217, 190,257, 150,297,110,257" href="sunete.html"alt="sunete"/>
</map>
</body>
</html>

harti