Přejít k navigační liště

Zdroják » Různé » Obrazová mapa s hover efektem

Obrazová mapa s hover efektem

Články Různé

Ne jen samými novými technologiemi a frameworky živ je webař. Někdy je také třeba vymyslet řešení pro, na první pohled triviální, věc – jako třeba interaktivní mapa ČR s vyznačenými kraji, která bude reagovat na „ježdění myší“ a zvýrazňovat kraje (hover) a bude navíc umožňovat mít jeden kraj vybraný.

Živím se jako HTML a CSS kodér, poslední dobou častěji přičichnu i k JavaScriptu. Někdy narazím na zajímavý problém, který se snažím vyřešit – což je případ dnešního článku. Pro někoho bude toto téma objevováním Ameriky, pro někoho objevem nepříliš atraktivního cípu severního Mongolska. Ať už se na vašem globusu poznání budeme pohybovat kdekoliv, dnes se podíváme na „klikací“ obrazovou mapu a trochu ji oživíme.

Zadání

Vytvoříme klikací mapu ČR s hover efektem na jednotlivých krajích. Aby to bylo zajímavější, zachováme barevné označení aktuálně zvoleného kraje a hover efekt ostatních krajů provedeme jinou barvou.

Obrazová mapa

Tvořit samotnou klikací mapu je v podstatě nuda. Na obrázku se vytyčí mnohoúhelníky a elipsy, které po kliku vedou na cílovou stránku. Pro Windows existuje program Handy ImageMapper, který nabízí vcelku pohodlnou cestu k získání potřebných polygonů, ve kterých bude klikací mapa reagovat. Jistě se bude hodit možnost nahlédnout do návodu, jak s programem efektivněji pracovat. Výstup z programu je vhodné upravit, ale to důležité – polygony – umí dobře.

Vytvoříme hranice prvního kraje…

Vytváříme druhý kraj – všimněte si překryvu oblastí (viz tip)

<img src="img/cr.png" id="mapa-cr-img" usemap="#mapa" alt="Mapa ČR" />
        <map name="mapa" id="mapa">
                <area shape="poly" coords="137,35,139,43,146,38" href="?region=kraj1" title="Kraj 1" alt="Kraj 1" />
                <area shape="poly" coords="123,73,117,65,113,67" href="?region=kraj2" title="Kraj 2" alt="Kraj 2" />
                <area shape="poly" coords="125,73,123,82,137,61" href="?region=kraj3" title="Kraj 3" alt="Kraj 3" />
                <area shape="poly" coords="82,84,93,90,101,93,79" href="?region=kraj4" title="Kraj 4" alt="Kraj 4" />
</map>

Ukázka HTML kódu image mapy

Přesto hardcore kodérům nebráním v ručním zápisu jednotlivých souřadnic.

TIP – klikací mapa není puzzle

Polygony se mohou překrývat. První – v ukázce na 3. řádku – bude vykreslen zcela nahoře, klikatelný v celé své ploše. Polygony z následujících řádků se zobrazují pod ním v pořadí jejich zadání. Tedy druhý (4. řádek) bude pod prvním, třetí (5. řádek) pod prvním i pod druhým atd. Polygon z posledního řádku bude vykreslen zcela vespod, překrývají jej všechny dříve definované.

Pokud nemají být na mapě neaktivní plochy – „slepé“ mezery mezi polygony – nemusíte tvořit přesné „švy skládačky“. Začnete-li s definicemi od spodních řádků, můžete si dovolit udělat přesah do sousední plochy. Obrys hranice pak vytyčíte polygonem definovaným o řádek výš, kterým vzniklý přesah „oříznete“.

A Prahu můžete udělat i trochu větší – aby se na ni klikalo pohodlněji. Tak či onak, máme hotovou surovou mapu, kde každý klik vede na patřičnou url.

Příklad: https://www.zdrojak.cz/wp-content/uploads/ukazka/ma­pa/mapa.php

