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

Etichetă

În interiorul recipientului

• unul sau mai multe elemente< >. Aceste elemente nu au conținut, dar definesc regiunile geometrice ale hărții imaginii și hyperlinkurile asociate fiecărei regiuni
• conținut la nivel de bloc. Acest conținut ar trebui să includă< >, care specifică regiunile geometrice ale hărții și legăturile asociate fiecărei regiuni

Dacă eticheta

Dacă regiunile se suprapun, elementul care definește regiunea care apare mai devreme în document are prioritate.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Sintaxă

Atribute

clasă	definește numele clasei de utilizat
dir	determină direcția personajelor: ltr - de la stânga la dreapta rtl - de la dreapta la stânga
id	identificator unic
lang	definește limba documentului afișat
nume	numele cardului de imagine. Folosit ca valoare a parametrului usemap al etichetei
onblur	elementul își pierde focalizarea
onclick	faceți clic pe un element
ondblclick	faceți dublu clic pe un element
onfocus	element care se concentrează
onkeydown	apăsând o tastă când elementul are focalizare
la apăsarea tastei	apăsarea și eliberarea unei taste atunci când un element are focalizarea
onkeyup	eliberarea unei taste apăsate anterior atunci când elementul are focalizarea
onmousedown	făcând clic pe un buton al mouse-ului când un element are focus
onmousemove	mișcarea cursorului mouse-ului când un element are focus
onmouseout	mutarea cursorului mouse-ului de pe un element
onmouseover	plasarea cursorului mouse-ului pe un element
onmouseup	eliberarea unui buton al mouse-ului apăsat anterior atunci când un element are focus
stil	specifică o foaie de stil inline
titlu	tooltip

Exemplu

• este necesară eticheta de închidere ()
• este obligatoriu atributul id
• Se recomandă furnizarea unei alternative de text la o placă grafică pentru cazurile în care graficele nu sunt disponibile sau utilizatorul nu le poate obține
• Nu este recomandată utilizarea hărții de imagine ca navigare principală, din cauza suportului slab în browserele mai vechi și vocale

Etichetă — element la nivel de bloc, de ex. conținutul etichetei începe întotdeauna pe o linie nouă. După etichetă este adăugată și o întrerupere de linie.

Buna ziua. Recent am avut ocazia să mă ocup de o caracteristică html atât de specifică precum o hartă imagine. Sincer să fiu, nu am avut ocazia să-l folosesc des și apoi, de obicei, totul a fost făcut în zone de formă dreptunghiulară. Dar acesta nu a fost același caz. Sarcina a fost să posteze link-uri către regiuni individuale ale imaginii, care era o hartă a țării și, din păcate, nu se punea problema vreunei pânze sau svg. Numai html numai hardcore! Deci, sarcina a fost stabilită, Google este activat și putem începe.

Teorie

• coorde- coordonatele zonei de selecție
• href- link la care veți merge când faceți clic pe zonă
• nohref- indică faptul că zona nu conține o legătură
• formă- formular de selecție
  • cerc- zona de selecție sub formă de cerc
  • implicit- selectează întreaga zonă a imaginii
  • poli- zona de selectie sub forma unui poligon
  • rect- zona de selectie sub forma unui dreptunghi
• ţintă- determină unde se va deschide linkul

Deoarece zona mea de selecție trebuia să fie poligonală, specificăm valoarea atributului de formă, eticheta de zonă, ca poli - zonă poligonală. În acest mod, sunt indicate coordonatele punctului relativ la colțul din stânga sus, separate prin virgule - x,y. Punctele sunt, de asemenea, separate prin virgule, ceea ce la început provoacă confuzie la citirea unui astfel de cod.

Scriem Paint

Mai întâi, să pregătim aspectul:

