Image
15.6.2016 0 Comments

Vytvárame WWW stránky / 11. časť

Späť na úvod >> Späť na seriál

V predošlej časti sme začali s multimediálnym rozšírením našich stránok a tentoraz budeme v téme pokračovať. Povieme si však niečo aj o klikacích mapách.

Element Param
Ako sme si ukázali už v predchádzajúcej časti, objektom môžeme odovzdávať rôzne parametre. Tie sa definujú v elemente Param, ktorý má nasledujúce hodnoty:

  • name – meno parametra
  • value – hodnota parametra
  • valuetype – má tri hodnoty: data, ref a object
                       data – objektu je priamo odovzdaná hodnota uvedená vo value
                       ref – value odkazuje na adresu, kde sú umiestnené dáta, ktoré budú                       
                               odovzdané objektu
                       object – odkazuje na iný objekt na rovnakej stránke
  • type – používa sa v prípade, že pameter valuetype má hodnotu ref a určuje typ dát, ktoré budú stiahnuté zo zadanej adresy.

Príklad:

<OBJECT classid="http://www.adresa.sl/hodinky.py">
<PARAM name="height" value="50" valuetype="data">
<PARAM name="width" value="50" valuetype="data">
Váš prohliadač nevie zobrazovať aplikácie napísané v jazyku Python
</OBJECT>

V tomto príklade sa volá program hodinky.py a sú mu odovzdané parametre height a width s hodnotou 50.  Samotné spracovanie záleží na programe, ale vo väčšine prípadov by mal nastaviť šírku a výšku na 50 pixelov.

A teraz ku klikacím mapám. Názory na ich používanie sa podobne ako pri rámcoch líšia. Do jazyka HTML však patria, a preto v našom seriáli nemôžu chýbať. Klikacie mapy umožňujú autorom špecifikovať oblasť obrázka alebo objektu a priradiť jej nejakú akciu.

Poznáme dva typy klikacích máp:

  • na strane klienta – keď používateľ aktivuje oblasť v mape prehliadač, zistí, aká akcia je tejto oblasti priradená, a odošle požiadavku na server.
  • na strane servera – po aktivácii oblasti sú serveru odoslané informácie o pozícii, na ktorej sa nachádza kurzor myši, a server podľa toho priradí príslušnú akciu.

Viac zastúpené sú klikacie mapy na strane klienta, a to z dvoch dôvodov: sú prístupné aj používateľom s negrafickým prehliadačom a server je zaťažovaný konkrétnou požiadavkou a nemusí zisťovať, čo má vlastne vykonať.  My sa práve preto zameriame na tento typ klikacích máp.

Pri aplikácii klikacích máp si vystačíme s dvoma tagmi – Map a Area.

Element Map
Tento párový tag ma veľmi jednoduchú syntax – dôležitý je totiž iba parameter name, ktorý určuje meno mapy. Jeho účelom je vyznačenie časti kódu, kde je špecifikované rozloženie oblastí na klikacej mape.

Element Area
V porovnaní s tagom Map je element Area o niečo zložitejší. Je dôležité zapamätať si, že kým tag Map bol párový, Area je nepárový. Jeho jednotlivé parametre sú:

  • shape – určuje tvar oblasti. K dispozícii je štvoruholník (shape=„rect“), kruh (shape=„circle“) a mnohouholník (shape=„poly“).
  • coords  - určuje umiestnenie objektu. Parametre sú umiestnené do spoločných úvodzoviek a oddelené čiarkou. Syntax je závislá od toho, aký tvar sme si zvolili (čo sme napísali do parametra shape).
  • shape=„rect“-  udáva sa ako súradnice jednotlivých hrán v poradí ľavá strana – súradnica X, horná strana – súradnica Y, pravá strana – súradnica X, dolná strana – súradnica Y. Týmto spôsobom je možné zadať ľubovoľný štvoruholník.
  • shape=„poly“ – postupne sa zadávajú súradnice všetkých bodov, z ktorých sa mnohouholník skladá, v poradí súradnica X1, súradnica Y1, súradnica X2, súradnica Y2... súradnica XN, súradnica YN. Ešte dodávam, že súradnica 0,0 je v ľavom hornom rohu klikacej mapy a jednotky sa udávajú v pixeloch.
  • nohref – tento atribút použijeme iba vtedy, ak oblasti nie je priradená žiadna akcia.
  • href – určuje adresu, na ktorú vybraná oblasť odkazuje.
  • alt – alternatívny text, ktorý sa zobrazí používateľom, ktorí majú vypnuté obrázky alebo používajú textový prehliadač.

Teraz už vieme teoreticky pripraviť obrázkovú mapu, ale ako ste si možno všimli, nijaký parameter prehliadaču nezadáva, ktorý obrázok sa má ako klikacia mapa použiť. Ak sa vrátime späť k elementu Map, zistíme, že jediným parametrom je name, určujúci meno mapy. Toto meno je potrebné napísať k obrázku, ktorý chceme pre túto mapu použiť, a to pomocou parametra usemap, ktorý vložíme fo tagu Img. Tu je príklad:

<HTML>
<HEAD>
<TITLE>Klikacia mapa</TITLE>
</HEAD>
<BODY>
.
.
.
obsah stránky
.
<IMG src="obrázok.jpg" ... ... usemap="#mapa"> parameter usemap prehliadaču  hovorí, že obrázok slúži ako mapa, ktorá bude špecifikovaná pod názvom mapa
.
.
<MAP name="mapa"> špecifikácia klikacej mapy. To, že sa táto mapa vzťahuje k obrázku obrázok.jpg, sa prehliadač dozvie z parametra name.
<AREA href="http://www.pcrevue.sk/".... > tu sa nastavujú parametre jednotlivých oblastí obrázka
<AREA href=...>

