Aktivní prvky na klikací mapě pomocí JavaScriptu

Následující článek ukazuje, jak lze pomocí JavaScriptu vytvořit jednoduchou klikací a prosvětlovací obrázkovou mapu, ve které vystačíme s jediným podkladovým obrázkem. Příklad bude bohužel funkční pouze pod Internet Explorerem.

Vytvořená klikací mapa vypadá následovně. Pokud najedete myší nad domečky, tyto se zvýrazní a kliknutím můžete odskočit na – zde většinou neexistující – odkaz:

Uvedená technika je založena na poměrně málo využívané vlastnosti přiřazení podkladového obrázku tabulce – jinými slovy, to co vidíte, je tabulka o 15x10ti buňkách, která má jako podklad definován obrázek s mapou městečka. Jednotlivé buňky pak obsahují nad významnými objekty průhledný obrázek, zarámovaný v HTML odkazu, u jednoho každého je pomocí handlerů událostí onMouseOver a onMouseOut vytvořen známý „překlápěcí“ efekt – záměna průhledného obrázku za červený kroužek.

Tolik k principu této techniky, řekněme si ještě, proč nefunguje na prohlížeči Netscape – ten sice zná pozadí tabulky, vykresluje je však v každé buňce nikoliv ze správné pozice podkladového obrázku, ale z jeho části od pozice 0,0 – tedy znovu od levého horního rohu. Totéž se stane, když v některé buňce definujeme byť i průhledný obrázek nad pozadím – nelze proto uvedenou vlastnost (či spíše chybu) obejít použitím „tabulky v tabulce“. Výsledný grafický efekt je sice zajímavý, v praxi však nepoužitelný. Tak se alespoň jeví Netscape ve verzi 4.73, na níž byl tento skript zkoušen.

Pojďme zpět k implementaci. Prvním úkolem skriptu je nějakým vhodným způsobem uložit do příslušných proměnných pozici, URL a další atributy významných míst na mapě – zde domečků. Využijeme oblíbené objekty, kdy nejprve definujeme konstruktor objektu, s jehož pomocí vytvoříme a uložíme do pole high1 5 objektů, popisujících významná místa mapy. Indexy iX a iY určují pozici v buňkách tabulky, začínající nulovým indexem:

Oba použité překlápěcí obrázky – obrázek prázdného čtverečku 20×20 pixelů a obrázek červeného kroužku s průhledným pozadím téže velikosti natáhneme do pomocných proměnných (eliminujeme tak nutnost jejich opětovného stahování ze serveru při každém překlopení):

Hlavní částí příkladu je funkce CreateHighlightMap, přijímající čtyři argumenty: jméno souboru s podkladovým obrázkem, rozměr mapy ve čtvercích 20×20 pixelů ve směru osy X a Y, a odkaz na pole, v němž je uložen popis významných míst mapy – viz výše.

Jde v podstatě o sadu volání document.write, majících za úkol vykreslit tabulku a „naskládat“ do ní v příslušných buňkách výše popsanou konstrukci s voláním překlápěcích skriptů. Zajímavá je snad jen třetí zanořená smyčka (for k), která testuje, zda právě vykreslovaná buňka tabulky obsahuje významné místo čili nic. Nejedná se – měřeno rychlostí skriptu – zrovna o vrchol efektivity, v tomto případě však nejde o skript, jehož rychlostní náročnost by byla kritická.

Skript je do určité míry parametrizovatelný, je však potřeba udržet jakousi kázeň při práci – zejména pixelová velikost mapy by měla být násobkem 20ti v obou směrech, při volání funkce je pak potřeba zajistit správné předání parametrů dvou nekrajních parametrů – velikosti výsledné tabulky. Zde je příklad volání funkce CreateHighlightMap použitý v ukázce, pro velikost mapy 300×200 pixelů, tedy velikost tabulky 15×10 buněk:

A To he vše, prostoru k další práci a vylepšování je jako obvykle dost, takže vám přeji příjemný den.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.