Corp ( margine: 0; padding: 20px; font-family: Arial, Helvetica, sans-serif; ) img ( chenar: none; outline: none; display: block; -moz-user-select: none; -webkit-user -select: niciunul; user-select: none; ) .canvas.draw ( culoare-chenar: #3C0; ) .pânză .interior (poziție: relativă; ) .pânză .punct ( lățime: 1px; înălțime: 1px; culoare fundal: #fff; chenar: 1px solid #000 ; overflow: ascuns; poziție: absolut .bar ( margin-bottom: 16px; ) .info (culoare de fundal: #FCFCFC; margine: 1px punctat #CCC; font-size: italic; padding: 8px word-wrap: break-word;
În javascript, totul este destul de simplu În timpul procesului de scriere, am folosit propria bibliotecă de luptă, așa că nu fiți surprinși de funcțiile non-standard va fi redat și coordonatele acestuia vor fi înregistrate.

Var addPoint = function(e)( var e = _.getEvent(e), offset = _.getOffset(nodes["canvas"]), x = e.clientX + _.getDocScrollLeft() - offset, y = e. clientY + _.getDocScrollTop() - offset, node = noduri["canvas"].appendChild(_.node("div", ("clasa":"punct"))); +"px"; node.style.left = x-1+"px"; ;
Apoi vom scrie o funcție care va genera codul html al hărții noastre.

Var renderInfo = function())( var text; _.clearNode(noduri["info"]); noduri["info"].appendChild(_.node("span", " ")); };
) text += "">"; noduri["info"].appendChild(_.node("span", text)); noduri["info"].appendChild(_.node("br")); ) ) nodes["info"].appendChild(_.node("span", "

Să încadram totul într-o clasă, câteva funcții de ajutor, atât. Sper că acest instrument va fi de folos cuiva.

„Am creat un șablon pentru plasarea de link-uri către diferite pagini web (“”) în anumite zone ale acestuia

Acum, dacă dai clic pe formele cu inscripții, se vor deschide paginile corespunzătoare: profil, jurnal sau toate postările din secțiunea „Lecții Photoshop” (atenție! după ce ai transferat blogul pe WordPress și l-am reluat, linkurile nu funcționează! dar lectia ramane relevanta!)

Pentru ca imaginea să funcționeze, am scris aproximativ următorul cod HTML:

Acest cod poate fi introdus în câmpul mesajului (cu butonul „Sursă” apăsat) sau în epigraf...Apropo, există și alte postări pe această temă: „Ce este HTML", "Cod HTML al imaginilor", "

Link imagine” și așa mai departe.

1. Coordonate

Pentru a compune codul de mai sus, mi-am amintit puțină geometrie :)
Sistem de coordonate: axa X - de sus în jos, axa Y - de la stânga la dreapta
Pentru a seta coordonatele unei figuri, trebuie să setați:
- un pătrat (sau dreptunghi), ale cărui laturi sunt paralele cu axele - coordonatele a două unghiuri opuse - X1, Y1 și X2, Y2
- poligon - coordonatele TOATE unghiurile

— cerc — coordonatele centrului și raza. În cazul meu, se dovedește că am nevoie de coordonate— pentru linkul „Profil” (dreptunghi), punctele D, E, F, G, H — pentru linkul „Jurnal” (poligon), Q și lungimea R — pentru linkul „Lecții Photoshop” (cerc). Toate aceste numere din codul HTML de mai sus sunt evidențiate cu roșu.

În plus, trebuie să știți dimensiunea imaginii în pixeli (culoare verde) Nu este nevoie de precizie specială, așa că puteți determina coordonatele folosind „rigla” din Photoshop - pentru a o apela, faceți clic

Ctrl+R A fost mai interesant pentru mine să pun pe altcineva să calculeze coordonatele. Pentru a face asta ma lansez MS Paint

(Start - Toate programele - Accesorii - Paint) și deschideți un desen în el. Când treceți cursorul peste punctele dorite, coordonatele acestora apar în panoul de jos, pe care le notez cu atenție

2. Cod HTML

Hărțile de navigație sunt specificate de etichetă Eticheta hărții include etichete

, care definesc regiunile geometrice ale hărții de desen și legăturile asociate acestora.

— Iată cum mi-am dat seama: pentru a crea o hartă de navigare aveți nevoie de:

