Mapa ČR ještě lépe

Nedávno jsme si ukázali, jak vytvořit jednoduchou mapku pouze pomocí HTML a javascriptu. Pro velký zájem jsem se ji  rozhodl ještě trochu vylepšit. Přidáme si pod mapku menu s jednotlivými kraji, které při najetí bude zvýrazňovat naše kraje na mapce a dáme si na ní fadeIn efekt, ať je ještě o trošičku hezčí:-) Také využijeme pokročilejší selektory v jQuery. Pro lepší pochopení tohoto tutorialu si doporučuji  přečíst předchozí díl.

demo

Cíl

Ještě, než se pustíme do samotné tvorby, tak upřesním, co máme za cíl:

Chceme udělat javascript, který se nijak nebude muset přepisovat při změně cest obrázků a cesty k obrázkům se budou vkládat pouze na jedno místo. Tím docílíme, že si naší mapku dokáže zprovoznit naprostý laik, který rozumí jen základům HTML.

HTML

Jako první si v HTML napíšeme seznam měst, ke kterému přiřadíme id czechMapLinks:

        <ul id="czechMapLinks">
            <li><a href="page1.html">Plzeňský kraj</a></li>
            <li><a href="page2.html">Karlovarský kraj</a></li>
            <li><a href="page3.html">Ústecký kraj</a></li>
            <li><a href="page4.html">Liberecký kraj</a></li>
            <li><a href="page5.html">Královehradecký kraj</a></li>
            <li><a href="page6.html">Pardubický kraj</a></li>
            <li><a href="page7.html">Olomoucký kraj</a></li>
            <li><a href="page8.html">Moravskoslezský kraj</a></li>
            <li><a href="page9.html">Zlínský kraj</a></li>
            <li><a href="page10.html">Jihomoravský kraj</a></li>
            <li><a href="page11.html">Vysočina</a></li>
            <li><a href="page12.html">Jihočeský kraj</a></li>
            <li><a href="page13.html">Praha</a></li>
            <li><a href="page14.html">Středočeský kraj</a></li>
        </ul>

 

Javascript

Tak a teď se pustíme do té těžší části. Nejprve si ještě trošku upravíme minulý javascript.  A to tak, že si objekt s id czechMap-overlap uložíme do proměnné czechMapOverlap. To uděláme z toho důvodu, že po hover efektu se nemusí objekt znovu hledat po celém DOM dokumentu a tím ušetříme trošku na výkonu. To samé provedeme s elementem id czechMap, který budeme dále také potřebovat.  Měli bychom mít něco takového:

            $(function(){
               var czechMapOverlap = $('#czechMap-overlap'),
                   czechMap = $('#czechMap'); 

               $('.czechMap-area').hover(function(){

                   czechMapOverlap.attr('src', $(this).attr('data-img') );

               },function(){

                   czechMapOverlap.attr('src', 'none.png');

               });

            });

Tak a teď se pustíme do hover efektu pro náš seznam. Na každý odkaz , který je v seznamu s id czechMapLinks navěsíme hover událost.

               $('#czechMapLinks a').hover(function(){

                 // provede se po najetí

               },function(){

                 // provede se po odjetí

               });

Po najetí na odkaz musíme nějakým způsobem identifikovat,  jakou oblast na mapě zvýraznit. Jelikož by logicky oblast na mapě a odkaz měli odkazovat na stejnou stránku, tak toho využijeme a po najetí na odkaz v seznamu budeme hledat stejný odkaz na mapce a díky tomu získáme cestu k obrázku, který použijeme. K tomu využijeme takovýto zápis, který si dále vysvětlíme:

czechMap.find('[href="' + $(this).attr('href') + '"]').attr('data-img')

Mohli bychom to přeložit následovně:

v elementu czechMap najdi (.find) odkaz ([href=""]) s hodnotou tohoto odkazu (‚ + $(this).attr(‚href’) + ‚) a vrať jeho obrázek (.attr(‚data-img’)).

Nyní nám již zbývá pouze přidat fadeIn efekt. Abychom měli co animovat, tak musíme, ihned po načtení, obrázek skrýt:

                   czechMapOverlap.attr('src', czechMap.find('[href="' + $(this).attr('href') + '"]').attr('data-img') );
                   czechMapOverlap.hide(0);

A poté můžeme obrázek pomalu zobrazit:

                   czechMapOverlap.fadeIn(500);

Vypadá to, že máme vyhráno, jenže tu máme jedno velké ALE. Při zběsilém ježdění přes odkazy se nám mapka zblázní, a to protože se animace ukládají do fronty a vykonávají se postupně. Proto využijeme zázračnou metodu .stop( [clearQueue] [, jumpToEnd] ). Zápis bude vypadat: .stop(false, true), kterým řekneme přeskoč všechny animace a udělej tu poslední.

Kompletní javascript

            $(function(){
               var czechMapOverlap = $('#czechMap-overlap'),
                   czechMap = $('#czechMap'); 

               $('.czechMap-area').hover(function(){

                   czechMapOverlap.attr('src', $(this).attr('data-img') );
                   czechMapOverlap.hide(0).stop(false, true);
                   czechMapOverlap.fadeIn(500);

               },function(){

                   czechMapOverlap.attr('src', 'none.png');
                   czechMapOverlap.show(0);
               });

               $('#czechMapLinks a').hover(function(){

                   czechMapOverlap.attr('src', czechMap.find('[href="' + $(this).attr('href') + '"]').attr('data-img') );
                   czechMapOverlap.hide(0).stop(false, true);
                   czechMapOverlap.fadeIn(300);

               },function(){

                   czechMapOverlap.attr('src', 'none.png');
                   czechMapOverlap.show(0);

               });

            });

stáhnout celou mapu

Pokud se vám tutorial líbí, tak jej prosím sdílejte, děkuji :-)

Označeno v Ostatní
9 komentářů “Mapa ČR ještě lépe
  1. Dagmar napsal:

    Dobrý den, je nějaká možnost vložit tuto mapu i na stránku wordpress? Nějak ji tam nemohu vložit:-( Můžete prosím poradit jak na to? Děkuji Vám

  2. Jan Matoušek napsal:

    Dobrý den,
    samozřejmě to jde. Ale budete asi potřebovat nějaký plugin na vkládání javascriptu, nebo si to vložit přímo do šablony.

    Zkusil bych např toto: http://wordpress.org/extend/plugins/html-javascript-adder/
    Ale nemám to otestované, s wordpressem moc nepracuji.

  3. Daniel napsal:

    Dobrý den,
    mapa perfektní až na velikost. Co když se snažím o responsive design tedy potřebuji změnu velikosti podle velikosti stránky. Jak tedy změnit velikost této mapy???

    Děkuji

  4. Jan Matoušek napsal:

    Dobrý den,
    díky. Co se týče toho responsive, tak mě napadá, zkusit udělat přepočet pomocí javascriptu. Až budu mít více času, tak se na to podívám, ale zatím toho času moc nemám a třeba to tak ani nepůjde, jak si to představuji.

  5. Jirka38 napsal:

    Dobrý den, mám dotaz, zda mohu celý Váš script (kod + obrázky) použít na komerčních webových stránkách.

  6. Jan Matoušek napsal:

    Dobrý den, ano můžete.

  7. Radek napsal:

    Dobrý den, chtěl jsem se zeptat, jestli existuje funkce, které by zvýrazňovala postupně jednotlivé kraje automaticky? Ne po najetí myší (hover), ale po načtení stránky by vždy jeden kraj „probliknul“. Děkuji

  8. Tyler napsal:

    ahoj responsivitu jsem si resil kdyby mel nekdo zajem (a jeste to dohledam :) ) tak napiste na hlavacekroman@email.cz ;)

    • kopernik napsal:

      Ahoj, je to opravdu skvělé, ale nemáte někdo náhodou ten respons nebo případě řešení pro wp…děkuju mocx

Napsat komentář k Tyler Zrušit odpověď na komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

*

Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">

O AUTOROVI BLOGU

Jmenuji se Jan Matoušek a jsem vývojář webových aplikacích.

Mé portfolio