Adam Marčan
webdesigner

Určitě jste se už někdy na webu setkali s použitím image mapy, obrázkem, který odkazoval svými různými částmi na jiné stránky. Typickým příkladem je použití pro rozdělení nějaké mapy na státy, kraje a podobně. Vezměte si třeba že vlastníte velkou nadnárodní společnost v Evropě a v každém státě máte svou pobočku. Na vašem webu chcete mít Introduce site, neboli Úvodní stránku, na které bude mapa Evropy. Chcete realizovat, aby jednotlivé státy na mapce byly odkazem na Vaše dceřinné pobočky. Co tedy použijete? Klikací mapu.

Můžete se v tom patlat sami a počítat souřadnicové body, což je prakticky nereálné, nebo můžete použít nějaký z chytrých programů, který to udělá za vás za tisícinu času. Prohrabal jsem se mezi několika programy, které tuto dovednost slibují. Některé byly zbytečně složité, obalené dalšími, pro nás nechtěnými funkcemi. Některé byly méně, či více použitelné. Opravdu mě ale zaujal pouze jeden – Handy ImageMapper!

Nejprve bych chtěl ty, kteří o klikací mapě na obrázku slyší poprvé, odkázat na trochu teorie. Je totiž dobré chápat aspoň špetku z tohoto řešení.

Handy ImageMapper obsahuje pouze nástroje, které využijete k tvorbě klikací mapy na obrázku. Čeká vás tedy skvělá orientace a použitelnost, program pochopíte v mžiku vteřiny. Pro tápající je v pravém dolním rohu tlačítko Help.

Tento program umí dělat klikací oblasti ve tvaru circle, rectangle a polygon, neboli ve tvaru kolečka, obdélníku, čtverce a mnohoúhelníku, který je pro nás tím pravým, chceme totiž vytáhnout hranice států. Ty ale nejsou obdélníkové ani jinak symetricky stejné (bohužel války nebyly tak přesné ). Mnohoúhelník je tedy naším nástrojem číslo jedna.

Určitě víte jak kostrbaté jsou hranice Evropy a určitě tušíte, že je nehodlám jen tak zbůhdarma na ukázku obkreslovat :o) Našel jsem typický, již hotový příklad na webu Evropa.adam.cz. Pokud jste se už pokochali touto pracnou potvůrkou, dovolte mi ukázat vám rychlý a praktický příklad z jiného prostředí – z fotky.

Poslouží nám fotka sedadlového stolku Pendolina, na kterém leží časopisy, nějaké sladkosti a podobně. Otevřel jsem si tedy tuto fotku pomocí tlačítka Otevřít nahoře v pravé části.

Tak a začneme vybírat jednotlivé předměty (oblasti) na fotce. Později jim nastavíme kam mají linkovat a jejich titulek… Vybereme si tedy jeden z nástrojů (circle, rect, polygon) a začneme vytahovat cestu klikací oblasti předmětu. Kruh a obdélník a čtverec řešit myslím nemusíme, jen kliknout a táhnout. Mnohoúhelník je o něco složitější, klikněte a táhněte do strany, utvoří se vám čára. Chvíli jsem byl zoufalý nevěděl jsem proč nemůžu pokračovat dále dalším bodem pro obtáhnutí klikací oblasti.

Tlačítko Help dole vpravo mi prozradilo, že další body přidám kliknutím pravým tlačítkem myši. Přepněte se ale z nástroje Polygon zpátky na Moving cursor, obyčejnou šipku. Nyní tedy můžete začít přidávat další body a roztahovat je na místa kam potřebujete. Je to trošku podobné jako práce s perem v grafických programech. Zkuste to sami a uvidíte.

Tak teď ještě vytáhnu oblasti i pro další předměty a pustíme se k nastavení odkazů…

Když už máme tedy všechny oblasti, které chceme mít aktivní, na obrázku označené. Vybereme kliknutím kurzoru jeden z předmětů, já si vybral jako první Snickers tyčinku. Zaktivní se nám v pravé části políčka Coords, Tooltip a HREF. Coords jsou souřadnice bodů našeho předmětu, to nás nemusí moc zajímat. Tooltip je Title, klasický HTML popisek, jak jej už jistě dobře známe. HREF je cesta odkazu, na kterou kliknutí na předmět povede. Vyplníme tedy tyto vlastnosti všem předmětům na obrázku.

Teď když máme všechno vyplněno, doplňme ještě název naší klikací mapy, není to ale nic důležitého, klidně můžete nechat defaultní map1. Nyní klikněte na spodní tlačítko Place On Clipboard, HTML kód, který jste dosud neviděli se nyní zkopíroval do schránky… teď přejděte do vašeho HTML editoru a dejte CTRL+V nebo klikněte pravým a vyberte z nabídky Vložit.

Vygenerovaný kód se vám zkopíroval na vámi určené místo ve vašem HTML dokumentu. Popisovat si ho nebudeme, k tomu slouží odkaz na teorii, o kterém jsem se zmínil dříve…

Nakonec tedy servíruji odkaz na můj hotový pokus. A samozřejmě odkaz na program Handy ImageMapper, který je freeware a to se vyplatí, ne? 

Dalo by se to samozřejmě pořádně vymazlit hover efektem a podobně… ale to už je zase jiný příběh. :o) Možná příště 

Pokud jste vlastníkem Adobe Dreamweaveru, tak se na tohle všechno vykašlete, tuto funkci má Dreamweaver v sobě, a je trošku více intuitivnější.

image map editor, klikací mapa, odkazy v obrázku