Hărți de navigație

Pentru a îndeplini această sarcină, nu putem face fără așa-numitele hărți de navigație.

Să presupunem că avem această imagine:

și trebuie să facem acest lucru, astfel încât utilizatorul care face clic pe unul dintre aceste "butoane" să facă clic pe un link către un anumit document. De ce avem nevoie de asta?







Mai întâi, să desemnăm desenul nostru nu ca o imagine grafică obișnuită, ci ca o hartă de navigare care îi atribuie numele individual acestui desen. Aceasta se face folosind atributul usemap al etichetei (Cred că nu trebuie să vi se amintească faptul că eticheta are atributul obligatoriu src care indică calea către o anumită imagine)

Să numim desenul / cardul nostru panoul de nume. Acesta va arata astfel:

Nu uităm să introducem semnul # în fața numelui după regulile sintaxei.

Acum, de fapt, vom compila o hartă de navigație. Este specificat de etichetă care are atributul name. prindeți ceea ce conduc eu? După cum probabil ați ghicit, vom indica pe baza imaginii pe care o vom construi harta de navigare prin specificarea numelui ei ..

href - indică calea deschiderii documentului (la fel ca în etichetă )
forma este forma zonei de desen care va servi ca o legătură. Poate avea una din cele trei valori:
  • rect - zona dreptunghiulara
  • poli - zona este un anumit poligon
  • cerc - zona definită de un cerc
coordonate - coordonatele formelor

Acum, harta noastră dobândește acest formular:



De fapt, acum butonul "verde" pătrat a devenit un buton de lucru.

În ceea ce puteți verifica dând clic pe el în acest exemplu:



Harta de navigație










Un pic se grăbea spre exemplu, fără a explica esența a ceea ce a fost scris. Ne vom concentra pe atributele etichetei .

href = "primer1.html" - aici cred că este de înțeles, aceasta este calea spre documentul care ar trebui să se deschidă când faceți clic pe butonul "verde".

Din moment ce avem un buton pătrat, iar pătrat așa cum o știm „drept“ zonă de dreptunghi de desen indică forma de formă dreptunghiulară = „RECT“.

Și acum cele mai interesante coarde = "15,15,82,82" - coordonate. Pentru dreptunghiului, acestea sunt date două puncte pe principiul „X1, Y1, X2, Y2“ În cazul în care X1, primul punct U1- și, în consecință, X2, Y2 doua -ORAȘUL. Coordonatele sunt indicate în pixeli. Desenul / harta măsoară 300 de 100 de pixeli, cel mai înalt pixel din stânga are coordonatele X = 0, Y = 0 și cel mai mic drept X = 300, Y = 100. Dacă nu este clar, vom intra în geometrie pentru clasa a cincea.

Uită-te la imagine:

Așadar, alegerea formei rectangulare a formei "rect" pentru zona noastră sub forma unui buton pătrat, am indicat coordonatele pixelilor din stânga și din dreapta jos. care este suficient pentru a indica zona "de lucru" a întregului buton.

Zaymomsya „buton galben“, l-am prezentat sub forma unui triunghi. Pentru a evidenția o zonă „de lucru“ din figura noastre, vom atribui valoarea atributului formă poli - un poligon, care va defini acest domeniu, ca un poligon, unde coordonatele separate prin virgula va fi nodurile sale, pot exista orice număr de „X1, Y1, X2 , Y2, X3, Y3, X4, Y4 ... H124, U124 „, o cifră formată prin aceste puncte din colțurile de sus pot lua forma oricărui poligon ca drept și greșit. În acest caz, unghiul de toate cele trei, el și triunghiul, astfel încât coordonatele sale sunt specificate de trei perechi de valori „X1, Y1, X2, Y2, X3, Y3“

Deci toți împreună scriem astfel:

Iată un desen care arată clar unde provin coordonatele punctelor.



Harta de navigație











