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:

- 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 atribut specifica adresa unde sunt trimise datele din formular?
method action name
<form action="script.php" method="post"> ... </form>
Ce proprietate CSS desparte cuvinte lungi, adaugand pe rand nou?
word-wrap line-height font-size
#id {
  width: 100px;
  word-wrap: break-word;
}
Ce functie aranjeaza elementele din array in ordine alfabetica, bazat pe valorile lor?
pop() sort() shift()
var tutorials = ["php", "html", "css", "flash"];
tutorials.sort();
alert(tutorials[0]);          // css
Indicati functia care returneaza valoarea ultimului element din array.
current() next() end()
$code =[10=>"Perl", 20=>"PHP", 21=>"Python", 30=>"JavaScript");
$last = end($code);
echo $last;      // JavaScript
Alegeti verbul auxiliar corect care trebuie in propozitia: "Her plane ... just arrived".
have has does
Her plane has just arrived.
- Avionul ei tocmai a sosit.
Indicati forma corecta a verbului SER (a fi) in propozitia: "Vosotros ... muy simpáticos".
son soy sois
Vosotros sois muy simpáticos.
- Sunteti foarte simpatici.
Harti de imagini

Last accessed pages

  1. Dreptunghi, Oval, Poligon - Stea (1484)
  2. Gramatica limbii engleze - Prezentare Generala (200617)
  3. Select in MySQL, Creare tabel HTML cu date din Select (613)
  4. Aliniere DIV-uri pe aceeasi linie (4524)
  5. Viitor simplu si continuu - Future Tense Simple and Continuous (43215)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (166)
  2. Gramatica limbii engleze - Prezentare Generala (164)
  3. Exercitii engleza - English Tests and exercises - Grammar (111)
  4. Curs HTML gratuit Tutoriale HTML5 (88)
  5. Pronumele in limba engleza - Pronouns (82)