Harti de imagini

Curs Html

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:

• <map name="nume_harta"> </map>

- unde pt. "nume_harta" a atributului "name" se foloseste acelasi cuvant adaugat la "usemap"
- in cadrul acestuia se adauga elemente

• <area atribute>

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

• <img src="poza.jpg" usemap="#map1">
  <map name="map1">
    <area shape="rect" coords="9, 120, 56, 149" href="url">
    <area shape="rect" coords="100, 200, 156, 249" href="url">
  </map>

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).
- 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):

<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>

#id {
  overflow: auto;
}

document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}

if(isset($_GET["id"])) {
  echo $_GET["id"];
}

Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.

Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.