HTML - Lekcia 15. Navigačné mapy - mapa

Takéto obrazové mapy môžu byť na strane klienta alebo na strane servera. Odkazy klientskej mapy sú uložené v samotnom dokumente a kliknutím myšou prehliadač sám určí, do ktorej oblasti patria súradnice tohto bodu a naviguje na požadovaný odkaz.

Pri serverovej verzii sa tieto súradnice najskôr prenesú na server, tam ich spracuje špeciálny program a až potom nasleduje odkaz. Je zrejmé, že preferované sú klientske navigačné mapy. Budeme ich zvažovať.

Predstavme si napríklad, že sme obchod s domácimi spotrebičmi a v hlavičke našej webovej stránky máme nasledujúci obrázok:

Urobme si z toho navigačnú mapu, t.j. po kliknutí na chladničku budete presmerovaní na stránku venovanú chladničkám (s modelmi, popisom a cenami), po kliknutí na vysávač a práčku sa dostanete na ich zodpovedajúce stránky.

Aby sme to urobili, musíme popísať oblasti na tomto obrázku, ktoré budú odkazmi. Na popis takýchto oblastí sa používajú značky len s jedným parametrom meno, ktorý určuje názov odkazovej mapy a následne sa používa na prepojenie s touto mapou.

• tvar- definuje tvar oblasti, môže nadobúdať nasledujúce hodnoty:
  • rect- plocha v tvare obdĺžnika,
  • kruh- plocha v tvare kruhu,
  • poly- plocha vo forme mnohouholníka,
  • predvolená- celý región.
• tresky- nastavuje súradnice samostatnej oblasti:
  • Pre rect sú určené súradnice ľavého horného a pravého dolného rohu obdĺžnika,
  • Pre kruh sú určené súradnice stredu kruhu a polomeru,
  • Pre poly súradnice vrcholov polygónu sú špecifikované v požadovanom poradí.
• href- definuje adresu odkazu.
• cieľ- používa sa pri používaní rámcov a označuje rámec, do ktorého sa má stránka načítať.
• alt- nastaví alternatívny text pre oblasť.

Na tieto účely sa zvyčajne používa nejaký program, napríklad Image Ready, ktorý má špeciálny nástroj na obrysovanie oblastí a automaticky vytvára popisy týchto oblastí. Zváženie fungovania týchto programov nie je súčasťou kurzu HTML, preto tu nastavíme súradnice „od oka“. Pozrite sa ešte raz na náš obrázok:

Šírka nášho obrázka je 738 pixelov a výška je 192 pixelov. Narysujme čiary pozdĺž hraníc našich krajov a určme zhruba súradnice. Teraz sme pripravení pridať tieto parametre do našich značiek .

Teraz sa z našich oblastí stali odkazy (ak pohnete kurzorom myši, zmení sa na dlaň). Na tejto stránke nie sú žiadne stránky venované chladničkám, takže odkazy vás prenesú na rovnakú stránku, ale ak vytvoríte stránky, ktoré chcete, kliknutím na oblasť sa dostanete na stránku.

Týmto sa naše lekcie končia. Oboznámili ste sa so všetkými možnosťami jazyka HTML. Ak si chcete upevniť svoje zručnosti, pozrite si dve lekcie Tvorba webovej stránky – tabuľkové usporiadanie.

Na záver musím povedať, že v HTML sú ešte dva úžasné prvky – značky

Tag

Vo vnútri nádoby

• jeden alebo viac prvkov< >. Tieto prvky nemajú žiadny obsah, ale definujú geometrické oblasti obrazovej mapy a hypertextové prepojenia spojené s každou oblasťou
• obsah na úrovni bloku. Tento obsah by mal zahŕňať< >, ktoré špecifikujú geometrické oblasti mapy a prepojenia spojené s každou oblasťou

Ak značka

Ak sa oblasti prekrývajú, prvok definujúci oblasť, ktorý sa v dokumente nachádza skôr, má prednosť.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Syntax

Atribúty

trieda	definuje názov triedy, ktorá sa má použiť
r	určuje smer postáv: ltr - zľava doprava rtl - sprava doľava
id	jedinečný identifikátor
lang	definuje jazyk zobrazeného dokumentu
meno	názov obrazovej karty. Používa sa ako hodnota parametra usemap značky
onblur	prvok stráca zameranie
onclick	kliknite na prvok
ondblclick	dvakrát kliknite na prvok
zameranie	prvok získavania pozornosti
onkeydown	stlačením klávesu, keď je prvok zaostrený
onkeypress	stlačenie a uvoľnenie klávesu, keď je prvok zaostrený
onkeyup	uvoľnenie predtým stlačeného klávesu, keď je prvok zaostrený
onmousedown	kliknutím na tlačidlo myši, keď je prvok aktívny
onmousemove	pohyb ukazovateľa myši, keď je prvok zaostrený
onmouseout	posunutím ukazovateľa myši mimo prvok
onmouseover	umiestnením ukazovateľa myši na prvok
onmouseup	uvoľnenie predtým stlačeného tlačidla myši, keď je prvok aktívny
štýl	určuje inline šablónu štýlov
titul	popis