<AREA href=...>
<AREA href=...>
</MAP>

Skúsime si teraz vytvoriť jednoduché navigačné menu v tvare prúžka zloženého z napríklad troch ovládacích tlačidiel (obdĺžníkových oblastí). Začneme teda tým, že si v nejakom grafickom editore vytvoríme prúžok dlhý 300 pixelov a vysoký 25 pixelov. Zvislo ho rozdelíme na tri rovnako veľké časti. Každá bude mať rozmery 100 × 25 pixelov. Do týchto oblastí vpíšme nejaký text, napríklad odkazy na webové stránky. Obrázok potom uložíme napríklad pod názvom menu.gif.

Do stránky ho celkom jednoducho vložíme pomocou tagu Img, ale nesmieme zabudnúť na parameter usemap.

<IMG src="menu.jpg" align="left" height="25" width="300" usemap="#menu" border=0>

Teraz sa môžeme venovať klikacej mape. Obrázok máme rozdelený len na tri štvoruholníky, ktoré sú rovnako veľké, takže to bude pomerne jednoduché.  

<MAP name="menu">
<AREA shape="rect" coords="0,0,100,25" href="http://www.pcrevue.sk/" alt="PC Revue">
<AREA shape="rect" coords="100,0,200,25" href="http://www.tipyatriky.sk/" alt="Tipy a Triky">
<AREA shape="rect" coords="200,0,300,25" href="http://www.itnews.sk/" alt="IT News">
</MAP>


Ak vložíme tento kód do predchádzajúcej stránky, zobrazí sa naše menu a po kliknutí na jednotlivé tlačidlá sa otvorí príslušná adresa. Je veľmi dôležité, aby sme v tagu Img presne určili veľkosť obrázka, pretože by sa mohlo stať, že sa jednotlivé oblasti posunú, čo by mohlo návštevníka zmýliť.

Klikacie mapy, samozrejme, nemusíme vytvárať ručne. Odporúčal by som vám program Gimp, ktorý si môžete stiahnuť z www.gimp.org. Nájdete tam verziu Linux a už aj Windows. Je to skvelý grafický editor s množstvom prídavných funkcií a jednou z nich je právne rýchla, pohodlná a ľahká tvorba klikacích máp. Program je pod licenciou GNU\GPL. Na obrázku vidíte, ako jednoducho sa klikacie mapy v tomto programe tvoria.

Nevýhody klikacích máp:

  • Ak vytvoríte neprehľadnú obrázkovú mapu s mnohými aktívnymi oblasťami, bude používateľ zmätený a len veľmi ťažko nájde miesto, na ktoré vlastne chce kliknúť. Používateľovi musí byť na prvý pohľad jasné, že ten obrázok slúži na navigáciu.
  • Riešiť pomocou klikacích máp všetky odkazy nie je najlepší nápad, pretože obrázky sú vždy podstatne väčšie, ako keby ste odkazy riešili štandardným spôsobom (textom pomocou tagu A). Tým zbytočne predlžujete čas potrebný na načítanie stránky.
  • Klikacie mapy nie sú podporované všetkými prehliadačmi, preto nesmiete zabudnúť umiestniť na vhodnom mieste alternatívu, najlepšie pomocou textových odkazov.

Výhody klikacích máp:

  • Oproti navigačným menu zloženým z niekoľkých menších obrázkov má klikacia mapa výhodu, že sa naraz nesťahuje niekoľko súborov, ale iba jediný súbor, čo môže urýchliť prenos.
  • Pomocou klikacích máp sa dajú vytvoriť veľmi efektne vyzerajúce menu, ktoré by sme bežnými prostriedkami dosiahli len veľmi obťažne.

To je na tento mesiac všetko. Do budúceho pokračovania si môžete vytvoriť nejakú klikaciu mapu. V ďalšej časti sa budeme zaoberať tagmi, ktoré sme doteraz vynechávali. Pre prehľadnosť budú usporiadané podľa abecedy.


Autor: Igor Kulman

Nechajte si posielať prehľad najdôležitejších správ emailom

Mohlo by Vás zaujímať

Ako na to

Tipy a triky: Ako na snímku obrazovky na akomkoľvek počítači s Windows?

02.12.2016 00:13

Ak snímky obrazovky robíte často apotrebujete napríklad funkcie na posun stránok alebo snímanie zobrazenia pri vyššom rozlíšení displeja, zrejme používate nejakú špecializovanú aplikáciu. Väčšina použ ...

Ako na to 1

Tipy a triky: Ako aplikácii prednastaviť spúšťanie s administrátorskými právami?

30.11.2016 00:10

Väčšina aspoň trochu skúsenejších používateľov vie, že aj keď máte na operačnom systéme Windows vytvorený administrátorský účet, aplikácie pre bezpečnosť nefungujú vždy splnými administrátorskými práv ...

Ako na to 2

Tipy a triky: Ako vypnúť uzamykaciu obrazovku vo Windows 10?

29.11.2016 00:10

Rozčuľuje vás, že pred každým prihlásením doúčtu vášho počítača musíte prejsť uzamykacou obrazovkou? Windows 10 na tejto obrazovke ukazuje čas,dátum anejakú zaujímavú fotografiu zrôznych kútov sveta. ...

Žiadne komentáre

Vyhľadávanie

Kyocera - prve-zariadenia-formatu-a4-s-vykonom-a3

Najnovšie videá