Zprávy |  Hardware |  PDA |  MP3 |  Design |  Windows 98 |  Windows NT/2000 |  Vývoj |  Soubory |  Slovník |  Poradna |
 Hledání:
  
 Pokročilé  Máte problém?
Živě o počítačích a Internetu
Kanál pro kapesní počítače Živě si čte 575 lidí  
         
Soutěž o tričko Actrix - ZDE!
Vývoj
 Apache a IIS
 ASP a skripty
 HTML
 Průvodci
 Doporučené weby
 Výuka HTML

 EnglishEnglish

Živě
 Články za týden
 Nové příspěvky
 Nejčtenější články
 Ankety
 Autoři
 Reklama na Živě
 Kontakt na redakci
 Živě pro váš server
 Hledáme autory!
 Volná místa v IT

Nakupujte živě
Přecházíme na Microsoft Windows 2000
Mečiar Jozef, Computer Press
Příchod Microsoft Windows 2000 byl „na spadnutí“ po řadu měsíců, ale teprve nyní, téměř čtyři roky po uvedení Windows NT 4, od nich přebírají žezlo nejrozšířenějšího síťového operačního systému. Zatímco ...

170,00 Kč
Jak vytvářet www stránky - 21. díl
Karel Kilián HTML - 2. 5. 2000 0:00

Tématem tohoto dílu budou obrázkové nebo též "klikací" mapy. Názory na jejich použití se liší - můžete se setkat s názory, že klikací mapy jsou přežitkem a jejich použití není z mnoha důvodů doporučené, jiné zdroje je zase doporučují, neboť umožňují snadné vytváření různých menu. Ať je pravda na té které straně, obrázkové mapy jsou součástí HTML a proto v našem seriálu prostě nemohou chybět.
Pošli článek
Tiskni článek
Přidej názor
Textová inzerce
Volna-mista.cz: více než 1 600 pracovních príležitostí
Vltava: NEJLEVNĚJŠÍ hudební CD a DVD na českém trhu
Pauza: Ropa za zbraně?
FlashFun: bav se, hrej hry na Internetu a VYHRAJ super věci!
Sháníte mobilní telefon?: Vyberte si z bohaté nabídky za nejlepší ceny ...
Mobilmania: NOVÝ internetový časopis o mobilních telefonech a operátorech
Aktuální články
Slovník
Není vám jasný nějaký pojem? Zeptejte se slovníku Živě:

Obrázkové mapy umožňují autorům specifikovat oblast obrázku nebo objektu a přiřadit této oblasti nějakou akci (například otevření jiné stránky, spuštění programu atp.).

Rozlišujeme dva typy obrázkových map:

  • na straně klienta - když uživatel aktivuje oblast v mapě (obvykle kliknutím myší), prohlížeč zjistí, jaká akce je této oblasti přiřazená a odešle požadavek na akci serveru.
  • na straně serveru - po aktivaci oblasti jsou serveru odeslány informace o pozici, na které se nachází kurzor myši, a server podle toho přiřadí příslušnou akci.
Více preferovány jsou obrázkové mapy na straně klienta a to ze dvou důvodů: jsou přístupné i uživatelům s negrafickým prohlížečem a především při aktivaci je server zatěžován konkrétním požadavkem a nemusí zjišťovat, co má vlastně provést. Proto se zaměříme právě na tento druh obrázkových map.

K aplikaci obrázkových map vystačíte se dvěma tagy - MAP a AREA.

Element MAP

Tento párový tag se vám určitě bude líbit, neboť má velmi jednoduchou syntaxi - důležitý je totiž pouze parametr name, který určuje jméno mapy. Jeho účelem je vyznačení části kódu, kde je specifikováno rozložení oblastí v obrázkové mapě.

Element AREA

Zatímco tag MAP obsahoval jen jediný parametr, element AREA je ve srovnání s ním o něco složitější. Důležité je zapamatovat si, že zatímco MAP byl párový tag, AREA je nepárový (norma HTML podle W3C dokonce označuje uzavírací tag za zakázaný!). Podívejme se tedy nejprve na jednotlivé parametry:
  • shape - určuje tvar oblasti. K dispozici je čtyřúhelník (shape="rect"), kruh (shape="circle") a mnohoúhelník (shape="poly").
  • coords - určuje umístění objektu. Parametry jsou umístěny do společných uvozovek a odděleny čárkou. Syntaxe je závislá na tom, jaký jste zvolili tvar oblasti (tj. co jste zapsali do parametru shape)
  • shape="rect" - udává se jako souřadnice jednotlivých hran v pořadí levá strana-souřadnice X, horní strana-souřadnice Y, pravá strana-souřadnice X, dolní strana-souřadnice Y. Tímto způsobem zadáte libovolný čtyřúhelník.
  • shape="circle" - zadávají se souřadnice středu a poloměr kruhu v pořadí souřadnice X, souřadnice Y, poloměr.
  • shape="poly" - postupně se zadávají souřadnice všech bodů, z nichž se mnohoúhelník skládá v pořadí souřadnice X1, souřadnice Y1, souřadnice X2, souřadnice Y2, ..., souřadnice XN, souřadnice YN.
    Pro úplnost zbývá dodat, že souřadnice 0,0 je v levém horním rohu obrázkové mapy a jednotky se udávají v pixelech.
  • nohref - tento atribut použijte pouze tehdy, když oblasti není přiřazena žádná akce.
  • href - určuje adresu, na kterou vybraná oblast odkazuje.
  • alt - alternativní text, který se zobrazí uživatelům, jež mají vypnuté obrázky nebo používají textový prohlížeč.
