Primer uporabe

Poglejmo primer, ko kliknete na določeno obliko v eni sliki, odprete različne spletne strani, ki opisujejo te oblike (povezave do Wikipedije):

Izberite figuro:

"Na voljo so 4 številke za izbiro"

In tako, po vrsti, kar smo naredili v tem primeru:

Namig: če želite dobiti koordinate slike, uporabite urejevalnik slik, tudi najpreprostejši urejevalnik, npr. Barva, bodo prikazane koordinate kazalca. Zapišite koordinate na list papirja ali v ločeno datoteko in vnesite vrednosti na stran.

Če imate pri nalogi kakršne koli težave, preglejte kodo strani tako, da odprete primer v ločenem oknu in ga natančno preučite.

"Naredil sem praznino za umestitev povezav do različnih spletnih strani na določene njene dele ("")

Zdaj, če kliknete na figure z napisi, se odprejo strani, ki jim ustrezajo: profil, dnevnik ali vse objave iz razdelka »Lekcije Photoshopa« (pozor! po prenosu spletnega dnevnika v WordPress in predelavi povezave ne delujejo! vendar lekcija ostaja pomembna!)

Da bi slika delovala, sem napisal nekaj podobnega tej kodi HTML:

To kodo lahko vstavite v polje za sporočilo (s pritisnjenim gumbom "Vir") ali v epigraf ...

Mimogrede, na to temo so še druge objave:Kaj je HTML?HTML koda risb", "Slika-povezava" in tako naprej.

1. Koordinate

Za sestavo navedene kode sem se spomnil malo geometrije :)

Koordinatni sistem: X-os - od zgoraj navzdol, Y-os - od leve proti desni
Če želite nastaviti koordinate figure, morate nastaviti:
- kvadrat (ali pravokotnik), katerega stranice so vzporedne z osema - koordinate dveh nasprotnih kotov - X1, Y1 in X2, Y2
- poligon - koordinate VSEH vogalov
- krog - koordinate središča in polmera.

V mojem primeru se izkaže, da potrebujemo koordinate točk A, C - za povezavo "Profil" (pravokotnik), točke D, E, F, G, H - za povezavo "Dnevnik" (poligon), Q in dolžina R - za povezavo "Lekcije Photoshopa" (krog). Vse te številke v kodi HTML na vrhu so označene rdeče. Poleg tega morate poznati velikost slike v slikovnih pikah (zelena barva)

Posebna natančnost ni potrebna, zato lahko koordinate najdete s pomočjo "ravnila" v Photoshopu - da ga pokličem, pritisnem ctrl+r

Bolj me je zanimalo, da bi kdo drug izračunal koordinate. Za to tečem MS Paint(Start - Vsi programi - Pripomočki - Paint) in odprite sliko v njej. Ko miško premakneš na želene točke na spodnji plošči, se prikažejo njihove koordinate, ki si jih pridno zapisujem

2. HTML koda

Navigacijske karte so določene z oznako

Oznaka zemljevida vključuje oznake , ki določajo geometrijska območja zemljevida risanja in njihove povezane reference.

Ugotovil sem takole - za ustvarjanje navigacijskega zemljevida potrebujete:

— oznake za opis slike

— oznake zemljevidov

— območne oznake

V mojem primeru so bile vrednosti:

• širina= "640" višina= "367"- dimenzije slike
• src="https://website/f02c73a3cd94.jpg" — URL slike na spletnem mestu
• usemap="# slika"— pogojno ime slike zemljevida (lahko katerikoli)
• ime zemljevida= slika- ime kartice (v celoti kot zgoraj)

Vrednosti za območja povezav - href - cilj povezave, oblika - oblika območja in coords - koordinate - ustrezajo trem območjem (območju) na sliki.

Pravokotnik "Profil"

• href="https://website/profile/" — naslov strani profila
• shape="rect" - oznaka oblike "pravokotnik"
• coords="235,61,472,117" — koordinate točk A (235,61) in C (472,117)

Poligon "Dnevnik"

• href="https://website/blog" — naslov strani dnevnika
• shape="poly" - oznaka oblike "polygon"
• coords="235,118,362,118,474,152,457,207,229,146" — koordinate vogalov poligona: točke D (235,118), E (362,118), F (474,152), G (457,207) in H (229,146)

Krog "Lekcije Photoshopa"

• href="https://website/showjournal.php?journalid=2447247&keywordid=929323" — URL strani z objavami iz razdelka Photoshop Tutorials
• shape="circle" - oznaka oblike "krog"
• coords="551,198,65" — koordinate kroga: središče — točka Q (551,198) in polmer — R=65

3. Končaj

Vse prejete vrednosti sem zamenjal v "sistem" kode HTML za zemljevid navigacijske slike in dobil naslednje:

Ta koda se ob uporabi »spremeni« v sliko s povezovalnimi območji.

Za usposabljanje obstaja "lahka" enostavna možnost za ustvarjanje odsekov povezav - objava "Usposabljanje: območja povezav na sliki"

Če najdete napako, označite del besedila in kliknite Ctrl+Enter.

