HTML - Lecția 15. Hărți de navigație - hartă

Astfel de hărți imagine pot fi pe partea client sau pe partea serverului. Link-urile hărții clientului sunt stocate în documentul propriu-zis, iar făcând clic cu mouse-ul, browserul însuși determină cărei zone îi aparțin coordonatele acestui punct și navighează către linkul dorit.

Cu versiunea de server, aceste coordonate sunt mai întâi transmise către server, procesate acolo printr-un program special, iar abia după aceea este urmată link-ul Evident, hărțile de navigare ale clientului sunt de preferat. Le vom lua în considerare.

De exemplu, să ne imaginăm că suntem un magazin de electrocasnice și în antetul site-ului nostru avem următoarea poză:

Să facem o hartă de navigație din ea, de exemplu. cand dai click pe frigider vei fi redirectionat catre o pagina dedicata frigiderelor (cu modele, descrieri si preturi), cand dai click pe aspirator si masina de spalat, vei fi dus la paginile corespunzatoare acestora.

Pentru a face acest lucru, trebuie să descriem zonele din această imagine care vor fi link-uri. Etichetele sunt folosite pentru a descrie astfel de zone cu un singur parametru nume, care specifică numele hărții de legături și este apoi folosit pentru a lega această hartă.

• formă- definește forma zonei, poate lua următoarele valori:
  • rect- zonă sub formă de dreptunghi,
  • cerc- zonă sub formă de cerc,
  • poli- zonă sub formă de poligon,
  • implicit- întreaga regiune.
• cootds- stabilește coordonatele unei zone separate:
  • Pentru rect sunt specificate coordonatele colțurilor din stânga sus și din dreapta jos ale dreptunghiului,
  • Pentru cerc sunt specificate coordonatele centrului și razei cercului,
  • Pentru poli coordonatele vârfurilor poligonului sunt specificate în ordinea cerută.
• href- definește adresa link-ului.
• ţintă- utilizat când se utilizează cadre și indică cadrul în care trebuie încărcată pagina.
• alt- setează text alternativ pentru zonă.

În aceste scopuri, se utilizează de obicei un program, de exemplu, Image Ready, care are un instrument special pentru conturarea zonelor și construiește automat descrieri ale acestor zone. Luarea în considerare a funcționării acestor programe nu este inclusă în cursul HTML, așa că aici vom seta coordonatele „prin ochi”. Aruncă o privire din nou la imaginea noastră:

Lățimea imaginii noastre este de 738 pixeli și înălțimea este de 192 pixeli. Să trasăm linii de-a lungul granițelor regiunilor noastre și să stabilim aproximativ coordonatele. Acum suntem gata să adăugăm acești parametri la etichetele noastre .

Acum zonele noastre au devenit legături (dacă mutați cursorul mouse-ului, acesta se transformă într-o palmă). Nu există pagini pe acest site dedicate frigiderelor, așa că link-urile te vor duce către aceeași pagină, dar dacă creezi paginile pe care le dorești, făcând clic pe zonă te va duce la pagină.

Aceasta încheie lecțiile noastre. Te-ai familiarizat cu toate capabilitățile limbajului HTML. Pentru a vă consolida abilitățile, consultați cele două lecții Crearea unui site web - aspect tabelar.

În sfârșit, trebuie să spun că mai există două elemente minunate în HTML - etichetele

Să ne uităm la un exemplu despre cum arată o hartă imagine în html:

Când treceți mouse-ul peste zona dreptunghiului verde, puteți vedea că este un link către „#green_link” (eticheta a fost aleasă ca exemplu; puteți face legătura către orice pagină de pe Internet). Pătratul roșu are „#red_link”, iar cercul albastru are „#blue_link” corespunzător.

Cod pentru acest exemplu:

img/primer-kartu-izobrazheniy-1.jpg">

După cum puteți vedea din exemplu, codul nu este atât de complicat. Să ne uităm la etichete pentru a crea o hartă a linkurilor imagine.

1. Trebuie să creați un link de imagine și hărți

La crearea unei hărți de legături, atributul usemap este necesar pentru eticheta img.

2. Descrierea hărții

3. Fiecare element de hartă este descris folosind o etichetă , care specifică tipul de obiect folosind atributul formă (dreptunghi, cerc sau poligon) și coordonatele acestuia.

Zonele se pot suprapune. În acest caz, legătura va duce la obiectul care a fost descris ultimul.

Atributele etichetei

1. Atributul Shape="object_type" - specifică tipul obiectului. Poate lua următoarele valori:

• cerc - cerc;
• rect - dreptunghi;
• poli - poligon;

2. Atribut coords="valori_coordonate"- determină amplasarea geometrică a obiectului și dimensiunile acestuia.

Punctul de raportare al imaginii este colțul din stânga sus. Aceste. dacă ați specificat un offset de înălțime de 10, atunci aceasta înseamnă 10 pixeli mai jos.

În funcție de tipul de obiect, trebuie să specificați valorile coordonatelor în diferite formate. Toate valorile sunt indicate în pixeli (nu este nevoie să scrieți marcajul px).

• Pentru tipul cerc: coords = (x,y,r) , unde x,y sunt coordonatele centrului cercului, iar r este raza cercului;
• Pentru tipul rect: coords = (x1,y1,x2,y2) , unde x1,y1 sunt coordonatele punctului din stânga sus al dreptunghiului, x2,y2 sunt coordonatele punctului din dreapta jos al dreptunghiului;
• Pentru tipul poli: coordonate = (x1,y1,x2,y2,...,xn,yn), coordonatele x,y ale fiecărui punct al poligonului sunt indicate secvenţial;

3. Atribut href="referral_address"- setează linkul pentru a merge la (în mod similar). Pe lângă adresa de salt, puteți utiliza funcții JavaScript pentru a efectua anumite acțiuni.

• _blank - deschide pagina într-o fereastră nouă
• _self - încarcă pagina în fereastra curentă
• _parent - încarcă pagina în cadrul părinte
• _top - anulează toate cadrele și încarcă pagina în fereastra completă a browserului

5. Atribut title="hint" - выводит всплывающую подсказку. можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »!}

6. Atribut Nohref - face zona inactivă. Folosit la suprapunerea obiectelor. Este folosit destul de rar, dar uneori poate deveni o soluție indispensabilă. De exemplu, puteți face un cerc mic în interiorul unui cerc mare inactiv.

Zona nohref trebuie să fie pe primul loc.

Exemplu de cod: