Nebuďte škrti, nasaďte mapy!

Určitě jste již někdy při svém brouzdání po Internetu narazili na stránky s pěknou a přehlednou grafikou, která v


Určitě jste již někdy při svém brouzdání po Internetu narazili na stránky s
pěknou a přehlednou grafikou, která vás lehce dovedla k cíli. Často je toho
dosaženo pomocí tzv. "image maps", které jsou ve výzbroji většiny prohlížečů
již od jejich dřevních dob. A aby i vaše stránky ožily klikacími mapami, jsou
zde následující odstavce.
Asi nejlepší bude začít trochou teorie tzv. "image maps" jsou, jak již vyplývá
z předchozího textu, obrázky, které jsou podobně jako normální odkazy klikací.
Toho lze dosáhnout dvěma způsoby pomocí metody "server-side" a "client-side".
Nechte pracovat server
V prvním případě jsou veškerá data o tom, kam který bod či oblast odkazuje,
uložena na serveru, který podle klientem poslaných dat (pozice v obrázku)
rozhodne, kam webový prohlížeč pošle dále. Tato varianta má své opodstatnění
např. u dynamicky generovaných obrázků a nebo u různých soutěží a backdoor
vstupů uživatel totiž netuší, kam ho kliknutí přenese. Přesto je tato varianta
méně používána, jednak z nutnosti složitější konfigurace serveru (např. pro
Apache je nutné kompilovat speciální modul) a také pro zvýšené nároky na server.
Raději klienta
Právě pro výše uvedené důvody se více prosazuje klientská varianta, kdy je
webovému prohlížeči předána kromě obrázku také mapa odkazů. To umožňuje
browseru zobrazovat uživateli cesty, kam který region ukazuje a tím mu ulehčit
navigaci. Jejich zadávaní a tvorba je opravdu velice jednoduchá, kdy většinu
práce odvádějí parametry MAP a AREA. Vše je asi nejlépe pochopitelné na
jednoduchém příkladu:
<MAP name="pokus">
<AREA SHAPE="rect" COORDS="0,0,19,29" HREF="/pokus" ALT="Odkaz na pokus">
</MAP>
<IMG SRC="/images/pokus.gif" alt="Pokus o klikací mapu" usemap="pokus">
V tomto případě jsme definovali mapu odkazů s názvem pokus, kterou poté
použijeme pro navigaci u obrázku pokus.gif. Vlastní jméno mapy může být
libovolné, ale pro jistotu se vyvarujte speciálních českých znaků a jména volte
tak, aby nemohlo dojít k situaci, že na stránce budete mít dvě mapy se stejným
názvem.
Jak je vidět z příkladu, vlastní mapa se skládá z jednoho a více elementů AREA,
které obsahují vlastní předpisy pro klikací mapy. Obecná syntaxe tohoto příkazu
je
<AREA SHAPE=typ HREF=url COORDS=koordináty ALT =text>, kde význam jednotlivých
parametrů je následující:
typ může být buď rect (čtverec zapotřebí jsou čtyři parametry u koordinátů levý
horní roh a pravý spodní), nebo circle (kruh tři parametry v roli středu a
poloměru) a nebo poly (polygon neomezený počet parametrů vždy ve dvojicích
definující jednotlivé body plochy),
url definuje internetovou adresu, kam daný odkaz bude směřovat; zde je nutno
podotknout, že kromě parametru HREF lze použít i NOHREF v takovém případě bude
tento region brán jako nikam neodkazující,
koordináty obsahují definice jednotlivých bodů v závislosti na typu a skládají
se většinou z dvou parametrů -z x-ové a y-ové souřadnice, kdy horní levý roh
obrázku má hodnotu (0,0),
text bude zobrazen u textových prohlížečů jako link, u grafických prohlížečů
bude většinou použit jako plavoucí hint, který se zobrazí při najetí na danou
plochu.
No a to je vše, na závěr se nesmí zapomenout na parametr usemap v tagu IMG a
vaše první klikací mapa je na světě.
0 1757 / alsn









Komentáře
K tomuto článku není připojena žádná diskuze, nebo byla zakázána.