Príklad

• je povinná uzatváracia značka ()
• atribút id je povinný
• Odporúča sa poskytnúť textovú alternatívu ku grafickej karte pre prípady, keď grafika nie je dostupná alebo ju používateľ nemôže získať
• Neodporúča sa používať obrazovú mapu ako hlavnú navigáciu, kvôli slabej podpore v starších a hlasových prehliadačoch

Tag — prvok na úrovni bloku, t.j. obsah značky začína vždy na novom riadku. Za značku sa pridá aj zalomenie riadku.

Dobrý deň. Nedávno som mal možnosť zaoberať sa takou špecifickou html funkciou, akou je obrázková mapa. Aby som bol úprimný, nemal som príležitosť ho často používať a zvyčajne sa všetko robilo v zónach obdĺžnikového tvaru. Ale toto nebol ten istý prípad. Úlohou bolo zverejniť odkazy na jednotlivé regióny snímky, ktorá bola mapou krajiny a o nejakých plátnach či svg, žiaľ, nemohla byť reč. Iba html iba hardcore! Úloha je teda nastavená, Google je aktivovaný a môžeme začať.

teória

• súradnice- súradnice oblasti výberu
• href- odkaz, na ktorý prejdete po kliknutí na zónu
• nohref- označuje, že zóna neobsahuje prepojenie
• tvar- výberový formulár
  • kruh- oblasť výberu v tvare kruhu
  • predvolená- vyberie celú oblasť obrázka
  • poly- oblasť výberu v tvare mnohouholníka
  • rect- oblasť výberu v tvare obdĺžnika
• cieľ- určuje, kde sa odkaz otvorí

Keďže oblasť môjho výberu musela byť polygonálna, zadáme hodnotu atribútu shape, tag area, ako poly - polygonal area. V tomto režime sú uvedené súradnice bodu vzhľadom k ľavému hornému rohu oddelené čiarkami - x,y. Bodky sú tiež oddelené čiarkami, čo spočiatku spôsobuje zmätok pri čítaní takéhoto kódu.

Píšeme Paint

Najprv si pripravíme rozloženie:

Telo ( okraj: 0; odsadenie: 20px; rodina písma: Arial, Helvetica, bezpätkové; ) img ( orámovanie: žiadne; obrys: žiadne; zobrazenie: blok; -moz-user-select: žiadne; -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: relativní; ) .canvas .point ( width: 1px; height: 1px; background-color: #fff; border: 1px solid #000 ; pretečenie: skryté; .bar ( margin-bottom: 16px; ) .info ( background-color: #FCFCFC; border: 1px bodd #CCC; font-size: 12px; font-style: italic; padding : 8px; zalomenie slova;
V javascripte je všetko celkom jednoduché Počas procesu písania som použil vlastnú bojovú knižnicu, takže sa nečudujte neštandardným funkciám Najprv pripojíme udalosť mousedown na obrázok bude vykreslený a jeho súradnice budú zaznamenané.

Var addPoint = function(e)( var e = _.getEvent(e), offset = _.getOffset(nodes["canvas"]), x = e.clientX + _.getDocScrollLeft() - offset, y = e. clientY + _.getDocScrollTop() - odsadenie, uzol = uzly["plátno"].appendChild(_.node("div", ("trieda":"bod"))); +"px" node.style.left = x-1+"px" body.push(("x" : x, "y" : y, "uzol" : uzol) návrat false ;
Potom napíšeme funkciu, ktorá vygeneruje html kód našej mapy.

Var renderInfo = function())( var text; _.clearNode(nodes["info"]); nodes["info"].appendChild(_.node("span", " ")); };
) text += "">"; uzly["info"].appendChild(_.node("span", text)); uzly["info"].appendChild(_.node("br")); ) ) nodes["info"].appendChild(_.node("span", "

Poďme si všetko zarámovať do triedy, pár pomocných funkcií, to je všetko. Dúfam, že tento nástroj bude pre niekoho užitočný.

„Vytvoril som šablónu na umiestnenie odkazov na rôzne webové stránky („“) v určitých jej oblastiach

Ak teraz kliknete na tvary s nápismi, otvoria sa príslušné stránky: profil, denník alebo všetky príspevky zo sekcie „Lekcie z Photoshopu“ (pozor! po prenesení blogu do WordPressu a jeho prepracovaní odkazy nefungujú! lekcia zostáva relevantná!)

Aby obrázok fungoval, napísal som približne nasledujúci HTML kód:

Tento kód je možné vložiť do poľa správy (pri stlačenom tlačidle „Zdroj“) alebo do epigrafu...Mimochodom, k téme sú aj ďalšie príspevky: “čo je HTML", "HTML kód obrázkov", "

Odkaz na obrázok“ a tak ďalej.

1. Súradnice

Na zostavenie vyššie uvedeného kódu som si spomenul na malú geometriu :)
Súradnicový systém: os X - zhora nadol, os Y - zľava doprava
Ak chcete nastaviť súradnice obrázku, musíte nastaviť:
- štvorec (alebo obdĺžnik), ktorého strany sú rovnobežné s osami - súradnice dvoch protiľahlých uhlov - X1, Y1 a X2, Y2
- mnohouholník - súradnice VŠETKÝCH uhlov