Brute force řešení, nebo horská dvojkombinace?

Abych minimalizoval zmatek v názvosloví, přidržím se následujících termínů a jejich užití:

  • Označení – barevná odlišnost aktuálně vybraného kraje na mapě (stránka/pozice kde jsem) – červená
  • Zvýraznění – barevná odlišnost kraje pro hover efekt (kam mohu jít) – žluto-oranžová
  • Rollover – obrázek na pozadí obsahující všechny možnosti zvýrazněných krajů – hover efekt

Využijeme prostou (a tím geniální) Pixyho techniku Rychlé rollovery bez načítání. V čem spočívá? Jeden obrázek umístěný na pozadí bude obsahovat všechny očekávané stavy mapy. Vhodným posouváním pozadí – rolloveru – dosáhneme zobrazení správných obrázků v odpovídajících situacích. Vyhneme se tak nutnosti načítat předem jednotlivé obrázky a také nežádoucímu problikávání obrázků v případě zvýrazňujícího hover efektu, když bychom je načítali až v okamžiku jejich zobrazení.

Moment… Jak vidno, mohli bychom vystačit s jedním obrázkem – rolloverem. Tedy, spíš s plachtou. Při 14 krajích České republiky vychází slušivých 211 kombinací (včetně variant bez/s zvýrazněné a/nebo označené pozice). Tolik mapek se mi dělat nechce. Nehledě na definování jednotlivých stavů zobrazení (i když chápu, že po rozcvičce s polygony někomu „pár XY souřadnic“ může připadat jako procházka růžovým sadem).

Raději zkombinujeme transparentní obrázky obsahující označené kraje a rollover, kterým zvýrazníme kraje pod kurzorem myši. K tomu nám bude stačit rollover čítající 14 zvýrazněných pozic na mapě + jedna základní mapka bez zvýraznění. Stejný bude i počet průhledných obrázků s označenou aktuální pozicí + jeden kompletně průhledný obrázek pro případ mapy bez označené pozice. Tak budeme schopni získat všechny potřebné kombinace. Ještě že neděláme mapu USA! (tu dostanete za domácí úkol – pozn.aut.)

Ukázka výsledné možné kombinace a pohled na vrstvy z jiné perspektivy – červeně označený kraj s transparentním okolím nad mapkou se zvýrazněným krajem

Zde by matematik poznamenal, že řešení existuje – a sbalil si kufry. Proto se rozlučme s teoretiky a hurá na praktické řešení.

Příprava obrázků

Dobrá, trochu jsem blafoval. Krom rolloveru s 15 variantami zvýraznění krajů pro hover efekt a 15 transparentních obrázků s označenými kraji budeme potřebovat ještě dalších 15 obrázků/mapek. Budou to označené kraje doplněné o zbytek „statické“ mapy.

Ukázka hotového rolloveru, tedy pás map se zvýrazněnými jednotlivými kraji

Než mi začnete nadávat – je to zlomek práce. V Gimpu nebo Photoshopu to znamená vypnout/zapnout na pozadí vrstvu s mapou ČR a uložit kopii. Odměnou nám bude fungující a použitelná klikací mapa i bez JavaScriptu a kaskádových stylů – s přidanou hodnotou správně označeného kraje.

Ukázka jedné z dodělávaných mapek s označením kraje – a ani to nebolelo

Získali jsme tedy klikací mapu, která nás kliknutím přesune na odpovídající url. Navíc načteme obrázek mapy, ve kterém je označen aktuálně zvolený kraj.

Příklad: https://www.zdrojak.cz/wp-content/uploads/ukazka/ma­pa/mapa-oznaceni.php

TIP

Rollover jsem připravil jako řadu mapek poskládaných vedle sebe. Je možné mapky umístit do sloupce či matice (nebo i nahodile). Mnou užitý způsob má svůj význam a dále jej s výhodou využijeme.

JavaScript na scéně

