HTML - Lekce 15. Navigační mapy - mapa

Takové obrazové mapy mohou být na straně klienta nebo na straně serveru. Odkazy klientské mapy jsou uloženy v samotném dokumentu a kliknutím myši prohlížeč sám určí, do které oblasti patří souřadnice tohoto bodu a navede na požadovaný odkaz.

U serverové verze jsou tyto souřadnice nejprve přeneseny na server, tam zpracovány speciálním programem a teprve poté následuje odkaz. Je zřejmé, že preferované jsou klientské navigační mapy. Zvážíme je.

Představme si například, že jsme obchod s domácími spotřebiči a v záhlaví našeho webu máme následující obrázek:

Udělejme z toho navigační mapu, tzn. po kliknutí na ledničku budete přesměrováni na stránku věnovanou lednicím (s modely, popisy a cenami), po kliknutí na vysavač a pračku se dostanete na jejich odpovídající stránky.

K tomu potřebujeme popsat oblasti na tomto obrázku, které budou odkazy. K popisu takových oblastí se používají značky pouze s jedním parametrem jméno, který určuje název odkazové mapy a poté se používá k propojení s touto mapou.

• tvar- definuje tvar oblasti, může nabývat následujících hodnot:
  • rect- plocha ve tvaru obdélníku,
  • kruh- plocha ve tvaru kruhu,
  • poly- plocha ve tvaru mnohoúhelníku,
  • výchozí- celý region.
• tresky- nastavuje souřadnice samostatné oblasti:
  • Pro rect jsou uvedeny souřadnice levého horního a pravého dolního rohu obdélníku,
  • Pro kruh jsou specifikovány souřadnice středu kruhu a poloměr,
  • Pro poly souřadnice vrcholů polygonu jsou specifikovány v požadovaném pořadí.
• href- definuje adresu odkazu.
• cíl- používá se při použití rámců a označuje rámec, do kterého se má stránka načíst.
• alt- nastaví alternativní text pro oblast.

Pro tyto účely se obvykle používá nějaký program, například Image Ready, který má speciální nástroj pro obrysování oblastí a automaticky vytváří popisy těchto oblastí. Zvážení ovládání těchto programů není součástí kurzu HTML, proto zde nastavíme souřadnice „od oka“. Podívejte se znovu na náš obrázek:

Šířka našeho obrázku je 738 pixelů a výška je 192 pixelů. Narýsujme si čáry podél hranic našich krajů a určime zhruba souřadnice. Nyní jsme připraveni přidat tyto parametry do našich značek .

Nyní se naše oblasti staly odkazy (pohybem kurzoru myši se změní na dlaň). Na tomto webu nejsou žádné stránky věnované ledničkám, takže odkazy vás přesměrují na stejnou stránku, ale pokud vytvoříte stránky, které chcete, kliknutím na oblast se na stránku dostanete.

Tím naše lekce končí. Seznámili jste se se všemi možnostmi jazyka HTML. Chcete-li si upevnit své dovednosti, podívejte se na dvě lekce Tvorba webových stránek – tabulkové uspořádání.

Na závěr musím říci, že v HTML jsou ještě dva nádherné prvky – značky

Štítek

Uvnitř nádoby

• jeden nebo více prvků< >. Tyto prvky nemají žádný obsah, ale definují geometrické oblasti obrazové mapy a hypertextové odkazy spojené s každou oblastí
• obsah na úrovni bloku. Tento obsah by měl zahrnovat< >, které určují geometrické oblasti mapy a odkazy spojené s každou oblastí

Pokud značka

Pokud se oblasti překrývají, má přednost prvek definující oblast, který se v dokumentu vyskytuje dříve.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Syntax

Atributy

třída	definuje název třídy, která se má použít
dir	určuje směr postav: ltr - zleva doprava rtl - zprava doleva
id	jedinečný identifikátor
lang	definuje jazyk zobrazeného dokumentu
jméno	název obrázkové karty. Používá se jako hodnota parametru usemap značky
onblur	prvek ztrácí pozornost
onclick	klikněte na prvek
ondblclick	poklepejte na prvek
zaměření	prvek získává zaměření
onkeydown	stisknutím klávesy, když je prvek aktivní
onkeypress	stisknutí a uvolnění klávesy, když je prvek aktivní
onkeyup	uvolnění dříve stisknuté klávesy, když je prvek zaostřen
onmousedown	kliknutím na tlačítko myši, když je prvek aktivní
onmousemove	pohyb ukazatele myši, když je prvek aktivní
onmouseout	přesunutí ukazatele myši mimo prvek
onmouseover	umístění ukazatele myši na prvek
onmouseup	uvolněním dříve stisknutého tlačítka myši, když je prvek aktivní
styl	určuje vloženou šablonu stylů
titul	popis