— kruh — stredové súradnice a polomer. V mojom prípade sa ukázalo, že potrebujem súradnice— pre odkaz „Profil“ (obdĺžnik), body D, E, F, G, H — pre odkaz „Denník“ (mnohouholník), Q a dĺžku R — pre odkaz „Lekcie vo Photoshope“ (kruh). Všetky tieto čísla vo vyššie uvedenom HTML kóde sú zvýraznené červenou farbou.

Obrazové mapy vám umožňujú prepojiť odkazy na rôzne oblasti toho istého obrázka. Realizované v dvoch rôzne možnosti - server a klient. Pri použití možnosti servera prehliadač odošle serveru požiadavku na získanie adresy vybraného odkazu a čaká na odpoveď s požadovanými informáciami. Tento prístup si vyžaduje dodatočný čas na čakanie na výsledok a samostatné súbory pre každú obrázkovú kartu.

1. Nemôžete nastaviť popis a alternatívny text pre jednotlivé oblasti. Alternatívny text vám umožňuje získať textové informácie o kresbe, keď je v prehliadači zakázané načítanie obrázkov. Keďže obrázky sa načítavajú po tom, čo prehliadač o nich dostane informácie, náhradný text obrázka sa zobrazí skôr. A ako sa načítava, text bude nahradený obrázkom.

Pre obrázkové mapy je táto funkcia relevantná, pretože ak vypnete prezeranie obrázkov, čo robí veľa používateľov, nakoniec sa vám zobrazí iba jeden prázdny obdĺžnik.

2. So zložitým tvarom oblasti odkazu narastá množstvo HTML kódu. Obrys je aproximovaný množinou priamych segmentov pre každý bod takéhoto segmentu, mali by byť špecifikované dve súradnice a celkový počet takýchto bodov môže byť dosť veľký. Spravodlivo treba poznamenať, že zložité formy sú špeciálnym prípadom a používajú sa pomerne zriedka.

3. S obrázkovými kartami nemôžete vytvárať rôzne efekty, ktoré sú dostupné pri rozrezaní jedného obrázka na fragmenty: rolovací efekt, čiastočná animácia, individuálna optimalizácia obrázkov pre ich rýchle načítanie.

Použiteľnosť Z hľadiska užívateľského komfortu majú obrázkové mapy jedinú výhodu – prepojenia rôznych tvarov. To pridáva na prehľadnosti prezentácie informácií – nie sme obmedzení na obdĺžnikový tvar odkazu a môžeme použiť odkazy zložitej konfigurácie pre naše vlastné účely. Vo všetkých ostatných ohľadoch sú k ničomu - bežné textové odkazy sú informatívnejšie a neboja sa vypnúť zobrazovanie obrázkov v prehliadači. Skutočnosť, že jeden obrázok sa načíta rýchlejšie ako rovnaký obrázok, ale rozrezaný na fragmenty a uložený ako súbor, ľahko dostupné. Každý z týchto konečných súborov je možné zmenšiť pomocou individuálnych nastavení optimalizácie. Výsledkom je, že celkový objem všetkých fragmentov zaberie menej miesta ako jeden obrázok. Nemali by sme zohľadňovať psychologický faktor - človeku sa zdá, že súbor malých obrázkov sa načíta rýchlejšie ako jeden veľký.

Hlavnou nevýhodou máp je, že neexistujú jasne definované hranice prepojení. Preto musia byť tieto hranice zvýraznené rôznymi prostriedkami už na obrázku. Ak sa obrázok z nejakého dôvodu nenačíta, pochopenie súboru odkazov sa stáva veľmi problematickým.

Alternatívne možnosti

Nie vždy je nutnosť používať obrazové mapy, takže by ste si mali uvedomiť, že existujú aj iné možné možnosti dokončenie zadanej úlohy.

Používanie Flash

Pomocou funkcií môžete vo videách Flash vytvoriť rôzne oblasti odkazov vektorová grafika. Vďaka jeho rozsiahlym schopnostiam môžete vo Flashi vytvárať úžasné ponuky a navigáciu. Ale aj tu je potrebná opatrnosť, aby sa pre stromy nestratil les.

Krájanie obrázka

Toto je jeden z populárnych prostriedkov v dizajne. V tomto prípade sa jeden obrázok vyreže pomocou špeciálne programy na fragmenty, ktoré sa nakoniec spoja a vytvárajú ilúziu úplného obrazu. Hoci rezné plochy môžu byť iba pravouhlé, vo väčšine prípadov to stačí na vytvorenie spojov.

Pre každý fragment si môžete vybrať najvhodnejší grafický formát, v ktorom bude uložený, parametre optimalizácie a pridať alternatívny text. Potom, aj keď je zobrazovanie obrázkov vypnuté, hranice oblastí a text nahrádzajúci obrázok budú jasne viditeľné.

Obnoviť