Pomocí JavaScriptu vyměníme obrázek s označeným krajem za jeho transparentního brášku. V příkladu řeším tuto rošádu modifikací cesty k obrázku. Nebráním však nikomu v užívání regulárních výrazů a podobných skopičin – každému dle jeho chuti a schopností.

$(document).ready(function() {
    mapaimage=$('#mapa-cr-img').attr("src"); // získání obrázku klikací mapy
    $('#mapa-cr-img').attr("src", "js/"+mapaimage); // nahrazení obrázku klikací mapy za transparentní variantu
    });

Ukázka mapy s označeným krajem…

…a transparentního brášky, který ji nahradí

Označený kraj nám nyní svítí na svém místě, ale zbytek mapy zatím chybí. Na pozadí spanu #mapacr zobrazíme pomocí CSS připravený rollover. Nyní je výsledek po stránce funkčnosti zdánlivě stejný jako před naším zásahem – mapa s označeným krajem. Jsme však připraveni zvýrazňovat.

Příklad – mapa a rollover, zatím bez hover efektu: https://www.zdrojak.cz/wp-content/uploads/ukazka/ma­pa/mapa-js.php

Abychom zprovoznili hover efekt, musíme posouvat rollover na pozadí tak, aby se zobrazovala mapka se správným zvýrazněním vzhledem k poloze kurzoru myši nad mapou. Se samotným CSS zde asi nepořídíme. Jak tedy na to?

Jednotlivým krajům v klikací mapě přidělíme čísla. Já je zvolil tak, aby odpovídala jejich pořadí v připraveném rolloveru. Proč? Inu, pomocí událostí onmousmove a onmouseout předáváme JavaScriptové funkci mapa(kraj) informaci (číslo), nad kterým krajem zrovna poletuje kurzor – případně, že jej kurzor opustil. Jelikož známe šířku mapy a pozice jednotlivých zvýraznění jsou uspořádány v souladu s očíslováním v klikací mapě, stačí vynásobit šířkou mapy onou pozicí.

function mapa(kraj) {
    if(kraj < 15) {
        pozice = "-"+(kraj*167)+"px 0px "; // výpočet posunutí rolloveru
        $('#mapacr').css('backgroundPosition', pozice); // přesunutí rolloveru na vypočtenou pozici
    }
}

$(document).ready(function() {
            mapaimage=$('#mapa-cr-img').attr("src"); // získání obrázku klikací mapy
            $('#mapa-cr-img').attr("src", "js/"+mapaimage); // nahrazení obrázku klikací mapy za transparentní variantu
    });

Dostaneme počet pixelů, o které se má rollover posunout, aby byla vidět jeho správná část. Je-li kurzor myši nad aktuálně označeným krajem, je vidět pouze původní označení – zvýraznění je skryto pod ním. To vnímám jako žádoucí. Proč uživateli zvýrazňovat stránku/kraj, kde již je?!

Příklad: https://www.zdrojak.cz/wp-content/uploads/ukazka/ma­pa/mapa-js-hover.php

TIP

Zpřeházíte-li v kódu čísla u krajů, získáte efektní aprílový žertík.

A když bude vypnutý kaskádový styl…

Vypnutý JavaScript máme vyřešený v základní verzi klikací mapy – však jsme kvůli tomu dělali obrázky navíc. Ale co když je uživatel škodolibý tester, který si JavaScript ponechá funkční a poťouchle si vypne CSS? I taková situace může nastat, naštěstí není těžké ji ošetřit.

Nejprve – co by se stalo s fungujícím JavaScriptem a vypnutými CSS? JavaScriptem vyměníme výchozí mapu za jejího progumovaného průhledného brášku s označenou aktuální pozicí. Ač by klikací mapa jako taková stále fungovala, s obrázkem bez „zmapovaného“ okolí by nebylo ovládání žádný med. Práci s takovým výtvorem bych vám nepřál, přesto, zkuste si pro zajímavost příklad.

