Am vorbit deja despre cum să faci un desen un link .. în acest capitol vom vorbi despre cum să faci un fragment, o zonă de desen cu un link către un anumit document, precum și despre cum să faci diferite zone din aceeași figură cu legături către documente diferite.
Pentru a realiza această sarcină, nu ne putem lipsi de așa-numitele hărți de navigație.
Să presupunem că avem un desen ca acesta:
Și trebuie să facem astfel încât utilizatorul, făcând clic pe unul dintre aceste „butoane” să urmeze linkul către un anumit document .. de ce avem nevoie pentru asta?
În primul rând, să desemnăm desenul nostru nu ca o imagine grafică obișnuită, ci ca o hartă de navigație prin atribuirea numelui nostru individual acestui desen. Acest lucru se face folosind atributul usemap etichetă
(Cred că nu ar trebui să vi se reamintească faptul că eticheta
are un atribut obligatoriu src care indică calea către o anumită imagine
)
Să numim desenul / harta noastră un nume panou... Va arăta astfel:
usemap = "# panou">
Nu uitați să puneți semnul conform regulilor de sintaxă # zăbrele în fața numelui ..
Ei bine, acum, de fapt, să întocmim o hartă de navigație. Este specificat de etichetă care are un atribut Nume- nume .. prindeți unde conduc? Ei bine, după cum probabil ați ghicit deja, vom indica pe baza cărui desen vom construi harta de navigare indicând numele acesteia ..
Acum să trecem la faptul că vom indica browserului zonele imaginii care vor fi legături și, în același timp, vom scrie căile tranzițiilor către aceste legături. Eticheta preia această sarcină. , nu necesită o etichetă de închidere și are următoarele atribute cu care vom lucra:
href- indică calea către documentul deschis (la fel ca în etichetă )formă- forma zonei de desen care va servi drept legătură. Poate avea una din cele trei valori:
- rect- zona dreptunghiulara
- poli- zona este un fel de poligon
- cerc- aria definită de cerc
Zona dreptunghiulară
Acum harta noastră arată astfel:
De fapt, acum butonul pătrat „verde” a devenit operațional.
Ce puteți vedea făcând clic pe acesta în acest exemplu:
usemap = "# panel"> M-am grăbit puțin cu un exemplu fără să explic cu adevărat esența a ceea ce am scris .. Să ne concentrăm asupra atributelor etichetei .
href = "primer1.html"- aici cred că este clar, aceasta este calea către document, care ar trebui să se deschidă când faceți clic pe „butonul verde”.
Deoarece butonul este pătrat și pătratul, după cum știți, este un dreptunghi „regulat”, atribuim forma zonei de desen unui dreptunghi shape = "rect" .
Și acum partea amuzantă coords = "15,15,82,82"- coordonate .. Pentru un dreptunghi, acestea sunt setate de două puncte conform principiului „X1, Y1, X2, Y2” Unde X1, Y1 este primul punct și, în consecință, X2, Y2 este al doilea. Coordonatele sunt indicate în pixeli. Imaginea / harta noastră are dimensiuni de 300 cu 100 pixeli, pixelul său din stânga sus are coordonatele X = 0, Y = 0, iar cel din dreapta jos este X = 300, Y = 100. Dacă nu este clar, să ne aruncăm în geometrie pentru clasa a cincea ..
Uitați-vă la imagine:
Deci, alegerea unei forme dreptunghiulare shape = "rect" pentru zona noastră sub forma unui buton pătrat, am specificat coordonatele pixelilor săi din stânga sus și din dreapta jos .. care sunt destul de suficiente pentru a indica zona „de lucru” a întregului buton.
Poligon (poligon).
Să ne ocupăm de „butonul galben”, îl avem reprezentat sub forma unui triunghi. Pentru a selecta zona „de lucru” din desenul nostru, atribuim atributul formă sens poli- un poligon, care va defini această zonă ca un fel de poligon, în care coordonatele separate prin virgule vor fi vârfurile sale, poate exista orice număr din ele "X1, Y1, X2, Y2, X3, Y3, X4, Y4. .. X124, Y124 "figura formată din aceste puncte cu vârfurile colțurilor poate avea forma oricărui poligon, atât regulat, cât și neregulat. În cazul nostru, există doar trei unghiuri, de aceea este un triunghi, prin urmare coordonatele sale vor fi setate de trei perechi de valori „X1, Y1, X2, Y2, X3, Y3”
Așa că scriem totul împreună astfel:
shape = "poly" coords = "148,15,185,82,110,82">
Iată o imagine care arată clar de unde provin coordonatele punctelor.
Cerc
Ei bine, ultimul „buton roșu” pe care îl avem este rotund .. deci forma zonei va fi rotundă forma = "cerc"... De data aceasta cu coordonatele, lucrurile stau puțin diferit. Avem nevoie de trei valori X, Y, R. X și Y sunt coordonatele centrului cercului nostru, iar R este lungimea razei în pixeli.
Iată un desen:
Iată un exemplu:
Îl aducem în minte ..
Acum, puțin despre ce altceva ar fi de dorit să facem cu harta noastră înainte de a o „monta” pe orice pagină.
Definiți dimensiunile fixe ale desenului hărții după atribute lăţimeși înălţime
Să scriem un text alternativ, atât pentru întreaga imagine a hărții, cât și pentru zonele sale individuale folosind atributul alt, precum și o descriere a elementelor cu atributul titlu .
Să scăpăm de cadrul de margine .. să facem border = "0".. (păi, dacă îți place mai mult granița, nu o poți face .. nu insist ...)
În cele din urmă, ar trebui să arate cam așa:
width = "300" height = "100" border = "0" alt = "(! LANG: Control Panel" title="Panou de control">
!} Zone de traversare
Uneori este convenabil să formați zona „de lucru” a imaginii prin „amestecarea” diferitelor forme.
Să presupunem că următorul nostru buton arată astfel:
Desigur, puteți defini forma ca un poligon, dar trebuie să setați o mulțime de coordonate pentru partea rotunjită a unui astfel de buton (bine, asta dacă aveți nevoie de o precizie specială în harta de navigare).
Și puteți defini în acest exemplu două forme de dreptunghi rectși cerc cerc așa cum se arată în imagine:
Și în cod, specificați calea către același document:
„Nu este o zonă”
Să vedem un exemplu ... să presupunem că trebuie să creați un astfel de buton:
Dar gaura din el?
Etichetă pe lângă atribut href are atributul opus nohref- o zonă inactivă, adică dacă utilizatorul face clic pe o astfel de zonă, atunci nu se va întâmpla absolut nimic, ceea ce trebuie să realizăm de fapt atunci când facem o "gaură" în harta noastră.
Harta va fi definită de două zone, un cerc inactiv cercși zonă dreptunghiulară activă rectși așa cum se arată în figură, au următoarele coordonate:
După cum sa menționat mai devreme, la traversarea zonelor, cea mai mare prioritate va fi acordată zonei care se află în cod în interiorul etichetei listate pe primul loc
Prin urmare, exemplul va arăta astfel:
Harta este pe server.
Extras din căutare (atribute ale etichetei
):
ismap- imaginea este o hartă de navigare pe server.
Neclar? Apoi citim ..
Cu atribut usemap se pare că ne-am dat seama .. Uite, utilizatorul (clientul), după ce ți-a deschis pagina, simultan cu tot restul conținutului, încarcă „pe partea lui” atât imaginea în sine, cât și harta de navigare către ea, și totul este procesat de browserul său.
Și iată atributul ismap etichetă
spune browserului că există o hartă de navigare pentru această imagine pe server, bine, unde ați postat sau veți publica site-ul dvs. (citiți articolul :). Și acum, când un vizitator (client) face clic pe orice zonă a imaginii cu un astfel de atribut, browserul își va aminti coordonatele acestui clic și le va trimite la server, unde un program special va procesa aceste date și va redirecționa utilizatorului la adresa indicată pe hartă pe server, în conformitate cu coordonatele punctului primit de la browserul clientului.
Este scris astfel:
Unde adresa hărții de navigare de pe orice site .. găzduit pe un anumit server ..
Oricum nu este clar? Dacă da, atunci nu vă deranjați. Folosiți usemap, în opinia mea, o astfel de soluție va fi cea mai bună în majoritatea cazurilor atunci când se utilizează hărți de navigație.
Pentru a determina cu ușurință coordonatele unui punct de pe harta dvs. de navigare, deschideți desenul cu un editor grafic, de exemplu, Paint, de exemplu .. acolo, când mutați indicatorul peste desen, veți vedea două numere care se schimbă, acestea fiind coordonatele pixelilor X și Y din această imagine ... În Paint, această bară este situată în partea de jos a ecranului.
Când creați o pagină cu o hartă de navigare, eticheta
ar trebui să fie întotdeauna deasupra cardului în sine Adică, scrieți așa:
Este posibil, dar nu este necesar .. deoarece la încărcarea paginii, pot apărea probleme, deoarece harta cu markup a fost deja încărcată, dar imaginea în sine nu este încă prezentă ..
Și în ceea ce privește încărcarea ..
În această parte a codului, poate exista orice text lung, tabele, grafică ... dar totuși este mai bine să nu scrieți nimic aici
Și scrieți aici, deoarece, în timp ce pagina se încarcă, utilizatorul, fără să aștepte să se termine, poate încerca să facă clic pe butoanele indicate pe harta de navigare, care până acum nu a fost încă încărcată ..
Salut. Recent s-a întâmplat să mă ocup de o astfel de caracteristică html specifică ca o hartă a imaginilor. Sincer să fiu, nu l-am folosit des și apoi, de obicei, totul se făcea cu zone dreptunghiulare. Dar nu a fost cazul. Sarcina a fost de a posta link-uri către regiuni individuale ale imaginii, care era harta țării și, din păcate, nu s-a pus în discuție nicio pânză sau svg. Numai html doar hardcore! Deci, sarcina este setată, Google este activat și puteți începe.
Teorie
Să începem cu teoria, unde putem merge fără ea. O hartă a imaginii conține două etichete: Hartă- container pentru card și zonă- zona de selecție. Harta nu este limitată la o singură zonă și poate conține un număr nelimitat de ele. Etichetă zonă pe lângă atributele standard, are propriile sale:- coords- coordonatele zonei de selecție
- href- linkul către care se va face tranziția atunci când faceți clic pe zonă
- nohref- indică faptul că zona nu conține linkuri
- formă- forma de selecție
- cerc- zona de selecție sub formă de cerc
- Mod implicit- selectează întreaga zonă a imaginii
- poli- zona de selecție sub formă de poligon
- rect- zona de selecție sub formă de dreptunghi
- ţintă- definește unde se va deschide linkul
Întrucât zona de selecție trebuia să fie poligonală, valoarea atributului de formă, eticheta de zonă, specificăm ca poli - o zonă poligonală. În acest mod, coordonatele punctelor separate prin virgulă în raport cu colțul din stânga sus - x, y. Perioadele sunt, de asemenea, separate prin virgule, ceea ce este confuz la început la citirea unui astfel de cod.
Scrierea vopselei
Nu m-a amuzat perspectiva de a găsi coordonatele fiecărui punct cu Photoshop, de a rescrie manual numerele din fereastra Info, iar instrumentele pe care le-am întâlnit în Google erau prea monstruoase. S-a decis pe genunchiul meu să scriu propriul meu mic script care să vă permită să plasați puncte pur și simplu făcând clic pe zona dorită de pe imagine și să afișați codul terminat.Mai întâi, să pregătim aspectul:
Butoanele vor fi inserate în #bar pentru a controla „pinta”.
Codul html generat va fi afișat în #info.
Corp (margine: 0; umplutură: 20 px; font-family: Arial, Helvetica, sans-serif;) img (margine: none; contur: none; display: block; -moz-user-select: none; -webkit-user -select: none; user-select: none;) .canvas (border: 2px solid # 333; padding: 2px; margin-bottom: 16px; display: inline-block; // display: inline; // zoom: 1; ) .canvas.draw (border-color: # 3C0;) .canvas .inner (position: relative;) .canvas .point (width: 1px; height: 1px; background-color: #fff; border: 1px solid # 000 ; overflow: ascuns; poziție: absolut;) .bar (margin-fund: 16px;) .info (fundal-culoare: #FCFCFC; chenar: 1px punctat #CCC; font-size: 12px; font-style: italic; padding : 8px; word-wrap: break-word;)
În javascript, totul este destul de simplu. În procesul de scriere, am folosit biblioteca mea de luptă, așa că nu fiți surprinși de funcțiile non-standard. Mai întâi, vom atârna evenimentul mousedown pe #canvas, în care punctul de pe imagine va fi redat și coordonatele acestuia vor fi înregistrate.
Var addPoint = function (e) (var e = _.getEvent (e), offset = _.getOffset (noduri ["canvas"]), x = e.clientX + _.getDocScrollLeft () - offset, y = e. clientY + _.getDocScrollTop () - offset, node = nodes ["canvas"]. appendChild (_. node ("div", ("class": "point")))); node.style.top = y-1 + "px"; node.style.left = x-1 + "px"; points.push (("x": x, "y": y, "nod": nod)); e.preventDefault && e. preventDefault (); return false;);
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", " "));
};
Să încadrăm totul într-o clasă, câteva funcții de ajutor, atât. Sper că instrumentele de însămânțare vor fi utile cuiva.
Înțeles și aplicare
Etichetă
Suport pentru browser
| Etichetă | Operă | IExplorer | Margine |
|||
|---|---|---|---|---|---|---|
| da | da | da | da | da | da |
Atribute
Atributele etichetei specificăm atât coordonatele zonei (atributul coords), cât și tipul de formă de care avem nevoie (atributul forma):
Exemplu de utilizare
Să luăm în considerare un exemplu în care, când faceți clic pe o anumită formă dintr-o singură figură, mergeți la diferite pagini web care descriu aceste forme (linkuri către Wikipedia):
Alegeți o formă:
Și așa, în ordine, ceea ce am făcut în acest exemplu:
- A plasat o imagine (tag
), pe care îl vom folosi ulterior la elaborarea imaginii hărții. În atributul usemap, este necesar să specificăm numele imaginii de hartă pe care o vom folosi în element
- Plasați imaginea hărții (eticheta
- Plasați patru etichete care definesc zonele interactive din imaginea hărții:
- Primul noi intrebam zona dreptunghiulară(atribut de formă cu valoare "rect"), corespunde cu al nostru primul imagine ( primele doua valorile corespund colțului din stânga sus, următoarele Două valorile definesc colțul din dreapta sus și din colțul din dreapta jos).
- Al doilea indica zona rotunda(atribut de formă cu valoarea „cerc”), corespunde cu al nostru al doilea imagine ( primul valoarea corespunde coordonatelor de-a lungul axei X, iar al doilea de-a lungul axei y, definește al treilea rază).
- Cu privire la al treileași a patra figură, apoi sunt compuse conform principiului zona poligonala(atribut de formă cu valoarea „poli”). Definiți numărul necesar de puncte din imagine, calculați coordonatele acestor puncte (editor grafic) și indicați într-o astfel de ordine că browserul le poate conecta cu o singură linie. Folosind un triunghi ca exemplu (a treia figură): primul punct (coordonate Xși y vârfuri), al doilea punct (coordonate Xși y colțul din stânga jos) și al treilea punct (coordonate Xși y colțul din dreapta jos).
Vă atrag atenția asupra faptului că dacă eticheta
Să vedem un exemplu de cum arată o hartă de imagine în html:
Când plasați mouse-ul peste zona dreptunghiului verde, puteți vedea că este un link către „#green_link” (eticheta este selectată de exemplu, puteți crea un link către orice pagină de pe Internet). Pătratul roșu are „#red_link”, iar cercul albastru, respectiv, „#blue_link”.
Codul pentru acest exemplu:
img / primer-kartu-izobrazheniy-1.jpg">
După cum puteți vedea din exemplu, codul nu este atât de complicat. Să aruncăm o privire asupra etichetelor pentru crearea unei hărți de linkuri de imagine.
Descrierea exemplului1. Este necesar să creați o grămadă de imagini și hărți
La crearea unui linkmap, atributul usemap este necesar pentru eticheta img.
2. Descrierea cardului
3. Fiecare element al hărții este descris cu o etichetă , care specifică tipul de obiect folosind atributul de formă (dreptunghi, cerc sau poligon) și coordonatele acestuia.
NotăZonele se pot suprapune. În acest caz, legătura va duce la obiectul descris ultima dată.
Atributele etichetei
1. Attribute shape = "object_type" - setează tipul obiectului. Poate lua următoarele valori:
- cerc - cerc;
- rect - dreptunghi;
- poli - poligon;
2. Atribut coords = "valori_cordonate"- definește locația geometrică a obiectului și dimensiunile acestuia.
Punctul de referință al imaginii este colțul din stânga sus. Acestea. dacă ați specificat o căptușeală de 10 înălțime, înseamnă 10 pixeli în jos.
În funcție de tipul de obiect, trebuie să setați valori de coordonate în diferite formate. Toate valorile sunt specificate în pixeli (nu este necesar să scrieți marca px).
- Pentru cercul de tip: coords = (x, y, r), unde x, y sunt coordonatele centrului cercului și 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 inferior drept al dreptunghiului;
- Pentru tip poli: coords = (x1, y1, x2, y2, ..., xn, yn), coordonatele x, y ale fiecărui punct al poligonului sunt indicate secvențial;
3. Atribut href = "hop_address"- stabilește legătura pentru tranziție (în mod similar). În plus față de adresa de salt, puteți utiliza funcțiile JavaScript pentru a efectua unele acțiuni.
4. Atribut țintă = "valoare" - similar cu eticheta definește acțiunea urmăririi unui link. Poate lua valori:
- _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. Titlul atributului = "(! LANG: hint" - выводит всплывающую подсказку. можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки »!}
6. Atributul nohref - face zona inactivă. Folosit la suprapunerea obiectelor. Este rar folosit, dar uneori poate fi o soluție indispensabilă. De exemplu, puteți face un cerc mic într-un cerc mare inactiv.
Zona nohref trebuie să meargă mai întâi.
Cod simplu:
Utilizarea unei hărți a legăturilor în imagine are loc numai într-o gamă restrânsă de sarcini. De exemplu, atunci când creați un fel de schemă sau harta de conducere. În alte cazuri, utilizarea unei hărți pentru a crea meniuri și alte elemente grafice pare nerezonabilă.
Imagini HTML sunt adăugate la paginile web folosind o etichetă ... Utilizarea graficii face paginile web mai atractive din punct de vedere vizual. Imaginile ajută la transmiterea mai bună a esenței și a conținutului unui document web.
Folosind etichete HTML
Inserarea imaginilor într-un document HTML
1. Etichetați ![]()
Element reprezintă imaginea și conținutul său alternativ, care este adăugat folosind atributul alt. Întrucât elementul
este în linie, se recomandă plasarea acestuia într-un element bloc, de exemplu,
Sau
Etichetă are atributul src necesar, a cărui valoare este calea absolută sau relativă către imagine:
Pentru etichetă sunt disponibile următoarele atribute:
| Atribut | Descriere, valoare acceptată |
|---|---|
| alt | Atributul alt adaugă text alternativ pentru imagine. Este afișată în locul în care apare imaginea înainte de a fi încărcată sau când grafica este dezactivată și este afișată și ca un sfat de instrumente atunci când plasați cursorul mouse-ului peste imagine. Sintaxă: alt = "(! LANG: descrierea imaginii" . !} |
| crossorigin | Atributul crossorigin vă permite să încărcați imagini din resurse pe un domeniu diferit folosind cereri CORS. Imaginile încărcate pe pânză folosind cereri CORS pot fi refolosite. Valori permise: anonim - Cererea de origine încrucișată se face folosind un antet HTTP și nu sunt transmise acreditări. Dacă serverul nu furnizează acreditări serverului de la care este solicitat conținutul, imaginea va fi coruptă și utilizarea acesteia va fi restricționată. use-credentials - Cererea de origine încrucișată se efectuează cu acreditările trecute. Sintaxă: crossorigin = "anonim". |
| înălţime | Atributul înălțime setează înălțimea imaginii în px. Sintaxă: înălțime = "300". |
| ismap | Atributul ismap indică faptul că imaginea face parte dintr-o hartă-imagine situată pe server (harta-imagine este o imagine cu zone care pot fi făcute clic). Când faceți clic pe imaginea hărții, coordonatele sunt trimise la server ca un șir de interogare URL. Atributul ismap este permis numai dacă elementul Sintaxă: ismap. |
| longdesc | Adresa URL pentru o descriere extinsă a imaginii, pe lângă atributul alt. Sintaxă: longdesc = "http://www.example.com/description.txt". |
| src | Atributul src specifică calea către imagine. Sintaxă: src = "floare.jpg". |
| dimensiuni | Setează dimensiunea imaginii în funcție de parametrii de afișare. Funcționează numai când este specificat atributul srcset. Valoarea atributului este unul sau mai multe șiruri separate prin virgule. |
| srcset | Creează o listă de surse de imagine care urmează să fie selectate pe baza rezoluției ecranului. Poate fi utilizat împreună cu sau în locul atributului src. Valoarea atributului este unul sau mai multe șiruri separate prin virgule. 
|
| usemap | Atributul usemap specifică imaginea ca hartă a imaginii. Valoarea trebuie să înceapă cu un caracter #. Valoarea este asociată cu valoarea atributului nume sau id al etichetei |
| lăţime | Atributul de lățime setează lățimea imaginii în px. Sintaxă: lățime = "500". |
1.1. Adresa imaginii
Adresa imaginii poate fi specificată integral (URL absolut), de exemplu:
url (http://anysite.ru/images/anyphoto.png)
Sau printr-o cale relativă de la document sau directorul rădăcină site:
url (../ images / anyphoto.png) - calea relativă din document,
url (/images/anyphoto.png) este calea relativă din directorul rădăcină.
Acest lucru este interpretat după cum urmează:
../ - înseamnă să urci un nivel, în directorul rădăcină,
imagini / - accesați folderul cu imagini,
anyphoto.png - Arată către un fișier imagine.
1.2. Dimensiunile imaginii
Fără a seta dimensiunea imaginii, desenul este afișat pe pagină în dimensiune reală. Puteți edita dimensiunile imaginii utilizând atributele de lățime și înălțime. Dacă este setat doar unul dintre atribute, al doilea va fi calculat automat pentru a menține proporțiile imaginii.
1.3. Formate de fișiere grafice
Format JPEG (Grup mixt de experți în fotografie). Imagini JPEG ideale pentru fotografii, pot conține milioane de culori diferite. Comprimă imaginile mai bine decât GIF-urile, dar textul și suprafețele mari de culoare solidă pot deveni murdare.
Format GIF (Format de schimb de grafică)... Ideal pentru comprimarea imaginilor care au zone de culoare solide, cum ar fi sigle. GIF-urile vă permit să setați una dintre culori să fie transparentă, astfel încât fundalul unei pagini web să poată apărea printr-o parte a imaginii. GIF-urile pot include și animații simple. GIF-urile conțin doar 256 de nuanțe, ceea ce face ca imaginile să pară neclare și să nu fie realiste la culoare, precum postere.
Format PNG (Grafică de rețea portabilă)... Include cele mai bune caracteristici ale formatelor GIF și JPEG. Conține 256 de culori și face posibilă transparența uneia dintre culori, în timp ce comprimați imaginile în dimensiuni mai mici decât un fișier GIF.
Formatul APNG (Grafică de rețea portabilă animată)... Format imagine bazat pe Format PNG... Permite stocarea animațiilor și acceptă, de asemenea, transparența.
Format SVG (Grafică vectorială scalabilă)... Un desen SVG constă dintr-un set de forme geometrice descrise în format XML: linie, elipsă, poligon etc. Sunt acceptate atât grafica statică, cât și cea animată. Setul de funcții include diverse transformări, măști alfa, efecte de filtrare, capacitatea de a utiliza șabloane. Imaginile SVG pot fi redimensionate fără degradarea calității.
Format BMP (Imagine bitmap)... Necomprimat (original) bitmap al cărui șablon este o grilă dreptunghiulară de pixeli. Un fișier bitmap constă dintr-un antet, paletă și date grafice. Antetul conține informații despre imaginea grafică și fișierul (adâncimea pixelilor, înălțimea, lățimea și numărul de culori). Paleta este specificată numai în acele fișiere Bitmap care conțin imagini de paletă (8 sau mai puțini biți) și constau din cel mult 256 de elemente. Datele grafice reprezintă imaginea în sine. Adâncimea culorii în acest format poate fi de 1, 2, 4, 8, 16, 24, 32, 48 de biți pe pixel.
Format ICO (Pictograma Windows)... Format de stocare pictogramă fișier în Microsoft Windows... De asemenea, pictograma Windows este utilizată ca pictogramă pe site-urile de pe Internet. Este o imagine a acestui format care este afișată lângă adresa site-ului sau marcajul în browser. Un fișier ICO conține una sau mai multe pictograme, dimensiunea și culoarea fiecăreia dintre ele fiind setate separat. Dimensiunea pictogramei poate fi oricare, dar cele mai frecvent utilizate pictograme pătrate cu laturi de 16, 32 și 48 pixeli.
2. Etichetați
Etichetă
Atributul nume este disponibil pentru etichetă, care specifică numele hărții. Valoarea atributului nume pentru etichetă
Element
3. Etichetați
Etichetă descrie un singur hotspot într-o hartă a imaginii din partea clientului. Elementul nu are etichetă finală. Dacă un hotspot se suprapune peste altul, atunci va fi implementat primul link din lista de domenii.
| Atribut | Scurta descriere |
|---|---|
| alt | Specifică text alternativ pentru zona activă a hărții. |
| coords | Determină poziția zonei pe ecran. Coordonatele sunt specificate în unități de lungime și separate prin virgule: pentru cerc- coordonatele centrului și razei cercului; pentru dreptunghi- coordonatele colțurilor din stânga sus și din dreapta jos; pentru poligon- coordonatele vârfurilor poligonului în ordinea dorită, se recomandă și indicarea ultimelor coordonate, egale cu prima, pentru completarea logică a figurii. |
| Descarca | Completează atributul href și îi spune browserului că resursa ar trebui încărcată în momentul în care utilizatorul face clic pe link, în loc să o deschidă, de exemplu (ca un fișier PDF). Dând un nume atributului, dăm astfel un nume obiectului încărcat. Este permisă utilizarea atributului fără a se specifica valoarea acestuia. |
| href | Specifică adresa URL pentru link. Se poate specifica o adresă de legătură absolută sau relativă. |
| hreflang | Specifică limba documentului web conectat. Folosit numai împreună cu atributul href. Valorile acceptate sunt o abreviere constând dintr-o pereche de litere care denotă un cod de limbă. |
| mass-media | Stabilește pentru ce tipuri de dispozitive va fi optimizat fișierul. Valoarea poate fi orice interogare media. |
| rel | Completează atributul href cu informații despre relația dintre documentul curent și documentul legat. Valori acceptate: alternativ - un link către o versiune alternativă a documentului (de exemplu, o pagină imprimabilă, o traducere sau o oglindă). autor - link către autorul documentului. marcajul este o adresă URL persistentă utilizată pentru marcaje. ajutor - link pentru ajutor. licență - un link către informațiile privind drepturile de autor pentru acest document web. next / prev - indică relația dintre adresele URL individuale. Datorită acestui marcaj, Google poate stabili că conținutul acestor pagini este legat într-o succesiune logică. nofollow - interzice motor de căutare urmați linkurile de pe această pagină sau un link specific. noreferrer - indică faptul că, în urma unui link, browserul nu ar trebui să trimită un antet de solicitare HTTP (Referrer), care înregistrează informații despre ce pagină a venit vizitatorul site-ului. prefetch - indică faptul că documentul țintă ar trebui să fie memorat în cache, adică browserul din fundal încarcă conținutul paginii în memoria cache. căutare - Indică faptul că documentul țintă conține un instrument de căutare. etichetă - indică cuvânt cheie pentru documentul curent. |
| formă | Setează forma hotspotului pe hartă și coordonatele sale. Poate lua următoarele valori: rect - zona activă de formă dreptunghiulară; cerc - zonă activă sub formă de cerc; zona poliactivă sub formă de poligon; implicit - zona activă ocupă întreaga zonă a imaginii. |
| ţintă | Indică unde va fi încărcat documentul atunci când urmați linkul. Este nevoie de următoarele valori: _self - pagina este încărcată în fereastra curentă; _blank - pagina se deschide într-o nouă fereastră de browser; _parent - pagina este încărcată în cadrul părinte; _top - pagina este încărcată în fereastra completă a browserului. |
| tip | Specifică tipul MIME al fișierelor la care se face referire, adică extensie de fișier. |
4. Un exemplu de creare a unei hărți de imagini
1) Marcăm imaginea originală pe zonele active ale formei dorite. Coordonatele zonelor pot fi calculate folosind un program de procesare a fotografiilor, de exemplu, Adobe Photoshop sau A picta.
Orez. 1. Un exemplu de marcare a imaginii pentru crearea unei hărți 2) Setați numele hărții adăugând-o la etichetă
Jpg "alt =" (! LANG: flowers_foto" width="680" height="383" usemap="#flowers">
!}
Orez. 2. Un exemplu de creare a unei imagini de hartă, când apăsați cursorul mouse-ului pe o floare, mergeți la o pagină cu o descriere
