Care sunt hărțile de imagine sunt necesare. Imagine de hartă în HTML

Harta Imaginei (Harta Imagine) Vă permite să legați link-urile la fragmentele de imagine. Făcând clic pe părțile individuale ale imaginii, utilizatorul poate comuta la o anumită legătură cu diferite pagini web.

Harta imaginii este determinată de o pereche de etichetă … . Documentul HTML poate conține mai multe carduri de imagine, astfel încât fiecare hartă trebuie să fie atribuită unui nume unic care este determinat de atribut. nume..

Harta imaginii este alcătuită din secțiuni ale imaginii și a legăturilor corespunzătoare. Descrie site-ul imaginii și îl pune în linie cu o singură legătură cu etichetă .

Tag-ul atributelor

Coordonatele implicite sunt măsurate în pixeli.

Originea coordonatei este colțul din stânga sus al ecranului, adică

Exemple de diferite forme de zone de carte de imagine

Dacă cele două zone descrise sunt suprapuse reciproc, atunci se utilizează referința aparținând primului dintre aceștia. Această caracteristică poate fi utilizată într-o situație în care utilizatorul face clic pe un punct care nu aparține niciuneia dintre regiunile cardului, care a determinat cea mai recentă hartă a cardului ca o lățime de dreptunghi și pe toată imaginea.

Pentru a utiliza imaginea ca hartă, în etichetă Trebuie să introduceți un atribut suplimentar. uSEMAP.Definirea numelui hărții imaginii. Înainte ca acest nume să fie semnul "#".

Un exemplu de utilizare a hărții imaginii

Când faceți clic pe diferite zone ale acestei imagini, culoarea textului corespunzător se schimbă.

"Am făcut o piesă de prelucrat pentru a găzdui legăturile către diferite zone web definite (" ")

Acum, dacă faceți clic pe figurile cu inscripții, paginile corespunzătoare se vor deschide: profil, jurnal sau toate postările din secțiunea "Lecții Photoshop" (atenție! După transferarea blogului la WordPress și modificările sale, legăturile nu funcționează! Dar lecția rămâne relevantă!)

Pentru ca imaginea să funcționeze, am scris despre un astfel de cod HTML:

Acest cod poate fi introdus în câmpul mesajului (când este apăsat butonul "SOURCE") sau la epigraf ...

Apropo, există alte posturi pe tema: "Ceea ce este html ","Codul HTML de desene ","Link imagine "și așa mai departe.

1. Coordonatele

Pentru a compila codul specificat, mi-am amintit o mică geometrie :)

Sistemul de coordonate: x axa - sus în jos, axa y - de la stânga la dreapta
Pentru a specifica coordonatele cifrei, trebuie să instalați:
- pătrat (sau dreptunghi), ale căror laturi sunt paralele cu axele - coordonatele celor două unghiuri opuse - X1, Y1 și X2, Y2
- Poligon - Coordonatele tuturor unghiurilor
- coordonatele și raza centrului cercului.

În cazul meu, se dovedește, coordonatele punctelor A, C sunt pentru referință "profil" (dreptunghi), puncte D, E, F, G, H - pentru linkul "Jurnal" (poligon), q și lungime R - pentru referință "Lecții Photoshop" (Cercul). Toate aceste numere în codul HTML sunt evidențiate în roșu. În plus, trebuie să cunoașteți dimensiunea imaginii în pixeli (verde)

Nu este nevoie de o precizie specială, deci este posibil să se determine coordonatele cu ajutorul "liniei" în Photoshop - pentru ao numi la apel Ctrl + R.

Am fost mai interesant pentru altcineva să calculeze coordonatele. Pentru această lansare MS vopsea. (Start - Toate programele - Standard - Paint) și deschideți un desen în el. Când depuneți cursorul la punctele dorite din panoul de jos, coordonatele lor apar ca înregistrarea cu atenție

2. Codul HTML.

Cardurile de navigare sunt setate de etichetă

Harta tag include etichete care definesc câmpurile geometrice ale desenului și referințelor asociate.

Mi-am dat seama - să creez un card de navigare necesar:

— etichete cu descrierea imaginii

— tag-uri de card.

— etichete regiuni

În cazul meu, valorile s-au dovedit a fi:

lățime \u003d. "640" Înălțime \u003d. "367" - Dimensiunile imaginii
src \u003d "https: //syt/f02C73A3CD94.jpg" - adresa imaginii de pe site
uSEMAP \u003d "# imagine " - Numele de imagine condiționată (poate vreunul)
numele hărții \u003d. "Imagine" - Numele hărții. (in totalitate corespunde celor de mai sus)