Škodolibá verze: https://www.zdrojak.cz/wp-content/uploads/ukazka/ma­pa/mapa-js-no-css-1.php

Sympatičtější verze předchozího: https://www.zdrojak.cz/wp-content/uploads/ukazka/ma­pa/mapa-js-no-css-1.php?region=plzen­sky-kraj

Nejjednodušší mi v tuto chvíli připadá následující test: Pomocí JavaScriptu vytvoříme span s nápaditým ID jquerytestspan. V CSS mu nadefinujeme barvu pozadí. Tuto barvu načteme JavaScriptem do proměnné a porovnáme ji s očekávanou hodnotou. Budou-li se barvy shodovat, je CSS použito a provedeme JavaScriptové nahrazení obrázku klikací mapy. Pokud se barva neshoduje, CSS soubor není použit a proto výměnu neprovedeme – klikací mapa nám tak zůstává stále fungující a použitelná, byť ochuzena o hover efekt. V každém případě testovací span opět odstraníme, aby nám nedělal v kódu zbytečnou paseku.

Příklad: https://www.zdrojak.cz/wp-content/uploads/ukazka/ma­pa/mapa-js-no-css-2.php

Někde RGB, někde hexa

Už to vypadá, že je to hotové, že? A zkusili jste se na výsledek podívat v Opeře nebo Internet Exploreru? Sranda že? Najednou nám tu nefunguje zvýraznění. A přitom v příkladu bez kontroly přítomnosti CSS (https://www.zdrojak.cz/wp-content/uploads/ukazka/ma­pa/mapa-js-hover.php) vše jelo jak po másle… Na vině je podmínka, lépe řečeno její neúplnost. Opera a Internet Explorer nám vrací zápis v hexa formátu, Chrome a Firefox hrdě vypsaly jeho podobu v RGB. Pokud podmínku doplníme o kontrolu hexadecimálního zápisu barvy, dostaneme…

Příklad: https://www.zdrojak.cz/wp-content/uploads/ukazka/ma­pa/

Závěr

A máme konečně hotovo. Klikací mapa je funkční, rollover vesele rolloveruje, uživatele bez JavaScriptu nezmateme a vykuky s vypnutým CSS také obsloužíme k jejich spokojenosti. Dokonce neurazíme omezenou funkčností ani uživatele různých prohlížečů a ušetřili jsme si zbytečnou práci se 166 mapkami navíc.

Máte-li pocit, že tu bylo vynalézáno kolo, snad jsem jej nevymyslel příliš hranaté. Řešení příkladu jistě není jediné možné a já nemám (zatím…) patent na rozum. Třeba test CSS by šel realizovat jinak – kontrolou definice rolloveru, čímž by se ušetřilo generování/ zmizíkování testovacího spanu. A možná je vše špatně a k tomu ještě zbytečně překombinované. Proto se těším na vaše nápady a vylepšení v komentářích.

Komentáře

Subscribe
Upozornit na
guest
27 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
reggae

Kdysi jsem prakticky stejný postup chtěl taky použít, jenže mapa na stránkách musela být cca 2x větší, takže celkový obrázek se všemi verzemi aktivních krajů nabyl obludných rozměrů a když jsem si uvědomil, kolik by ta legrace zabrala v paměti prohlížeče, tak jsem radši od hover efektu upustil. Když jsem loni dělal novou verzi stránek, narazil jsem na jQuery Map Hilight plugin, pracuje automaticky podle definičních bodů polygonů mapy, akorát si neporadí s „děravým“ polygonem, takže najetí na Středočeský kraj vysvítí i Prahu.

petr.steinbauer

Pobavilo, totéž jsem dělal v roce 2005 ;o)
Důkaz: http://interval.cz/clanky/interaktivni-mapa-ceske-republiky-s-hover-efektem/ ;o)

Brbla80

