Skip to main content

Vytvárajte obrazové mapy bez editora obrázkových máp

Anonim

Obrazové mapy sú vzrušujúcim a zaujímavým spôsobom na oživenie vašej webovej stránky - s nimi môžete odovzdávať obrázky a robiť časti týchto obrázkov klikateľnými na iné online aktíva. Ak máte štipku a nechcete prevziať editor obrázkových máp, vytváranie mapy pomocou značiek HTML je jednoduché.

Budete potrebovať obrázok, editor obrázkov a nejaký HTML editor alebo textový editor. Väčšina editorov obrázkov vám ukáže súradnice myši pri nasmerovaní obrázka. Tieto súradnicové dáta sú všetko, čo potrebujete na začiatok s mapami obrázkov.

Vytvorenie obrázkovej mapy

Ak chcete vytvoriť mapu obrázkov, najprv vyberte obrázok, ktorý bude slúžiť ako základ mapy. Obraz by mal byť "normálna veľkosť" - to znamená, že by ste nemali používať obraz tak veľký, aby ho prehliadač zmenšil.

Keď vložíte obrázok, pridáte ďalší atribút, ktorý identifikuje súradnice mapy:

Mačiatka!

Pri vytváraní mapy obrázkov vytvárate oblasť, na ktorú je možné kliknúť na obrázku, takže súradnice mapy musia byť v súlade s výškou a šírkou vybratého obrázka. Mapy podporujú tri rôzne typy tvarov:

  • rect-obdĺžnik alebo štvorstranný obrázok
  • poly-polygon alebo viacstránkový obrázok
  • kruh - kruh

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í obrázka, ktoré po kliknutí otvoria nový hypertextový odkaz.

Pre obdĺžnik , mapujete iba ľavý 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 zadali 0,0,10,15, Potom ho zahrniete do mapy:

Pre polygón , každý z nich mapujete x, y koordinovať samostatne. Webový prehliadač automaticky spája posledný súbor súradníc s prvým; niečo v rámci týchto súradníc je súčasťou mapy.

kružnice tvary vyžadujú iba dve súradnice, ako napríklad obdĺžnik, ale pre druhú súradnicu určujete 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é do rovnakej značky mapy:

dôležité informácie

Obrazové mapy boli oveľa bežnejšie v ére Web 1.0 z deväťdesiatych rokov minulého storočia na veľmi skorých obrázkových mapách z roku 2000, ktoré často tvorili základ navigácie webových stránok. Návrhár by vytvoril nejaký obrázok na označenie položiek v ponuke a potom nastavil mapu.

Moderné prístupy podporujú prispôsobivý dizajn a používajú kaskádové štýly so štýlmi na ovládanie umiestnenia obrázkov a hypertextových odkazov na stránke.

Aj keď značka mapy je stále podporovaná v štandarde HTML, používanie mobilných zariadení s malými formovacími faktormi môže viesť k neočakávaným problémom s obrazovými mapami. Navyše problémy s šírkou pásma alebo rozbité obrázky ovplyvňujú hodnotu obrázkovej mapy.

Takže neváhajte a používajte túto stabilnú, dobre pochopenú technológiu - vediac, že ​​v súčasnosti existujú efektívnejšie alternatívy en vogue s webovými návrhármi.