Čo by ste mali vedieť
• Použite obrázok normálnej veľkosti, ktorý prehliadač nezmení. Budete tiež potrebovať editor obrázkov a HTML alebo textový editor.
• Pri vkladaní obrázka pridajte ďalší atribút na identifikáciu súradníc mapy.
• Napríklad:
Tento článok vysvetľuje, ako vytvoriť obrázkové mapy pomocou značiek HTML namiesto editora obrázkových máp. Väčšina obrázkových editorov vám ukáže súradnice vašej myši, keď ukážete na obrázok, čo sú všetky údaje, ktoré potrebujete, aby ste mohli začať s obrázkovými mapami.
Vytvorenie obrázkovej mapy
Ak chcete vytvoriť obrázkovú mapu, najprv vyberte obrázok, ktorý bude slúžiť ako základ mapy. Obrázok by mal mať „normálnu veľkosť“– to znamená, že by ste nemali používať obrázok taký veľký, aby ho prehliadač zmenil.
Keď vložíte obrázok, pridáte ďalší atribút, ktorý identifikuje súradnice mapy:
Pri vytváraní obrázkovej mapy vytvárate oblasť, na ktorú sa dá na obrázku kliknúť, takže súradnice mapy musia byť v súlade s výškou a šírkou obrázku, ktorý ste vybrali. Mapy podporujú tri rôzne typy tvarov:
- obdĺžnik-obdĺžnik alebo štvorstranný obrázok
- poly-a mnohouholník alebo viacstranná figúrka
- circle-a circle
Ak chcete vytvoriť oblasti, musíte izolovať konkrétne súradnice, ktoré chcete zmapovať. Mapa môže pozostávať z jednej alebo viacerých definovaných oblastí na obrázku, na ktoré sa po kliknutí otvorí nový hypertextový odkaz.
V prípade obdĺžnika mapujete iba ľavý horný a pravý dolný roh. Všetky súradnice sú uvedené ako x, y (nad, hore). Takže pre ľavý horný roh 0, 0 a pravý dolný roh 10, 15 by ste napísali 0, 0, 10, 15. Potom ho zahrniete do mapy:
V prípade mnohouholníka mapujete každú súradnicu x, y samostatne. Webový prehliadač automaticky spojí poslednú sadu súradníc s prvou; čokoľvek v týchto súradniciach je súčasťou mapy.
Kruhové tvary vyžadujú iba dve súradnice, ako napríklad obdĺžnik, ale pre druhú súradnicu určíte polomer alebo vzdialenosť od stredu kruhu. Takže pre kruh so stredom 122, 122 a polomerom 5 by ste napísali 122, 122, 5:
Všetky oblasti a tvary môžu byť zahrnuté v rovnakej značke mapy:
Úvahy
Obrázkové mapy boli oveľa bežnejšie v ére Web 1.0 v 90-tych rokoch 20. storočia až po začiatok 21. storočia. Obrazové mapy často tvorili základ navigácie na webových stránkach. Dizajnér by vytvoril nejaký obrázok na označenie položiek ponuky a potom nastavil mapu.
Moderné prístupy podporujú responzívny dizajn a používajú kaskádové štýly na ovládanie umiestnenia obrázkov a hypertextových odkazov na stránke.
Hoci je značka mapy stále podporovaná v štandarde HTML, používanie mobilných zariadení s malými rozmermi môže viesť k neočakávaným problémom s výkonom obrázkových máp. Okrem toho problémy so šírkou pásma alebo nefunkčné obrázky spochybňujú hodnotu obrázkovej mapy.
Neváhajte teda pokračovať v používaní tejto stabilnej, dobre pochopenej technológie s vedomím, že medzi webovými dizajnérmi sú v súčasnosti v móde efektívnejšie alternatívy.