Kukám, že naše kola jsou si vcelku podobná :-D Možná to mé prehistorické řešení není zcela mimo mísu (tedy je v míse ;-). Rozdíl vidím v tom, že „moje kolo“ ukazuje krom hover efektu i zvolený kraj. Snad jsem Váš původní výzkum na poli klikacích map posunul alespoň „o krok stranou“ :-D

Opravdový odborník :-)

To víš, šetříme životní prostředí — recyklujeme :-)

chleba

Clanku o klikaci mape uz bylo TAKOVY kvantum, ze todle spis prekvapilo. Docela se mi libi no CSS reseni, ale i presto me prijde ze clanek je az neskutecne zdlouhavej, ze jit s jQuery na obycejnou klikaci mapku s hover efektem (coz je mimochodem efekt jako prase) je jako jit na vrabce s kanonem a ze autor mel spis napsat clanek o tech jinych reseni. Radsi bych videl clanek o klikaci, hover mape v canvasu nez tudle prehistorickou vec kera se delala predtim, kdyz uz autor delal prvni krucky v roce 2002.

Brbla80

Díky za reakci. Však já všechny varoval již v úvodu. A trpělivým čtenářům jsem na konci sdělil, že je možná všechno špatně :-)

Rád si přečtu články s jiným řešením. Třeba canvas zní opravdu zajímavě! Mohu doufat, že se ujmete realizace? Tímto se vám omlouvám, že jste přetrpěl mého brontosaura – snad jste se při čtení alespoň trochu pobavil. ;-)

chleba

Omlouvam se ze je muj nazor pojat jaksi ofensivne, ale rozhodne sem to nemyslel nejak zle. Jde jen o to ze me prekvapil takovyto clanek v dnesni dobe kdy je zaplava HTML 5 technologii apod. a mezi tim se zjevi clanek ktery sem poprve cetl pred strasne lety :) cloveka stihne tak trochu nostalgie. Canvas mapku nejspise asi zrealizuji, bohuzel ale neumim psat clanky tak bych jenom vlozil zdrojak a ukazku a tim by to haslo :D
Dekuji za clanek a opravdu se omlouvam ze prechozi vyzneni meho nazoru.

Brbla80

Každý krajíc je o dvou kůrkách, to jako chleba musíte jistě dobře vědět ;-) Já jsem za Váš komentář upřímně rád. Pokud by díky Vašemu canvasu mohl vzniknout navazující článek, třeba by se nám společně podařilo vytvořit k němu vysvětlující text. Uvažte tuto možnost. Jde se pak sice s kůží i kůrkou na trh – ale někdy je to opravdu veselé. Přeji Vám hezký den a ještě jednou díky za komentáře, které vkusně a ve vší slušnosti popíchnou ;-).

Jakub Vrána
// tohle by bylo v databázi
$regiony = array(
    "Moravskoslezský kraj" => "137,35,139,43,146,45,160,52,158,56,164,60,166,66,158,66,153,67,140,61,133,54,122,49,128,38",
    "Olomoucký kraj" => "123,73,117,65,113,63,115,59,113,45,120,39,118,28,132,34,129,50,145,63,134,67",
    "Zlínský kraj" => "125,73,123,82,137,90,145,83,155,70,139,61",
    "Jihomoravský kraj" => "82,84,93,90,101,93,107,89,115,96,123,89,135,92,126,70,112,59,107,63,101,72,98,79",
    "Vysočina" => "74,53,67,64,68,69,78,74,85,82,99,79,105,60,91,53,82,49",
    "Pardubický kraj" => "81,37,83,51,101,67,115,68,122,48,116,39,110,38,100,44,96,38",
    "Liberecký kraj" => "78,3,74,3,72,7,63,8,57,13,60,20,72,19,85,23,87,14",
    "Královéhradecký kraj" => "75,22,80,36,81,37,99,43,111,38,101,27,105,20,87,13",
    "Jihočeský kraj" => "31,78,35,67,38,58,66,58,84,81,76,84,67,79,64,89,55,95,41,92",
    "Ústecký kraj" => "56,0,57,7,52,8,38,12,24,18,27,25,30,35,40,27,49,25,55,25,57,23,61,13,65,6,64,1",
    "Karlovarský kraj" => "3,25,1,31,10,39,22,37,29,35,25,18,17,19,10,21",
    "Plzeňský kraj" => "14,35,3,45,9,53,14,62,30,81,36,64,38,48,38,41,28,35",
    "Hlavní město Praha" => "54,43,63,41,63,34,50,35",
    "Středočeský kraj" => "29,34,37,43,34,58,73,60,84,46,81,33,72,18,47,23",
);