Vlad Merževič

Zemljevidi slik vam omogočajo povezovanje povezav do različnih področij iste slike. Izveden je v dveh različnih različicah - strežniku in odjemalcu. V primeru strežniške različice brskalnik strežniku pošlje zahtevo za pridobitev naslova izbrane povezave in čaka na odgovor z zahtevanimi podatki. Ta pristop zahteva dodaten čas za čakanje na rezultat in ločene datoteke za vsako slikovno karto.

Na strani odjemalca se zemljevid nahaja v istem dokumentu HTML kot povezava do slike.

Odjemalska različica slike zemljevida

Atribut usemap oznake se uporablja za označevanje, da je slika zemljevid. . Vrednost je sklic na opis konfiguracije zemljevida.

Primer 1: Uporaba slikovnega zemljevida

Atribut usemap se uporablja za prikaz brskalniku, da je slika zemljevid. Je povezava do opisa konfiguracije zemljevida, ki je podana z oznako

Atributi oznake AREA

oblike

Določa obliko vroče točke. Oblika je lahko v obliki kroga (circle), pravokotnika (rect), mnogokotnika (poly).

alt

Doda nadomestno besedilo za vsako regijo. Služi samo kot komentar za povezavo, saj ni prikazana na ekranu.

koordinate

Nastavi koordinate vroče točke. Koordinate se merijo v slikovnih pikah od zgornjega levega kota slike, kar ustreza vrednosti 0,0. Prva številka je vodoravna koordinata, druga je navpična koordinata. Seznam koordinat je odvisen od oblike območja.

Za krog so določene tri številke - koordinate središča kroga in polmer.

Za pravokotnik, koordinate zgornjega levega in spodnjega desnega kota.

Za mnogokotnik so podane koordinate njegovih oglišč (slika 2).

riž. 2. Koordinatne točke za poligon

href

Slikovni zemljevidi vam omogočajo ustvarjanje povezav do različnih področij iste slike. Uporaba tega pristopa je jasnejša od običajnih besedilnih povezav in omogoča uporabo samo ene grafične datoteke za organiziranje povezav. Vendar pa ne bi smeli predvidevati, da bi morali biti slikovni zemljevidi vključeni povsod, kjer so potrebne grafične reference. Najprej bi morali oceniti vse prednosti in slabosti, pa tudi pogledati alternativne možnosti.

Prednosti slikovnih zemljevidov

1. Zemljevidi vam omogočajo, da nastavite poljubno obliko območja povezave. Glede na to, da so slike po naravi pravokotne, brez slikovnih zemljevidov ni mogoče narediti grafične reference kompleksne oblike, na primer za označevanje geografskega območja. Zemljevidi-slike se praviloma najpogosteje uporabljajo v geografskih temah.

2. Bolj priročno je delati z eno datoteko - ni vam treba skrbeti za spajanje posameznih fragmentov in sliko lahko enostavno postavite na pravo mesto.

Napake

1. Ni mogoče nastaviti opisa orodja in nadomestnega besedila za posamezna področja. Nadomestno besedilo vam omogoča, da dobite besedilne informacije o sliki, ko je nalaganje slik v brskalniku onemogočeno. Ker se slike naložijo, ko brskalnik prejme informacije o njih, se nadomestno besedilo za sliko prikaže prej. Ko se naloži, bo besedilo zamenjala slika. Za slikovne zemljevide je ta funkcija pomembna, saj če izklopite ogled slik, kar počne veliko uporabnikov, bomo na koncu videli samo en prazen pravokotnik.

2. S kompleksno obliko območja povezave se poveča količina kode HTML. Kontura je aproksimirana z nizom ravnih segmentov, za vsako točko takega segmenta je treba določiti dve koordinati, skupno število takih točk pa je lahko precej veliko. Po pravici povedano je treba opozoriti, da so zapletene oblike poseben primer in se uporabljajo precej redko.

3. S slikovnimi karticami ne morete narediti različnih učinkov, ki so na voljo pri rezanju ene slike na fragmente: učinek kotaljenja, delna animacija, individualna optimizacija slik za njihovo hitro nalaganje.

Uporabnost

Z vidika priročnosti za uporabnike imajo slikovni zemljevidi samo eno prednost - povezave različnih oblik. To dodaja jasnost predstavitvi informacij - nismo omejeni na pravokotno obliko povezave in lahko za lastne namene uporabljamo povezave kompleksne konfiguracije. V vseh drugih pogledih so neuporabne - običajne besedilne povezave so bolj informativne in se ne bojijo onemogočanja prikaza slik v brskalniku. Dejstvo, da se ena slika naloži hitreje kot ista slika, vendar razrezana na fragmente in shranjena kot nabor grafičnih datotek, je enostavno zaobiti. Vsako od teh končnih datotek je mogoče zmanjšati z uporabo individualnih nastavitev optimizacije. Posledično bo skupna prostornina vseh fragmentov zavzela manj prostora kot ena slika. Prav tako ne smemo zanemariti psihološkega dejavnika - človeku se zdi, da se niz majhnih slik naloži hitreje kot ena velika.