Příklad

• je povinná uzavírací značka ()
• Atribut id je povinný
• Pro případy, kdy grafika není k dispozici nebo ji uživatel nemůže získat, se doporučuje poskytnout textovou alternativu ke grafické kartě
• Nedoporučuje se používat obrazovou mapu jako hlavní navigaci, kvůli špatné podpoře starších a hlasových prohlížečů

Štítek — prvek na úrovni bloku, tzn. obsah tagu vždy začíná na novém řádku. Za značku je také přidán konec řádku.

Ahoj. Nedávno jsem měl možnost zabývat se tak specifickou html funkcí, jakou je obrázková mapa. Abych byl upřímný, neměl jsem příležitost to často používat, a pak se obvykle všechno dělalo v zónách obdélníkového tvaru. Ale toto nebyl stejný případ. Úkolem bylo vložit odkazy na jednotlivé regiony snímku, který byl mapou země, a o nějakých plátnech či svg bohužel nemohla být řeč. Pouze html pouze hardcore! Úkol je tedy nastaven, Google je aktivován a můžeme začít.

Teorie

• souřadnic- souřadnice oblasti výběru
• href- odkaz, na který přejdete po kliknutí na zónu
• nohref- označuje, že zóna neobsahuje odkaz
• tvar- výběrový formulář
  • kruh- oblast výběru ve tvaru kruhu
  • výchozí- vybere celou oblast obrázku
  • poly- oblast výběru ve formě mnohoúhelníku
  • rect- oblast výběru ve tvaru obdélníku
• cíl- určuje, kde se odkaz otevře

Protože oblast mého výběru musela být polygonální, zadáváme hodnotu atributu shape, tag area, jako poly - polygonal area. V tomto režimu jsou uvedeny souřadnice bodu vzhledem k levému hornímu rohu oddělené čárkami - x,y. Tečky jsou také odděleny čárkami, což zpočátku způsobuje zmatek při čtení takového kódu.

Píšeme Malování

Nejprve si připravíme layout:

Text ( okraj: 0; odsazení: 20px; rodina písem: Arial, Helvetica, bezpatkové; ) img ( okraj: žádný; obrys: žádný; zobrazení: blok; -moz-user-select: žádný; -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 ; přetečení: skryté; .bar ( margin-bottom: 16px; ) .info ( background-color: #FCFCFC; border: 1px tečkovaný #CCC; font-size: 12px; font-style: italic; padding : 8px; word-wrap: break-word;
V javascriptu je vše celkem jednoduché Při procesu psaní jsem použil vlastní bojovou knihovnu, takže se nenechte překvapit nestandardními funkcemi Nejprve připojíme událost mousedown k #canvas, ve které je bod na obrázku bude vykreslen a jeho souřadnice budou zaznamenány.

Var addPoint = function(e)( var e = _.getEvent(e), offset = _.getOffset(nodes["canvas"]), x = e.clientX + _.getDocScrollLeft() - offset, y = e. clientY + _.getDocScrollTop() - offset, uzel = nodes["canvas"].appendChild(_.node("div", ("třída":"bod")))); +"px" uzel.style.left = x-1+"px" body.push(("x" : x, "y" : y, "uzel" : uzel) return false ;
Poté napíšeme funkci, která vygeneruje html kód naší mapy.

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

Pojďme si vše zarámovat do třídy, pár pomocných funkcí, to je vše. Doufám, že tento nástroj bude pro někoho užitečný.

"Vytvořil jsem šablonu pro umístění odkazů na různé webové stránky ("") do určitých oblastí

Nyní, když kliknete na tvary s nápisy, otevřou se příslušné stránky: profil, deník nebo všechny příspěvky ze sekce „Photoshop Lekce“ (pozor! po převedení blogu na WordPress a jeho přepracování odkazy nefungují! lekce zůstává aktuální!)

Aby obrázek fungoval, napsal jsem přibližně následující HTML kód:

Tento kód lze vložit do pole zprávy (se stisknutým tlačítkem „Zdroj“) nebo do epigrafu...Mimochodem, k tématu jsou další příspěvky: “Co je HTML", "HTML kód obrázků", "

Odkaz na obrázek“ a tak dále.

1. Souřadnice

K sestavení výše uvedeného kódu jsem si vzpomněl na trochu geometrie :)
Souřadný systém: osa X - shora dolů, osa Y - zleva doprava
Chcete-li nastavit souřadnice obrázku, musíte nastavit:
- čtverec (nebo obdélník), jehož strany jsou rovnoběžné s osami - souřadnice dvou protilehlých úhlů - X1, Y1 a X2, Y2
- polygon - souřadnice VŠECH úhlů

— kruh — souřadnice středu a poloměr. V mém případě se ukázalo, že potřebuji souřadnice— pro odkaz „Profil“ (obdélník), body D, E, F, G, H — pro odkaz „Deník“ (polygon), Q a délku R — pro odkaz „Photoshop Lekce“ (kruh). Všechna tato čísla ve výše uvedeném HTML kódu jsou zvýrazněna červeně.

Obrazové mapy umožňují propojit odkazy na různé oblasti stejného obrázku. Realizováno ve dvou různé možnosti - server a klient. Při použití volby server odešle prohlížeč serveru požadavek na získání adresy vybraného odkazu a čeká na odpověď s požadovanými informacemi. Tento přístup vyžaduje další čas na čekání na výsledek a samostatné soubory pro každou obrázkovou kartu.

1. Pro jednotlivé oblasti nelze nastavit nápovědu a alternativní text. Alternativní text umožňuje získat textové informace o kresbě, když je v prohlížeči zakázáno načítání obrázků. Protože se obrázky načítají poté, co o nich prohlížeč obdrží informace, náhradní text obrázku se zobrazí dříve. A při načítání bude text nahrazen obrázkem.

U obrazových map je tato funkce relevantní, protože pokud vypnete prohlížení obrázků, což mnoho uživatelů dělá, uvidíte nakonec jen jeden prázdný obdélník.

2. Se složitým tvarem oblasti odkazů se zvyšuje množství HTML kódu. Obrys je aproximován sadou přímých segmentů pro každý bod takového segmentu, měly by být zadány dvě souřadnice a celkový počet takových bodů může být poměrně velký. Pro spravedlnost je třeba poznamenat, že složité formy jsou zvláštním případem a používají se poměrně zřídka.

3. S obrázkovými kartami nelze vytvářet různé efekty, které jsou dostupné při rozřezání jednoho obrázku na fragmenty: rolovací efekt, částečná animace, individuální optimalizace obrázků pro jejich rychlé načítání.

Použitelnost Z hlediska uživatelského pohodlí mají obrazové mapy jedinou výhodu – odkazy různých tvarů. To přidává na přehlednosti prezentace informací – nejsme omezeni na obdélníkový tvar odkazu a můžeme použít odkazy složité konfigurace pro naše vlastní účely. Ve všech ostatních ohledech jsou k ničemu – běžné textové odkazy jsou informativnější a nebojí se vypnout zobrazování obrázků v prohlížeči. Skutečnost, že jeden obrázek se načítá rychleji než stejný obrázek, ale je rozřezán na fragmenty a uložen jako sada, snadné se dostat. Každý z těchto konečných souborů lze zmenšit pomocí individuálních nastavení optimalizace. Výsledkem je, že celkový objem všech fragmentů zabere méně místa než jeden obrázek. Neměli bychom podceňovat psychologický faktor - člověku se zdá, že soubor malých obrázků se načítá rychleji než jeden velký.

Hlavní nevýhodou map je, že zde nejsou jasně definované hranice vazeb. Proto musí být tyto hranice zvýrazněny pomocí různých prostředků již na obrázku. Pokud se obrázek z nějakého důvodu nenačte, pak se pochopení sady odkazů stává velmi problematickým.

Alternativní možnosti

Ne vždy je naléhavá potřeba používat obrazové mapy, takže byste si měli uvědomit, že existují i ​​​​jiné možné možnosti dokončení zadaného úkolu.

Použití Flash

Pomocí funkcí můžete vytvořit různé oblasti odkazů ve videích Flash vektorová grafika. Díky jeho rozsáhlým možnostem můžete ve Flashi vytvářet úžasné nabídky a navigaci. I zde je ale potřeba opatrnosti, abychom pro stromy nepřišli o les.

Krájení obrázku

Jedná se o jeden z populárních prostředků v designu. V tomto případě je jeden obrázek vyříznut pomocí speciální programy do fragmentů, které se nakonec spojí dohromady a vytvoří iluzi úplného obrazu. Přestože řezné plochy mohou být pouze pravoúhlé, ve většině případů to pro vytváření vazeb postačuje.

Pro každý fragment lze vybrat nejvhodnější grafický formát, ve kterém bude uložen, parametry optimalizace a přidat alternativní text. Poté, i když je zobrazování obrázků vypnuté, budou hranice oblastí a text nahrazující obrázek jasně viditelné.

Resumé