Se společností Menhart Creative Communications jsme vytvořili webovou prezentaci pro developerský projekt Zahrada. Naší náplní práce bylo celou prezentaci nakódovat a naplnit obsahem. V rámci prezentace je i vyhledávání bytů a to jak pomocí formuláře, tak i pomocí 3D náhledu celého projektu. Jasná práce pro Flash, řekl by si každý zkušenější webový vývojář. My jsme Flash bohužel použít nemohli, protože jsme dostali pokyn, že se do klikací mapy bude zasahovat i po spuštění. Proto jsme použili klasickou klikací mapu a Javascript, respektive jQuery knihovnu. Myslíme si, že řešení je hezké a efektivní, proto se o něj chceme podělit. Požadavek na zpracování zněl: "Vytvořit z 3D náhledu sídliště proklik na každé patro. Při najetí na patro se patro zvýrazní světle modrou barvou a zbytek domu mírně zesvětlá."

První krok byl jasný a jednoduchý. Vytvořili jsme si klikací mapu z pater jednotlivých domů. Práce nenáročná, nicméně jsme museli být velmi pečliví a přesní, aby se patra nepřekrývala. Pomocí jQuery pluginu maphilight jsme jednotlivá patra dokázali zvýraznit. Druhý krok pro nás byl jasný, provázat jednotlivá patra, tak aby se každé patro při najetí myši zvýraznilo modře (což již dělalo, díky skriptu) a zbytek pater domu zesvětlal, ale právě zde nastal zřejmě největší problém. Provázání problém nebyl, ale skript nám nedovoloval využívat dvě různé definice barev pro jednu oblast a navíc nám při přejíždění z patra na patro oblasti nehezky problikávaly. Tudíž jsme daly hlavy dohromady a vytvořily jsme mezi podkladovým obrázkem a klikací mapou prostřední vrstvu, která je složená z divů. Každý div obsahuje zesvětlený obrázek domu a je napozicován tak, aby přesně překrýval dům z podkladové vrstvy. Jelikož mezi obrázek a klikací mapu nelze vložit vrstvu "jen tak" (klikací mapě nelze nastavit z-index), tak jsme na klikací mapu (patra) navázali průhledný GIF obrázek.

[clanky/zahrada-nux-represent.png]

Po vytvoření prostřední vrstvy jsme divy navázaly na jednotlivá patra a bylo téměř hotovo. Zbývalo doplnit tooltipy ke každému patru. 3D náhled mapy je zcela funkční a jednoduše editovatelný v HTML. Ostrou verzi naleznete na stránkách projektu Zahrada To je život.