Ce trebuie să știți
• Utilizați o imagine de dimensiune normală pe care browserul nu o va redimensiona. De asemenea, veți avea nevoie de un editor de imagini și de un editor HTML sau de text.
• Când introduceți imaginea, adăugați un atribut suplimentar pentru a identifica coordonatele hărții.
• De exemplu:
Acest articol explică cum să creați hărți imagine folosind etichete HTML în loc de un editor de hărți imagine. Majoritatea editorilor de imagini vă vor arăta coordonatele mouse-ului atunci când indicați imaginea, adică toate datele de care aveți nevoie pentru a începe să utilizați hărțile de imagine.
Crearea unei hărți imagine
Pentru a crea o hartă imagine, mai întâi selectați o imagine care va servi drept bază pentru hărți. Imaginea ar trebui să aibă „dimensiune normală”, adică nu trebuie să utilizați o imagine atât de mare încât browserul să o scaleze.
Când inserați imaginea, veți adăuga un atribut suplimentar care identifică coordonatele hărții:
Când creați o hartă imagine, creați o zonă pe care se poate face clic pe imagine, astfel încât coordonatele hărții trebuie să se alinieze cu înălțimea și lățimea imaginii selectate. Hărțile acceptă trei tipuri diferite de forme:
- rect-un dreptunghi sau o figură cu patru fețe
- poli-un poligon sau o figură cu mai multe fețe
- cerc-un cerc
Pentru a crea zonele, trebuie să izolați coordonatele specifice pe care intenționați să le mapați. O hartă poate consta dintr-una sau mai multe zone definite pe imagine care, atunci când se dă clic, deschid un hyperlink nou.
Pentru un dreptunghi, mapați doar colțurile din stânga sus și din dreapta jos. Toate coordonatele sunt listate ca x, y (peste, sus). Deci, pentru colțul din stânga sus 0, 0 și colțul din dreapta jos 10, 15, ar trebui să tastați 0, 0, 10, 15. Apoi îl includeți pe hartă:
Pentru un poligon, mapați fiecare coordonată x, y separat. Browserul Web conectează automat ultimul set de coordonate cu primul; orice în interiorul acestor coordonate face parte din hartă.
Formele de cerc necesită doar două coordonate, cum ar fi dreptunghiul, dar pentru a doua coordonată, specificați raza sau distanța de la centrul cercului. Deci, pentru un cerc cu centrul la 122, 122 și o rază de 5, ați scrie 122, 122, 5:
Toate zonele și formele pot fi incluse în aceeași etichetă de hartă:
Considerații
Hărțile de imagine erau mult mai frecvente în era Web 1.0 a anilor 1990, iar la începutul anilor 2000, hărțile de imagine au format adesea baza navigării unui site web. Un designer ar crea un fel de imagine pentru a indica elementele de meniu, apoi ar stabili o hartă.
Abordările moderne încurajează designul receptiv și folosesc foi de stil în cascadă pentru a controla plasarea imaginilor și a hyperlinkurilor pe o pagină.
Deși eticheta de hartă este încă acceptată în standardul HTML, utilizarea dispozitivelor mobile cu factori de formă mici poate duce la probleme neașteptate de performanță cu hărțile imagine. În plus, problemele legate de lățimea de bandă sau imaginile rupte pun în discuție valoarea unei hărți de imagine.
Așadar, nu ezitați să continuați să utilizați această tehnologie stabilă și bine înțeleasă, știind că există alternative mai eficiente în vogă în prezent la designerii web.