COMPUTERWORLD
Specializovaný týdeník o výpočetní technice
o Internetu
(CW 22/96)

Klientské obrázkové mapy

Vzájemné propojení WWW stránek pomocí odkazů je to, co dělá web webem. V poslední době jsou velmi populární tzv. obrázkové mapy, kdy jednotlivé části (regiony) obrázku na WWW stránce ukazují na odpovídající HTML dokumenty.

Jejich tvorba není nikterak složitá, ale ještě před nedávnem nebylo možné používat tyto mapy bez spolupráce serveru. To je nevýhodné, protože server je nadměrně zatěžován, protože musí řešit každé kliknutí uživatele na obrázek. Některé stránky jsou umístěny na cizích serverech, kde není možné pracovat s CGI soubory použitými pro obsluhu map. A posledním mUnusem pro serverové obrázkové mapy je nemožnost pracovat s nimi bez účasti serveru, autor si tak nemůže svůj výtvor vyzkoušet, aniž by umístil své stránky na server.

Je velmi málo známo, že nyní lze pracovat s klientskými obrázkovými mapami, kde není nutná žádná podpora serveru. V tomto případě vše řeší prohlížeč uživatele, a odpadají všechny tři problémy zmíněné výše. Dva nejpoužívanější prohlížeče, Navigator 2.0 a Explorer 2.0, klientské mapy podporují společně s několika dalšími. Není proto důvod, proč nepoužívat tento rychlý a jednoduchý způsob, jak tvořit obrázkové mapy, které jsou tak populární.

Jak na to

Nejlepší je pořídit si nástroj, který tvorbu map podporuje. Několika tahy myši vytvoříte vše, co je potřeba a zbývá jen umístit takto vytvořený obrázek do dokumentu. Pokud chcete rozumět tvorbě obrázkových map blíže nebo nechcete používat žádný podobný nástroj, můžete je samozřejmě tvořit ručně.

1. krok

Nejprve si vytvořte obrázek, který bude reprezentovat propojení a umístěte ho na stránku touto definicí. Obrázek by měl být uložen ve formátu GIF.

<IMG SRC="nazev.gif">

2. krok

Potom je nutné definovat, že tento obrázek nebude pouze zobrazen, ale bude figurovat jako mapa. Takže předchozí řádek upravíte takto :

<IMG SRC="nazev.gif" USEMAP>

Pokud prohlížeč nepodporuje obrázkové mapy, ten bude pouze zobrazen a nebude možné na něj kliknout.

3. krok

Aby bylo možné dál s obrázkem pracovat, je nutné definovat jeho jméno přidáním další definice do předchozího řádku.

<IMG SRC="nazev.gif" USEMAP="#NAZEV">

4.krok

A nyní přichází poslední nejdůležitější krok, kdy definujete plochy pro jednotlivé odkazy. Není nejjednoduší dělat tuto práci ručně, zejména pokud máte na svém obrázku více odkazů. Definice mapy může být umístěna kdekoliv na stránce a vypadá asi takto.

<"MAP NAME="NAZEV">
<AREA SHAPE="RECT" COORDS="0,0,100,100" HREF="#top">
<AREA SHAPE="RECT" COORDS="100,100,200,200" HREF="#bottom>
</MAP>

Tato mapa při kliknutí na první oblast zobrazí začátek HTML souboru, druhá oblast konec HTML souboru. Pro definici oblastí jsou k dispozici tři možné tvary regionu - kruh, čtyřúhelník a polygon.

Kruh

Definice kruhové oblasti je velmi jednoduchá, je nutné zadat klasické hodnoty, středu a poloměru.

<AREA SHAPE="CIRCLE" COODRDS="x-střed,y-střed,poloměr" HREF="http://www.idg.cz">
Čtyřúhelník

Také čtyřúhelník není těžké definovat, zadáte souřadnice levého horního a pravého dolního rohu.

<AREA SHAPE="RECT" COORDS="levé-x, horní-y, pravé-x, spodní-y" HREF="http://www.idg.cz">
Polygon

Polygon se tvoří pomocí definice N počtu bodů, podle toho, jak požadovaná oblast vypadá.

<AREA SHAPE="POLYGON" "COORDS=x1,y1,x2,y2,x3,y3,xN,yN" HREF="http://www.idg.cz">

U každé oblasti je také možné použít za definicí typu objektu atribut ALT="Nazev", který u negrafických klientů nezobrazí sice obrázek, ale alespoň názvy s možností kliknout na ně. Hodně štěstí při tvorbě vašich obrázkových map!


| <<< | CW o Internetu | COMPUTERWORLD | IDG CZ homepage |