header("Content-Type: image/png");
if (!isset($_GET["region"], $regiony[$_GET["region"]])) {
    readfile("cr.png");
} else {
    $im = imagecreatefrompng("cr.png");
    $points = explode(",", $regiony[$_GET["region"]]);
    imagefilledpolygon($im, $points, count($points) / 2, 0xFFB34B);
    imagepng($im);
}

Jediný problém je s děravými regiony – to by šlo vyřešit tak, že by se skrz ně udělala čára, obtáhla i vnitřní část a pak zase čára vedla zpátky (ta by díky překryvu nebyla vidět).

Oldis

a nebo si proste na internetu najdu vektorovou mapu, mimochodem neco podobneho sem resil, ale tak ze sem regiony skladal z okresu, tech je asi pres sedumdesat, kde si klient mohl okresy spojovat v regiony a tak si mapu menit podle aktualni firemni politiky, a cele sem to postavil na flashi. i kdyz dnes uz bych to radeji cele postavil na canvasu a dosahl temer stejneho reseni a pravdepodobne by me to stalo mene casu, mene psani atd.

chleba

V Skliku je v detailu kampane (kdo ma zalozenou), souradnice jednotlivych kraju pro vizualizaci v mapovem API. Je to tam naroubovane na prave klikaci, „hover“ mapku a da se tam odtud docela dobre tydle souradnice vybrat.

karmi

No nevím, „s hover efektem“… To je ještě mnohem víc než old school.

Canvas nevím, na tohle je asi lepší SVG, implementace v Raphaelu zde: http://raphaeljs.com/australia.html, pro Českou republiku zde: http://data.karmi.cz/varia/czech-republic-regions-html/czech-republic-regions.html

jlx

Mno ja nevim, SVG reseni je svym zpusobem vlastne taky docela old-school. Jakoze neco takovyho by behalo v nekterych vybranych prohlizecich uz pred X lety. Zatim tady ale nikdo nezminil nejakou novejsi alternativu, co by fungovala alespon v IE7+

_Martin

Kde se dá sehnat taková pěkná mapa? Díky

chleba

Hodne narychlo delana canvas mapa CR, prozatim jen vykreslena. Hover efekty lze jednodusse dodelat ale az bude cas. http://chleba.org/canvasmap/

Miloslav Lešetický

A není trochu problém, že to v IE 8 nefunguje?

chleba

IE8 totiz nepodporuje canvas. To az IE9 a nekdo tady chtel mapu pomoci novejch technologii tak tady je canvasem. Pro prohlizece kery nepodporujou canvas je tady ale SVG nebo VML coz se pomoci kdejakejch knohoven udela stejne lehce.
Problem ale v canvasu je ten ze nelze u nej navesit na jednotlive polygony nebo dalsi tvary zadny posluchac udalosti. Takze pro hover efekt v tydle canvas mape se musi kontrolovat souradnice a nebo na pozadi znovu-vykreslovat dany polygon a volat vestavenou metodu „isPointInPath“ a tim si kontrolovat zda jsem nad tim dannym tvarem.

J.L.

osobně si myslím, že udělt v canvasu požadovanou mapu není problém. Mít na to čas tak ji napíšu i s klikacím efektem a hover efektem. Ale otázka: je na to canvas vhodný? Přijde mi na to pořád nejvhodnější zmíněné řešení (tj css + js). Dělat tpo v canvasu či svg je „jen aby to bylo udělané po novu“. Jaký to má ale přínos? co tím bude lepší?