Ultimul "buton roșu" este rotund. atunci forma regiunii va avea forma circulară = "cerc". De data aceasta cu coordonatele, situația este puțin diferită. Avem nevoie de trei valori ale lui X, Y, R. X și Y sunt coordonatele centrului cercului nostru, iar R este lungimea razei în pixeli.



Harta de navigație












Acum, puțin despre ce altceva ar fi de dorit să faceți cu harta noastră înainte de ao "monta" în orice pagină.

Definiți dimensiunile fixe ale plăcii de desen cu atributele de lățime și înălțime

Vom scrie un text alternativ, atât pentru întregul desen al hărții, cât și pentru zonele sale individuale folosind atributul alt. și descrierea elementelor cu atributul de titlu.

Să scăpăm de cadranul curburii. facem border = "0". (bine, dacă vă place mai mult cu bordură, nu puteți face acest lucru.) Eu nu insist ..)

În cele din urmă ar trebui să arate ceva de genul:



Harta de navigație






Buton verde
Butonul galben
Butonul roșu



Uneori este convenabil să se formeze o zonă "de lucru" a imaginii "amestecând" diferite forme.

Să presupunem că butonul nostru următor arată astfel:

Desigur, puteți determina forma poligonului, dar va trebui să ceară o mulțime de coordonate pentru partea rotunjită a unui astfel de buton (bine, dacă aveți nevoie de o precizie specială în harta de navigare).

Și puteți defini în acest exemplu două forme de dreptunghi dreptunghi și cerc cerc așa cum se arată în imagine:

În cod, specificați calea către același document:



Harta de navigație











Cu toate acestea, merită să ne amintim că, dacă referirile la diferitele forme conduc la diferite documente, apoi făcând clic pe zona de intersecție a cifrelor noastre de vizitatori vor trece de-a lungul link-ul, al cărui cod zonă este listat mai întâi. în acest caz un cerc.

Luați în considerare exemplul. să presupunem că trebuie să faceți acest buton:

Hărți de navigație

Cum rămâne cu gaura din ea?

etichetă în plus față de atributul href este antiteza valorii atributului nohref - zona inactivă, adică, în cazul în care utilizatorul face clic pe o astfel de zonă, atunci absolut nimic nu se va întâmpla, ceea ce avem de fapt nevoie pentru a realiza în fabricarea de „găuri“ în harta.

Harta va fi specificată de două zone, un cerc de cerc inactiv și o zonă rectală rectangulară activă și, după cum se arată în desen, au următoarele coordonate:

Așa cum am menționat mai devreme, atunci când se intersectează regiuni, cea mai mare prioritate va fi zona care se află în interiorul codului din interiorul etichetei indicată mai întâi

Prin urmare, exemplul va arăta astfel:



Harta de navigație











Extras din director (atributele tag-urilor ):

usemap - imaginea este o carte de navigare pe partea clientului.
ismap - imaginea este o hartă de navigare pe server.

Nu este clar? Apoi am citit ..

Încă nu este clar? Dacă da, atunci nu te obosi. utilizați usemap. în opinia mea, această soluție va fi cea mai bună în majoritatea cazurilor atunci când se utilizează hărți de navigație.

Când creați o pagină cu o hartă de navigare, eticheta ar trebui să fie întotdeauna deasupra cărții în sine Adică scrieți astfel:



este posibil, dar nu este necesar. deoarece atunci când încărcați o pagină, s-ar putea să existe probleme, deoarece harta cu marcajul a fost deja încărcată și desenul nu este încă disponibil.

Și mai mult în ceea ce privește încărcarea ..

În acest punct al codului pot fi ceva ce vă place, text lung, tabele, grafică. dar este mai bine să nu scrieți nimic aici



O scriu aici, pentru că în momentul în care pagina este încărcată, utilizatorul nu este în așteptare pentru finalizarea acestuia, poate încerca să apăsați butoanele indicate pe harta de navigație, care de data aceasta nu a fost încă încărcat.












Articole similare

Trimiteți-le prietenilor: