Komentáře k článku

Obrazová mapa s hover efektem

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ý.

Zpět na článek

27 komentářů k článku Obrazová mapa s hover efektem:

  1. reggae

    jQuery Map Hilight

    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.

    1. Brbla80

      Re: Vynalézání kola

      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

  2. chleba

    prehistoricka vec

    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.

    1. Brbla80

      Re: prehistoricka vec

      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. ;-)

      1. chleba

        Re: prehistoricka vec

        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.

        1. Brbla80

          Re: prehistoricka vec

          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 ;-).

  3. Jakub Vrána

    Pokud by se někomu nechtělo obrázky dělat ručně

    // 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).

    1. Oldis

      Re: Pokud by se někomu nechtělo obrázky dělat ručně

      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.

  4. chleba

    kdo by chtel delat nad mapovym API

    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.

    1. jlx

      Re: Raphael.js

      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+

      1. chleba

        Re: canvas mapa

        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.

        1. J.L.

          Re: canvas mapa

          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ší?

          1. chleba

            Re: canvas mapa

            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 …

        2. Opravdový odborník :-)

          Vektory, ne bitmapy

          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ší.

  5. Fred

    šikovné

    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é.

  6. mzahradnicek

    Cesko-Slovensko

    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é.

  7. josefrichter

    taky jedno canvas řešení

    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?)

  8. Roman

    Klikací mapa s hover efektem
    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

Napsat komentář

Tato diskuse je již příliš stará, pravděpodobně již vám nikdo neodpoví. Pokud se chcete na něco zeptat, použijte diskusní server Devel.cz

Zdroj: https://www.zdrojak.cz/?p=3492