Hartile de imagini sunt parti din aceeasi imagine care este "impartita" in mai multe zone, apoi in functie de zona pe care se executa click, browserul poate afisea o alta pagina.
De exemplu, pe un site dedicat turismului am putea avea pe pagina principala o imagine care reprezinta harta tarii (in care definim zonele dupa conturul judetelor); in cazul unui click pe zona Brasov se incarca o pagina care descrie diverse obiective turistice din judetul Brasov, iar un click pe o alta zona de judet ar duce la alta pagina care descrie obiectivele turistice din acel judet.
O harta de imagini ar putea fi folosita si pentru navigarea in cadrul unui site: daca avem mai multe butoane de navigare grupate, se poate folosi o imagine care reprezinta toate acele butoane - mai multe imagini se incarca mai incet decat o imagine cu dimensiunea egala cu suma celorlalte (in kb) deoarece comunicarea cu serverul (cand se cere imaginea) se face o singura data.
Pana aici am prezentat numai avantaje; dezavantajul major este ca un vizitator care are browserul setat sa nu incarce imagini pentru a naviga mai repede nu va vedea imaginea si nu va intelege mai nimic (putem totusi folosi marcajul "alt" de specificare a textului alternativ pentru imagini). Totusi acest lucru este foarte rar.

Crearea hartii de imagini

Pentru formarea unei harti de imagini, se adauga in interiorul tag-ului "<img>" atributul "usemap" a carui valoare reprezinta numele hartii, apoi se incepe formarea hartii prin elementul:

- unde pt. "nume_harta" a atributului "name" se foloseste acelasi cuvant adaugat la "usemap"
- in cadrul acestuia se adauga elemente - acestea definesc zonele hartii imaginii si forma acestora (prin valorile atributelor),
- numarul de elemente "AREA" reprezinta numarul de suprafete (cu link-uri specifice) in care este "impartita" imaginea.

In urmatorul exemplu puteti vedea forma generala a creari unei "harti de imagini" (cu 2 cadre), URL poate fi orice adresa de site sau pagina a site-ului curent:
In tabelul de mai jos puteti vedea atributele care se folosesc si descrierea acestora:
Instructiune Atribute Descriere
<img atribute > - marcaj de includere a imaginilor
ismap specifica faptul ca este o harta de imagine pe server (se foloseste mai rar; de obicei folosim harti de imagine la client)
usemap="nume_harta" specifica harta de imagine la client
lowscr = "url" imaginea de rezolutie scazuta care se incarca prima (doar pentru Netscape)
<map atribute >
< / map >
- specifica regiunile unei harti de imagine la client
name = "nume_harta" numele hartii de imagine (corespunzator atributului USEMAP al marcajului <IMG>)
<area atribute > - defineste o regiune a unei harti de imagine
shape="forma" forma regiunii: rect sau rectangle (dreptunghi), circle sau circ (cerc), point (punct), poly sau polygon (poligon)
coords="coordonate" coordonatele unei regiuni (in pixeli); se calculeaza in functie de coltul din stanga sus al imaginii (care are coordonatele (0, 0), adica x = 0, y = 0); variaza in functie de SHAPE = forma regiunii:
- pentru rect (dreptunghi) se dau coordonatele celor 4 colturi sau a celor din stg. sus si dr. jos ale regiunii
- pentru circ (cerc) se dau coordonatele centrului cercului si raza
- pentru point (punct) se dau coordonatele punctului
- pentru poly (poligon) se dau coordonatele colturilor poligonului
href="url" URL - ul asociat regiunii specificate din cadrul imaginii; in cazul unui clic pe acea regiune se incarca pagina specificata prin URL
alt="text" textul asociat regiunii specificate din cadrul imaginii; apare plasand mouse-ul deasupra regiunii respective sau celor cu browserul setat sa nu incarce imagini

Iata un exemplu practic, avem imaginea de mai jos.
In aceasta imagine avem trei zone distincte: dreptunghi, cerc si romb (poligon); pe care, prin codurile HTML de creare a hartii de imagini, le-am definit sa fie tratate ca zone diferite, separate, si cand dam click pe ele, fiecare deschide cate o pagina diferita (sugerata de numele din zona respectiva).
Harta de imaginiDate de contact Curs HTML Pagina principala

- Observati ca mouse-ul isi schimba forma numai cand este deasupra zonelor care au fost definite ca sa fie suprafete a hartii de imagini. Aceasta definire nu este facuta prin desen, ci prin coordonatele folosite in atributul "coords", coordonate care au fost alese pentru a se potrivi cu desenul. Reperul cel mai important este lungimea in pixeli din coltul stanga-sus pana in punctele care formeaza zona dorita.

Codul HTML pentru acest exemplu este urmatorul (studiati cu atentie atributele folosite si coordonatele scrise; revizuiti si tabelul de mai sus):
<div align="center">
<img src="image_map.gif" alt="Harta de imagini" border="0" width="300" height="300" usemap="#map1">

<map name="map1">
  <area
      href="dir/contact" alt="Date de contact" title="Date de contact"
      shape="rect" coords="6,116,97,184">
  <area
      href="curs.html" alt="Curs HTML" title="Curs HTML"
      shape="circle" coords="251,143,47">
  <area
      href="../" alt="Pagina principala" title="Pagina principala"
      shape="poly" coords="150,217, 190,257, 150,297,110,257">
</map>

</div>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag HTML5 adauga o aplicatie externa (SWF, PDF) in pagina web?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Ce pseudo-element adauga un anume stil la prima linie de text din element?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Clic pe proprietatea obiectului window care preia sau seteaza adresa URL a paginii curente.
window.location window.self window.status
var url = window.location;
alert(url);
Indicati functia PHP care preia continutul unui fisier sau pagina si-l adauga intr-un sir.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://www.marplo.net/");
echo $homepage;
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
seven - eight ten - six three - five
This fruit has seven or eight seeds.
- Acest fruct are sapte sau opt seminte.
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
diez - seis siete - ocho tres - cinco
Esta fruta tiene siete u ocho semillas.
- Acest fruct are sapte sau opt seminte.
Harti de imagini

Last accessed pages

  1. Trecut perfect - Exercitii si teste incepatori (356)
  2. Baze de date SQL 2 (143)
  3. Adverbele in limba engleza - Adverbs (1259)
  4. Tipuri de siruri si variabile (185)
  5. Trecutul nedefinit si Imperfect Recapitulare (28)

Popular pages this month

  1. Bubbles3 (3095)
  2. Gramatica limbii engleze - Prezentare Generala (2931)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2164)
  4. Butterfly Kyodai (2012)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (1827)