Glavna pomanjkljivost zemljevidov je, da ni jasno določenih meja povezav. Zato je treba te meje razlikovati z različnimi sredstvi že na sliki. Če se slika iz nekega razloga ni naložila, postane razvrščanje nabora povezav zelo problematično.

Alternative

Uporaba slikovnih zemljevidov ni vedno nujna, zato bodite pozorni na dejstvo, da obstajajo druge možne možnosti za dokončanje naloge.

Uporaba Flash

V filmih flash lahko ustvarite različna področja povezav z uporabo zmogljivosti vektorske grafike. Zahvaljujoč široki paleti možnosti lahko Flash ustvari neverjetne menije in navigacijska orodja. Toda tudi tukaj je potrebna skrb, da ne izgubimo gozda za drevesa.

Rezanje slik

To je eno izmed priljubljenih orodij za oblikovanje. V tem primeru se ena slika s pomočjo posebnih programov razreže na fragmente, ki se na koncu združijo in ustvarijo iluzijo celotne slike. Čeprav so rezana območja lahko le pravokotna, je to v večini primerov dovolj za ustvarjanje povezav. Za vsak fragment lahko izberete najprimernejši grafični format, v katerem bo shranjen, možnosti optimizacije, dodate alternativno besedilo. Potem, tudi če je prikaz slik onemogočen, bodo meje regij in besedilo, ki nadomešča sliko, jasno vidne.

Povzetek

Kot se je izkazalo, obstaja samo en razlog za uporabo slikovnih zemljevidov - kompleksna oblika povezav, ki jo narekujejo cilji oblikovanja. Tipična uporaba so regije geografskega zemljevida, ki služijo kot povezave. V vseh drugih primerih lahko dobite besedilne povezave, in če morate ustvariti grafično navigacijo, lahko eno sliko razrežete na fragmente za udobje. Ta pristop bo ustvaril več udobja za uporabnike, zlasti tiste, ki iz različnih razlogov onemogočijo prikaz slik v brskalniku. Prav tako jih je treba zapomniti.

HTML - Lekcija 15. Navigacijski zemljevidi - zemljevid

Takšni slikovni zemljevidi so lahko na strani odjemalca in na strani strežnika. Povezave zemljevidov odjemalcev so shranjene v samem dokumentu, na klik miške pa brskalnik sam določi, kateremu območju pripadajo koordinate te točke in se pomakne do želene povezave.

Pri strežniški različici se te koordinate najprej prenesejo na strežnik, kjer jih obdela poseben program in šele nato sledi povezava.Očitno so prednostne navigacijske karte odjemalca. Upoštevali jih bomo.

Na primer, predstavljajmo si, da smo trgovina z gospodinjskimi aparati in imamo v glavi naše strani naslednjo sliko:

Izdelajmo iz njega navigacijski zemljevid, tj. S klikom na hladilnik se odpre stran posvečena hladilnikom (z modeli, opisi in cenami), klik na sesalnik in pralni stroj pa na njuni strani.

Da bi to naredili, moramo opisati področja na tej sliki, ki bodo povezave. Oznake se uporabljajo za opis takih območij. samo z enim parametrom ime, ki podaja ime zemljevida povezav in se kasneje uporabi za povezavo do tega zemljevida.

• oblike- določa obliko območja, lahko sprejme naslednje vrednosti:
  • rect- območje v obliki pravokotnika,
  • krog- območje v obliki kroga,
  • poli- območje v obliki mnogokotnika,
  • privzeto- celotno območje.
• cootds- nastavi koordinate ločenega območja:
  • Za rect nastavljene so koordinate zgornjega levega in spodnjega desnega kota pravokotnika,
  • Za krog nastavite koordinate središča kroga in polmer,
  • Za poli nastavimo koordinate oglišč poligona v želenem vrstnem redu.
• href- določa naslov povezave.
• tarča- uporablja se pri uporabi okvirjev in določa okvir, v katerega se naloži stran.
• alt- nastavi alternativno besedilo za območje.

Za te namene se običajno uporablja kakšen program, na primer Image Ready, ki ima posebno orodje za sledenje območij in samodejno gradi opise teh območij. Upoštevanje dela teh programov ni vključeno v tečaj HTML, zato bomo tukaj postavili koordinate "na oko". Poglejte še enkrat našo sliko:

Naša slika je široka 738 slikovnih pik in visoka 192 slikovnih pik. Narišimo črte po mejah naših regij in približno določimo koordinate. Zdaj smo pripravljeni dodati te možnosti našim oznakam. .

Zdaj so naša področja postala povezave (če premaknete kazalec miške, se spremeni v dlan). Na tem spletnem mestu ni hladilnih strani, zato povezave vodijo na isto stran, a če ustvarite prave strani, boste s klikom na območje krmarili.

To zaključuje naše lekcije. Spoznali ste vse funkcije jezika HTML. Če želite utrditi svoje spretnosti, si oglejte dve lekciji Izdelava spletnega mesta - postavitev tabele.

Na koncu je treba povedati, da sta v HTML še dva čudovita elementa - oznake