chleba

Min requestu na obrazky, ale je zase pravda ze canvas a svg vyzira procesor. Canvas zase ale bere spis vykon graficke karty. Bohuzel dokud bude jeste vetsi pouzivanost starych prohlizecu tak je stale daleko lepsi zpusob obrazky,css a js. To je jasny.
Co se ale tyce celych map tak se treba ted prepisuji OVI maps do canvasu coz vidim zas jako prinos. Na co jinak delat nove technologie kdyz je lidi nebudou vyuzivat a nebudou mit takovou podporu …

Opravdový odborník :-)

Canvas je v tomto případě špatně zvolená technologie — bitmapa zde není vhodná. Ideální je SVG, kde ty snadno vložíš odkazy a nastavíš vybarvování po najetí myší.

chleba

true true

Fred

Taky jsem si s tím dost vyhrál a na nějaký starší dotaz na webtrhu jsem cvičně předělával tu verzi co byla intervalu, což je nejspíš taky inspirované starým řešení od Lea kdysi na jpw. Tohle jsem bastlil na wt http://webtrh.cz/21486-mapa-javascriptu?p=614737&viewfull=1#post614737 Teď jsem s tím pracoval znovu a kdyby se někomu nechtělo párat s polygonama lze to vyřešit velmi elegantně. Otrasovat zdrojový obrázek do svg zde http://vectormagic.com a výsledek poeditovat třeba v pspadu. Nahrazení konce a začátky řádků je tam na to regulár (pod otazníkem při zaškrtnutých rv), odstranit písmena, zbydou číselné souřadnice a nahradit mezery mezi čísly čárkami a polygony jsou hotové.

Fred

jo a to dikutované řešení canvas, vml a pod. existuje zde http://raphaeljs.com/australia.html ale je to na starších strojích v MSIE docela žrout paměti. Je to prostě v reálném světě nepoužitelné.

mzahradnicek

Podobnú mapku som riesil tu:

http://www.megareality.sk

Je to tiež robene cez image maps. Deravé regióny som riešil tak, že som ich rozdelil na spodnú a hornú polovicu. Keď prechádzate napr. cez stredočeský kraj myšou hore-dole, tak v určitej časti mierne zablikne. Myslím, ale že to nie je až take hrozné.

josefrichter

tady http://canvasmap-example.heroku.com/index.html

Ta mapa samotná je PNG, který jsem si vypůjčil z tohohle článku. Liší se to v tom, že tam mám v canvasu „stínovou mapu“ která se nikdy nezobrazí a podle ní detekuju ve kterým kraji zrovna jsem. Výhoda je, že to je pixel-perfect narozdíl od těch vektorových polygonů.

Jde o to, že sleduju souřadnice myšího kurzoru, a pak se mrknu, jaká je v tom canvasu barva pixelu na těch souřadnicích. Přesněji řečeno se podívám jen na červený kanál. Pak to porovnám v poli která barva odpovídá kterýmu kraji a posunu ten css sprite.

P.S. Ten kód by do produkčního nasazení samozřejmě potřeboval trochu optimalizace. Je to jen náznak řešení, který by se dalo použít ale i jinde, když potřebuju pixel-perfect řešení (hover nad nějakým produktem apod?)

Phate

Tak tohle je fakt hóóóóóódně dobrý. Díky za tento tutoriál.

Roman

Zdravím,
potřeboval bych vytvořit klikací mapu s hover efektem. Používám redakční systém WordPress a nevím jak přesně zadat upravit HTML kod a jak ho upravit aby se mi zobrazil hover efekt. zřejmě bude problém s odkazy na obrázky – ale nevím jak odkazy pro obrázky zadat. Poradíte mi prosím, popřípadě Vám mohu za vytvoření tohoto kodu zaplatit. Díky

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.