Prof. Angela Ghinea
curs webdesign
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 eticheta <img> a imaginii are următoarele atribute: src - fişierul sau adresa fişierului imagine usemap – are valoarea de genul #nume care este folosit în interiorul etichetei <map> prezentate mai jos. Harta se defineşte folosind perechea de etichete <map> şi </map>, cu atributul obligatoriu name, având aceeaşi valoare ca la usemap din img. Zona sau zonele conţinute de hartă sunt introduse prin eticheta <area> cu atributele obligatorii: shape = forma ariei declarate cu valorile: rect=dreptunghiulară, circle=circulară, poly=poligonală, default=alte forme (diferite de cele anterioare) coords = coordonatele zonei href = adresa paginii destinaţie a legăturii Aria rectangulară (rect) se declară prin coordonatele colţului stânga sus şi colţului dreapta jos. Originea coordonatelor este colţul stânga sus al imaginii. Aria circulară (circle) se declară prin coordonatele centrului şi raza. Aria poligonala (poly) se declară prin coordonatele fiecarui colţ. Exemplu: o hartă de imagini care conţine 5 zone <html> <head> <title>Harta</title> </head> <body> <b>Harti de imagini</b><p> <img src="harta.gif" usemap="#harta" width="280" height="160" border="0"> <map name="harta"> <area shape="rect" coords="20,20,70,70" href="pag1.html"> <area shape="rect" coords="20,90,120,140" href="pag2.html"> <area shape="circle" coords="200,80,30" href="pag3.html"> <area shape="circle" coords="200,80,60" href="pag1.html"> <area shape="poly" coords="90,70,120,70,120,20" href="pag3.html"> </map> </body> </html>
Crearea hărţii de imagini Pentru formarea unei hărţi de imagini, se adaugă în interiorul tag-ului "<img>" atributul "usemap" a cărui valoare reprezintă numele hărţii, apoi se începe formarea hărţii prin elementul: •
<map name="nume_harta"> </map>
- unde pt. "nume_harta" a atributului "name" se foloseşte acelaşi cuvânt adăugat la "usemap" - în 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
Prof. Angela Ghinea
curs webdesign
"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: â&#x20AC;˘
<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 -
marcaj de includere a imaginilor specifica faptul ca este o harta de imagine pe server (se foloseste mai rar; de obicei folosim harti de imagine la client)
ismap <img atribute >
Descriere
usemap="nume_harta" specifica harta de imagine la client lowscr = "url"
imaginea de rezolutie scazuta care se incarca prima (doar pentru Netscape)
specifica regiunile unei harti de imagine la client <map atribute > numele hartii de imagine (corespunzator atributului USEMAP al < / map > name = "nume_harta" marcajului <IMG>) shape = "forma"
defineste o regiune a unei harti de imagine forma regiunii: rect sau rectangle (dreptunghi), circle sau circ (cerc), point (punct), poly sau polygon (poligon)
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 coords = "coordonate" sau a celor din stg. sus si dr. jos ale regiunii - pentru circ (cerc) se dau coordonatele centrului cercului si <area atribute > 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).
Prof. Angela Ghinea
curs webdesign
- 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="pagina.html" alt="Pagina web" title="Pagina web" shape="rect" coords="6,116,97,184"> <area href="masini.html" alt="masini" title="masini" shape="circle" coords="251,143,47"> <area href="main.html" alt="Pagina principala" title="Pagina principala" shape="poly" coords="150,217, 190,257, 150,297,110,257"> </map> </div>
Alt exemplu: se dă imaginea „books1.gif” de mai jos. Ea reprezintă o imagine cu mai multe cărţi. Dacă folosim harta de imagini putem da clic pe fiecare carte şi intra în câte o pagină web.
Prof. Angela Ghinea
curs webdesign
Codul pentru maparea acestei imagini este următorul: <html> <head><title>grafica</title></head> <body> <H1 align="center">Imagini harta</H1><HR> <map name="harta"> <area shape="poly" coords="29, 109, 44, 122, 111, 24, 125, 36" href="culori.html">
<area shape="rect" coords="132, 35, 245, 57" href="fonturi.html"> <area shape="rect" coords="114, 61, 224, 92" href="liste.html"> <area shape="rect" coords="81, 95, 227, 125" href="http://www.google.ro/"> </map> <H3>Pentru a deschide cartile din imagine faceti click pe una dintre ele</H3> <IMG src=”books1.gif” usemap="#harta" width="283" height="142" border="0"> </body> </html>
TEMĂ 1. Să se mapeze o imagine cu plajă (jpg, gif sau alt tip) şi să se creeze în ea 3 zone prin care să se intre la o adresă de existentă pe Internet şi alte două locale. 2. Modificaţi codul de la ultimul exemplu astfel încât cele 4 zone create în hartă pe cele 4 cărţi să deschidă adrese existente pe Internet legate de titlurile cărţilor (ex: www.ejobs.com etc).