Valori pentru zone de legătură - HREF - ținta legăturii, forma - forma zonei și coordonatelor - Coordonate - corespund celor trei zone (zona) din imagine.

Dreptunghi "profil"

hREF \u003d "HTTPS: // site / profil /" - Adresa paginii profilului
forma \u003d "rect" - desemnarea formularului "dreptunghi"
coordonate \u003d "235,61,472,117" - Coordonatele punctelor A (235.61) și C (472,117)

Poligon "Jurnal"

hREF \u003d "HTTPS: // site / blog" - Adresa paginii de jurnal
forma \u003d "poli" - desemnarea formularului "Poligon"
coords \u003d "235,118,362,118,474,152,457,207,29,146" - Coordonatele unghiurilor poligonului: punctele D (235,118), E (362,118), F (474,207), G (457,207) și H (229,146)

Cercul "Lecții" Photoshop "

href \u003d "https: //syt/showjournal.php? Jurnalid \u003d 2447247" - adresa postărilor postărilor din secțiunea "Lecții Photoshop"
forma \u003d "cerc" - desemnare "cerc"
coords \u003d "551,198,65" - Coordonatele cercului: Centrul - punctul Q (551,198) și Radius - R \u003d 65

3. Finalizați

A submolat toate valorile obținute în "Sistemul" codului HTML pentru imaginea hărții de navigație și primite următoarele:

Acesta este acest cod atunci când utilizați "transformă" în imagine cu zone de legătură.

Pentru instruire există o "versiune ușoară" ușoară a creării legăturilor - Post "Training: Link-uri în imagine"

Dacă ați găsit o greșeală, selectați fragmentul de text și faceți clic pe Ctrl + ENTER..

În acest articol, vom lua în considerare cum să facem o carte de imagine client, când faceți clic pe o anumită zonă din care, vom putea merge la o anumită legătură. Maparea hărților pot fi rareori găsite pe site-uri, deoarece acest proces este destul de consumator de timp, dar dacă doriți să vă surprindeți vizitatorii cu un formular neobișnuit pentru referințe și aveți timp liber pentru auto-educație, atunci acest articol este pentru dvs.

Etichetă Folosit pentru a determina cartela de imagine. Cardul de imagine este o imagine cu o zonă activă definită. Element Conține o serie de etichete care determină zonele interactive din cardul de imagine, adică Când faceți clic pe o anumită zonă a imaginii, apar anumite acțiuni, de exemplu, o pagină separată se deschide cu o descriere a acestei secțiuni a imaginii.

Elementul de nume al atributului este obligatorie, este asociată cu atributul elementului USEMAP (Creează o legătură între imagine și card).

Atribute etichetă Indicăm atât coordonatele zonei (atributul coordonatelor), cât și tipul de cifre de care aveți nevoie (forma de formă):

Exemplu de utilizare

Să luăm în considerare un exemplu în care, atunci când faceți clic pe o anumită figură într-o singură imagine, există o tranziție către diferite pagini web care descriu aceste cifre (legături cu Wikipedia):

</span>Exemplu utilizând eticheta <map>

Alegeți o figură:

"4 cifre sunt disponibile pentru alegere" > "Pătrat roșu"> coords \u003d "200,75,50" href \u003d "verde.html" alt \u003d "(! Lang: Cercul verde." > !} "Triunghiul albastru"> "450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href \u003d "galben.html" alt \u003d "(! Lang: stea galbenă" > !}

Și astfel, în scopul a ceea ce am făcut în acest exemplu:

Plasat imaginea (etichetă ), Pe care vom folosi ulterior la elaborarea unei cartele de imagini. În atributul USMAP, trebuie să specificați numele cardului de imagine pe care îl vom folosi în element (Este necesar să specificați zăbrele înainte de nume).

Plasați harta imaginii (etichetă ), setați singurul atribut obligatoriu al elementului de nume (nume). Rețineți că, spre deosebire de etichetă Punem un nume fără o rețea, trebuie să coincidă altfel.

Punem patru etichete
care definesc zone interactive pe hartă:
- Primul Noi intrebam regiunea dreptunghiulară (Atribut de formă cu valoarea "rect"), se potrivește cu noi primul Imagine ( primele doua Valorile corespund colțului din stânga sus, următoarele două Valorile definesc unghiul superior și inferior).
- Al doilea Indica zonă rotundă (Atributul de formă cu valoarea "cerc"), se potrivește cu noi al doilea Imagine ( primul Valoarea corespunde coordonatelor de-a lungul axei x.și al doilea de-a lungul axei y., în al treilea rând, determină rază).
- Cu privire la arret și a patra figurăApoi sunt întocmite pe principiu regiunea poligonală (Atribut de formă cu "poli"). Definiți numărul necesar de puncte de pe imagine, calculați coordonatele acestor puncte (editor grafic) și specificați în această comandă astfel încât browserul să le conecteze la o singură linie. Pe exemplul unui triunghi (al treilea desen): primul Punct (coordonate x. și y. noduri) al doilea Punct (coordonate x. și y. colțul inferior stâng) și subțire Punct (coordonate x. și y. colțul inferior).

Vă atrag atenția asupra faptului că dacă eticheta are un număr de sarcină practică 26.

Nuanţă: Pentru puritatea sarcinii practice, propun ca primul punct de a folosi partea superioară a stelei și de a muta în sensul acelor de ceasornic. Ca valoare a atributului HREF, am indicat # În acest caz, acționează ca un fișă (stați pe aceeași pagină), puteți face tranziția la orice pagină.

prompt: Pentru a obține coordonatele imaginii, utilizați editorul de imagini, chiar cel mai simplu editor, de exemplu, A picta.Afișează coordonatele cursorului. Scrieți coordonatele pe foaie sau într-un fișier separat și efectuați valorile de pe pagină.

Dacă întâmpinați dificultăți în efectuarea unei sarcini, verificați codul paginii prin deschiderea unui exemplu într-o fereastră separată și citiți-o cu atenție.

Salutare tuturor. Cu tine Bernatsky Andrey.

În această lecție, vă voi spune cum să creați hartă Imagini în HTML.

Imaginea hărții. - Aceasta este o imagine, poate o fotografie care are mai multe zone active.

De exemplu, când apăsați mouse-ul în zona activă, mergeți la o anumită adresă URL. Dacă stați în Vkontakte.ru, există un exemplu de imagine a hărții - acest lucru este sărbătorit în fotografie, iar când depuneți cursorul mouse-ului pe o persoană marcată în fotografie, numele și prenumele sale sunt afișate și când tu Faceți clic pe mouse, mergeți la pagina acestei persoane.

În primul rând, vă ofer o versiune video a acestei lecții:

Este destul de corect. Luăm orice fotografie cu prietenii. Este mai bine să o introduceți în blocul dvs. separat.

XHTML.

Mi-am luat fotografia, de exemplu.

Pentru div a stabilit iD. Pentru a putea atribui anumite liniuțe sau totuși, ceea ce va fi necesar. Nu voi întreba nimic în exemplul meu.

Parametrul principal al etichetei img. În acest caz, este uSEMAP \u003d "# img-nav". El indică hartă cu ce nume ne vom referi.

XHTML.

Mergem în ordine.

- Valoarea parametrului de nume trebuie să se potrivească cu valoarea etichetei IMG a parametrului USMAP, numai la eticheta de hartă este înregistrată fără un simbol #.

Parametru formă Etichetă - Afișează ce tip de zonă va fi. Pe ceea ce va fi zona noastră, arată valoarea parametrului formă:

rect - indică faptul că zona va fi sub forma unui dreptunghi.

poli este un poligon arbitrar.

cerc - zona va fi sub forma unui cerc.

Parametru coordonate. Conține coordonatele zonei noastre.

În cazul în care un forma \u003d "rect"Aceasta indică coordonatele unghiului superior stâng și al dreptului inferior. Adică, prima pereche de numere indică partea stângă sus, iar a doua pereche de numere este în colțul din dreapta jos.

În cazul în care un forma \u003d "poli"Sunt indicate coordonatele fiecărui top al poligonului. forma \u003d "Poly" Coords \u003d "80,100,150,100,210,40,300,40,300,110" În acest caz, coordonatele primelor vârfuri vor fi de 80.100, al doilea 150.100, al treilea - 210,40, al patrulea - 300.40, al cincilea - 300,110.

În cazul în care un forma \u003d "cerc", Specificați coordonatele centrului și ale razei. forma \u003d "cerc" Coords \u003d "300,300,100" Aici coordonatele centrului 300.300 și raza 100.

titlu \u003d "(Lang: Andrey" alt="Andrey." !} Parametrii deja familiari. Nu mă voi opri asupra lor.

