HaTMatiLka
Lekce 8
Lekce Obrázková mapa

Od časů, kdy HaTMatiLka byla pouze textová, uplynulo hodně paketů. Prvním grafickým prohlížečem byl Mosaic, později se objevil Netscape, Internet Explorer a řada dalších. Stránky zkrásněly o obrázky, všelijaká tlačítka, šipky a podobné efekty.

Brzy se objevila potřeba udělat jeden obrázek, jehož části by odkazovaly na různé dokumenty. Cesta byla jednoduchá: obrázek, citlivý na myší ukazovátko, odeslal na server pozici myši a ten rozhodl, co bude posláno zpět. Mělo to jednu vadu — bylo to nepohodlné.

Proto vznikla pohodlnější cesta, jménem „klientské mapy” (client side image maps). Princip je stejný, jako v předcházejícím odstavci, jen práci serveru nahradil sám prohlížeč.

Tvorba takovéto mapy má dvě části. Tou první je rozdělení obrázku na části a popis těchto oblastí v definici mapy. Druhou je vlastní vložení obrázku.

Definice mapy odkazů

Nejjednodušším příkladem je dělené tlačítko: 7-8-9.

Jeho velikost je 64×24 bodů. Požadavkem je, aby ukazovalo na lekce 7, 8 a 9 tohoto kursu.

Jak vidno, je rozdělené na tři části. První je obdélník [0,0]-[20,23], druhou obdélník [21,0]-[42,23] a třetí pak má rohy [43,0]-[63,24]. Pro zjednodušení pomíjím, že část je kulatá.

Definice citlivého prostoru bude vypadat:
                    
<map Name="tlac1">
  <area shape="rect" coords="0,0,20,23" HRef="HTML-07.htm">
  <area shape="rect" coords="20,0,41,23" HRef="HTML-08.htm">
  <area shape="rect" coords="42,0,63,23" HRef="HTML-09.htm">
</map>

Jak vidíte, celá definice se skládá z tagů a neobsahuje žádný text. To proto, aby se zachovala kompatibilita se starými prohlížeči.

Je ohraničena tagem <map>, jehož parametrem je jméno definované oblasti. To umožňuje definovat v jednom dokumentu více map s různými jmény.

Následují definice oblastí. Přestože teoreticky je možné definovat oblasti několika typů, většina browserů podporuje zatím jen shape="rect", tedy obdélník. Následuje parametr coords="nn,nn,…", popisující souřadnice oblasti, tedy pravý horní a levý dolní roh obdélníka. (Souřadnice je nejjednodušší zjistit při editaci obrázku.)

Pokud se někde souřadnice překrývají, platí vždy ta oblast, která je uvedená jako první!

Parametr HRef="URL" je známý z odkazů. Připomínám, že může obsahovat lokální link typu "#priklad1".

Obrázek — mapa

Samotné definice obrázku se jeho „zmapování” příliš nedotkne. Jediné, co přibyde, je parametr USEMAP="#mapname" se jménem použité mapy.

Pokud se někomu zdá, že jde vlastně o lokální odkaz, tak se mu to nezdá — ono to tak skutečně je. Vyplývá z toho jediné: klidně můžete definovat mapy v jiném souboru a ze všech ostatních se na ně odkazovat jako na USEMAP="file.map#mapname".

Naše tlačítko bude vypadat: <img src="L-08-02.gif" width="64" height="23" alt="7-8-9" USEMAP="#tlac1">

7-8-9

Dodávám, že jest záhodno zadávat rozměry obrázku. Mělo by se pro něj rezervovat místo na obrazovce a mapa by měla fungovat, i když se nezobrazí.

Na závěr této lekce ukázka trošku složitější mapy. Samo slovo „mapa” přímo svádí k takovému příkladu.

<img src="L-08-01.Gif" width="575" height="100" USEMAP="L-08-01.Htm#world">
Domácí úkol:
Doplnit domovskou stránku a spřízněné dokumenty o základní navigaci pomocí dělených tlačítek.
Obsah  
Lekce 1
Lekce 2
Lekce 3
Lekce 4
Lekce 5
Lekce 6
Lekce 7

mapy
definice
obrázek
úkol

Lekce 9
Lekce 10
Lekce 11
Lekce 12

 Lekce 9
© Robert R. Šimek, 1997