— etichete cu descrierea imaginii

— etichete de hartă

etichete de zonă

• În cazul meu, valorile s-au dovedit a fi: latime="640" inaltime="367"
• - dimensiunile imaginii
• src="https://site/f02c73a3cd94.jpg" - adresa imaginii de pe site usemap="# imagine" — denumirea convențională a hărții-imagine
• (poate fi oricare) numele hărții="imagine" (- numele cardului complet

corespunde celor de mai sus)

Valorile pentru zonele de legătură — href — ținta legăturii, forma — forma zonei și coordonatele — coordonate — corespund cu trei zone din imagine.

• dreptunghi „Profil”
• href="https://site/profile/" — adresa paginii de profil
• shape="rect" - denumirea formei „dreptunghi”.

coords="235,61,472,117" — coordonatele punctelor A (235,61) și C (472,117)

• Poligonul „jurnal”
• href="https://site/blog" - adresa paginii de jurnal
• shape="poly" - denumirea formei „poligon”.

coords="235,118,362,118,474,152,457,207,229,146" - coordonatele colțurilor poligonului: punctele D (235.118), E (362.118), F (474.152), G (457.262) și H (457.209)

• Cercul „Lecții Photoshop”
• href="https://site/showjournal.php?journalid=2447247&keywordid=929323" — adresa paginii de postări din secțiunea „Tutoriale Photoshop”
• shape="cercle" - desemnarea formei „cercului”.

coords="551,198,65" — coordonatele cercului: centru — punctul Q (551,198) și raza — R=65

3. Terminați

Am înlocuit toate valorile obținute în codul HTML „sistem” pentru harta imaginii de navigare și am obținut următoarele:

Acesta este codul care, atunci când este folosit, „se transformă” într-o imagine cu zone de legătură.

Dacă găsiți o eroare, evidențiați o bucată de text și faceți clic Ctrl+Enter.

Vlad Merjevici

Hărțile de imagine vă permit să legați linkuri către diferite zone ale aceleiași imagini. Implementat în două diverse opțiuni - server și client. Când se utilizează opțiunea server, browserul trimite o solicitare către server pentru a obține adresa link-ului selectat și așteaptă un răspuns cu informațiile necesare. Această abordare necesită timp suplimentar pentru a aștepta rezultatul și fişiere separate pentru fiecare card imagine.

În versiunea client, harta se află în același document HTML ca și linkul către imagine.

Versiunea client a hărții de imagine

Pentru a indica faptul că o imagine este o hartă, utilizați atributul usemap al etichetei .

Valoarea este un link către o descriere a configurației cardului.

Fila 4

.

Valoarea atributului nume al acestei etichete trebuie să se potrivească cu numele din harta de utilizare.

Pentru a seta zona activă, care este un link către un document HTML, utilizați eticheta

Atributele etichetei AREA

formă

Definește forma zonei active. Forma poate fi sub forma unui cerc (cerc), dreptunghi (rect), poligon (poli).

alt

Adaugă text alternativ pentru fiecare zonă. Servește doar ca comentariu pentru link, deoarece nu este afișat pe ecran.

coorde

Setează coordonatele zonei active. Coordonatele sunt măsurate în pixeli din colțul din stânga sus al imaginii, ceea ce corespunde valorii 0,0. Primul număr este coordonata orizontală, al doilea este coordonata verticală. Lista de coordonate depinde de forma zonei.

Pentru un cerc, sunt specificate trei numere - coordonatele centrului cercului și raza.

Pentru un dreptunghi, coordonatele colțurilor din stânga sus și din dreapta jos.

Pentru un poligon, sunt specificate coordonatele vârfurilor acestuia (Fig. 2).

Orez. 2. Puncte de coordonate pentru poligon

1. Hărțile vă permit să setați orice formă a zonei de legătură. Având în vedere că imaginile sunt de natură dreptunghiulară, nu este posibilă realizarea unei legături grafice de formă complexă, de exemplu pentru a indica o zonă geografică, fără hărți imagine. De regulă, în subiectele geografice, hărțile cu imagini sunt folosite cel mai des.