Codul complet este prezentat mai jos:

XHTML.

Salutări, prieteni. În acest videoclip, vom continua conversația despre hărțile imaginilor din HTML. Dar mai întâi, să ne amintim despre ce am vorbit în trecut. Faptul este că aceste videoclipuri sunt destul de strâns legate între ele și să înțeleagă ceea ce trebuie să vedem videoclipul anterior din secțiunea imagine.

În ultima lecție video, am început cunoștință cu hărți de imagine în HTML. Ne-am uitat la modul în care ar trebui să arate în cele din urmă, cu toate acestea, cu utilizarea scripturilor. Un pic vorbește despre coordonate. Adică cum le vom defini. După cum vă puteți aminti, am optat pe una dintre căi, aceasta este o modalitate folosind un atribut isMap, deoarece, după părerea mea, această metodă de determinare a coordonatelor este cea mai simplă și mai puțin dificilă, ceea ce înseamnă că este potrivit pentru noi .

Ca rezultat, în trecut, am făcut o legătură. Și apoi din imagine a făcut o imagine de carte de imagine care ne va ajuta să determinăm coordonatele zonelor active.

Acum este timpul să procedați cu crearea directă a unei hărți a imaginii în HTML. În acest videoclip, acoperăm o cantitate destul de mare de informații, începând cu teoria și trecerea spre practică.

Să începem cu studiul a două etichete HTML mai multe, acestea sunt etichete și . Aceste etichete sunt concepute pentru a crea o carte de imagine într-un document HTML.

Harta Tag-ului HTML.

Etichetă Creează un anumit container în care vor fi indicate zonele active. Când adăugați etichetă În documentul HTML, nu vom vedea niciun fel de modificări pe pagină, deoarece această etichetă nu adaugă nicio informație. Pur și simplu creează un container care va denota începerea cartelei imaginii și finalizarea acesteia.

Această etichetă are un atribut de nume obligatoriu. În care trebuie să specificăm numele cardului nostru de imagine. În plus, merită remarcat faptul că această etichetă nu este un element bloc, ceea ce înseamnă că este necesar să îl înregistrați în interiorul elementului bloc, de exemplu, o etichetă de paragraf sau o etichetă universală Div.

Zona de etichetă HTML.

Etichetă Responsabil pentru indicarea zonelor active din interiorul containerului . Este această etichetă HTML care definește o zonă activă în interiorul imaginii, indică faptul că cifra pe care o folosim, indică descrierea, utilizând atributul obligatoriu ALT, și, cel mai important, utilizând atributul coordonator al etichetei Putem specifica coordonatele zonelor de hărți active.

Aici, de asemenea, vreau să menționez ceea ce am uitat să spun într-o lecție video că această etichetă este ușor înlocuită de etichetă pentru a indica hyperlinkul în documentul HTML. Adică etichetă . Dacă vă amintiți, eticheta Există exact aceleași atribute de formă și coordonate care sunt concepute special pentru a indica figura de bază și coordonatele acesteia.

Determinarea coordonatelor pătratului, dreptunghiului, cercului și poligonului.

De asemenea, în această lecție video vom analiza în mod foarte detaliat cum să determinăm corect coordonatele pentru o anumită figură. Câte coordonate ar trebui să fie pentru o anumită figură. Acest lucru se datorează faptului că, pentru fiecare figură de bază, există un set de coordonate și procedura de primire a acestora.

În primul rând, considerăm în detaliu în teorie cum să determinăm coordonatele pentru pătrat, apoi pentru cerc și în cele din urmă pentru poligon.

După aceea, pe un exemplu de viață, vom defini coordonatele pătratului și dreptunghiului. Apoi definim coordonatele cercului. În cele din urmă, indicăm coordonatele triunghiului, care transformă rândul său la rolul unui poligon.

În general, acest videoclip va fi un avantaj foarte util pentru cei care au devenit interesați de crearea de carduri imagine în HTML.

Lecția video: Crearea unui card electoral în HTML.

Directorul HTML și alte materiale pot fi descărcate!

În următorul videoclip, vom studia în cele din urmă subiectul creării de carduri de imagine, să vorbim despre ultimul atribut al etichetei USEMAP, care ne va ajuta să conectăm o imagine cu o hartă a imaginii. Și să ia în considerare alte câteva exemple de viață de imagini ale imaginilor pe imagini diferite.