Nyní teoreticky umíme připravit obrázkovou mapu, ale možná jste si všimli, že vůbec žádný parametr prohlížeči neříká, který obrázek na stránce má pro tuto mapu použít. Vraťme se tedy ještě jednou k elementu MAP - jediným parametrem je zde atribut name určující, jak jsme si řekli, jméno mapy. Toto jméno je nutné zapsat k obrázku, který chceme pro tuto mapu použít a to sice pomocí parametru usemap, který včleníme do tagu IMG. V zásadě tedy kostra obrázkové mapy může vypadat následovně:

<HTML>
<HEAD>
<TITLE>obrázková mapa</TITLE>
</HEAD>
<BODY>
.
.
.
vlastní obsah stránky
.
<IMG src="obrazek.gif" ... ... usemap="#obrmapa"> parametr usemap prohlížeči sděluje, že obrázek slouží jako mapa, která bude specifikována pod názvem obrmapa
.
.
<MAP name="obrmap"> specifikace obrázkové mapy. To, že se tato mapa vztahuje k obrázku obrazek.gif se prohlížeč dozví z parametru name.
<AREA href="http://www.zive.cz/".... > zde se nastavují parametry jednotlivých oblastí obrázku
<AREA href=...>
<AREA href=...>
<AREA href=...>
</MAP>

Zkusíme si tedy vytvořit jednoduché navigační menu ve tvaru proužku složené z pěti ovládacích "tlačítek" (tedy obdélníkových oblastí). Začněme tedy tím, že si v nějakém grafickém editoru vytvoříme proužek dlouhý 400 pixelů a vysoký 25 pixelů. Tento proužek vertikálně rozdělte na pět stejně velkých oblastí (tj. každá oblast bude mít rozměry 80x25 pixelů), případně můžete obarvit pozadí.

Názorná ukázka, jak by mohl váš obrázek vypadat

Do těchto oblastí vepište názvy rubrik, sekcí nebo jiné popisky, podle kterých uživatel pozná, kam která část mapy odkazuje.

A tady máme menu v plné kráse

Výsledný obrázek uložte například pod názvem menu.gif.

Do stránky jej vložíte zcela jednoduše pomocí tagu IMG, ovšem nezapomeňte na parametr usemap!

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

Nyní se již můžeme zabývat naší klikací mapou. Vzhledem k tomu, že se jedná o obrázek, jehož oblasti jsou čtyřúhelníkového tvaru a jsou stejně velké, bude jejich určení poměrně jednoduché.

<MAP name="menu">
<AREA shape="rect" coords="0,0,80,25" href="http://www.zive.cz/" alt="Živě">
<AREA shape="rect" coords="80,0,160,25" href="http://www.vltava.cz/" alt="Vltava">
<AREA shape="rect" coords="160,0,240,25" href="http://www.aukce.cz/" alt="Aukce">
<AREA shape="rect" coords="240,0,320,25" href="http://www.doupe.cz/" alt="Doupě">
<AREA shape="rect" coords="320,0,400,25" href="http://www.pauza.cz/" alt="Pauza">
</MAP>

Pokud pak vložíte tento a předcházející kód do stránky, mělo by se vám zobrazit naše menu, přičemž po kliknutí na to které "tlačítko" se otevře příslušná adresa.

Poznámka: velmi důležité je určení velikosti obrázku v tagu IMG, neboť zadáte-li velikost nesprávně, může se stát, že se jednotlivé oblasti posunou, což bude pro návštěvníka vašich stránek velmi nemilé.

Nevýhody obrázkových map:

  • Vytvoříte-li nepřehlednou obrázkovou mapu s mnoha aktivními oblastmi (zejména nevhodné jsou pro tyto účely fotografie), bude uživatel zmaten a jen velmi obtížně najde místo, kam má vlastně kliknout. Dejte tedy pozor na to, aby bylo na první pohled patrné, že obrázek slouží k navigaci.
  • Řešit pomocí obrázkových všechny odkazy není zrovna nejlepší nápad, protože obrázky jsou vždy výrazně větší, než kdybyste odkazy řešili standardním způsobem (tj. textem pomocí tagu A). Tím zbytečně zvyšujete "váhu" celé stránky a prodlužujete dobu nutnou k jejímu načtení.
  • Obrázkové mapy nejsou podporované všemi prohlížeči, proto nezapomeňte dát na vhodném místě k dispozici jejich alternativu, nejlépe pomocí textových odkazů.
Výhody obrázkových map:
  • Proti navigačním menu složeným z několika menších obrázků má obrázková mapa tu výhodu, že se nestahuje několik souborů současně, ale pouze jediný soubor, což může urychlit přenos.
  • Pomocí map se dají vytvořit velmi efektně vypadající menu, kterých bychom běžnými prostředky dosáhli jen velmi obtížně.
Ať se tedy na svých stránkách rozhodnete pro použití obrázkových map či nikoli, přeji vám hodně štěstí při jejich osvojování. Samozřejmě za týden se můžete těšit na další pokračování našeho seriálu.

Související články:

Zajímá-li vás bližší pohled na tento článek, podívejte se na něj v souvislostech.


 Diskusní fórum čtenářů (2 zprávy)
[Nový příspěvek][Vypsat vše]

Copyright 1996-2000 Computer Press, a.s., realizační tým