2. Este mai convenabil să lucrați cu un singur fișier - nu trebuie să vă faceți griji cu privire la unirea fragmentelor individuale, iar desenul poate fi plasat cu ușurință în locul potrivit.

Defecte

1. Nu puteți seta sfatul explicativ și textul alternativ pentru zone individuale. Textul alternativ vă permite să obțineți informații text despre desen când încărcarea imaginii este dezactivată în browser. Deoarece imaginile sunt încărcate după ce browserul a primit informații despre ele, textul de înlocuire al imaginii apare mai devreme. Și pe măsură ce se încarcă, textul va fi înlocuit cu o imagine.

Pentru hărțile cu imagini, această caracteristică este relevantă, deoarece dacă dezactivați vizualizarea imaginilor, ceea ce fac mulți utilizatori, veți ajunge să vedeți un singur dreptunghi gol.

2. Cu o formă complexă a zonei de link, cantitatea de cod HTML crește. Conturul este aproximat printr-un set de segmente drepte pentru fiecare punct al unui astfel de segment, trebuie specificate două coordonate, iar numărul total de astfel de puncte poate fi destul de mare. Pentru dreptate, trebuie remarcat faptul că formele complexe sunt un caz special și sunt folosite destul de rar.

3. Cu cardurile de imagine nu puteți crea diverse efecte care sunt disponibile atunci când tăiați o imagine în fragmente: efect de rulare, animație parțială, optimizare individuală a imaginilor pentru încărcarea lor rapidă.

Utilizabilitate Din punctul de vedere al confortului utilizatorului, hărțile de imagine au un singur avantaj - legături de diferite forme. Acest lucru adaugă claritate prezentării informațiilor - nu ne limităm la forma dreptunghiulară a legăturii și putem folosi legături de configurație complexă pentru propriile noastre scopuri. În toate celelalte privințe, nu sunt de nici un folos - legăturile de text obișnuite sunt mai informative și nu se tem să dezactiveze afișarea imaginilor în browser. Faptul că o imagine se încarcă mai repede decât aceeași imagine, dar tăiată în fragmente și salvată ca set, usor de rezolvat. Fiecare dintre aceste fișiere finale poate fi redus folosind setările individuale de optimizare. Ca rezultat, volumul total al tuturor fragmentelor va ocupa mai puțin spațiu decât o imagine. Nu ar trebui să scadă de factorul psihologic - unei persoane i se pare că un set de imagini mici se încarcă mai repede decât una mare.

Principalul dezavantaj al hărților este că nu există limite clar definite ale legăturilor. Prin urmare, aceste limite trebuie să fie evidențiate folosind diferite mijloace deja în imagine. Dacă imaginea nu se încarcă dintr-un motiv oarecare, atunci înțelegerea setului de link-uri devine foarte problematică.

Opțiuni alternative

Nu există întotdeauna o nevoie urgentă de a utiliza hărți de imagine, așa că ar trebui să rețineți că există și altele opțiuni posibileîndeplinirea sarcinii atribuite.

Folosind Flash

Puteți crea diferite zone de link în videoclipurile Flash folosind funcțiile grafica vectoriala. Datorită capacităților sale extinse, puteți crea meniuri și navigare uimitoare în Flash. Dar și aici se impune prudență pentru a nu pierde pădurea pentru copaci.

Tăierea imaginii

Acesta este unul dintre mijloacele populare în design. În acest caz, o imagine este tăiată folosind programe specialeîn fragmente care sunt în cele din urmă reunite, creând iluzia unei imagini complete. Deși zonele de tăiere pot fi doar dreptunghiulare, în majoritatea cazurilor acest lucru este suficient pentru a crea legături.

Pentru fiecare fragment, puteți selecta cel mai potrivit format grafic în care va fi salvat, parametrii de optimizare și adăugați text alternativ. Apoi, chiar și cu afișarea imaginilor dezactivată, limitele zonelor și textul care înlocuiește imaginea vor fi clar vizibile.

Relua