Mapa ČR pomocí html a javascriptu

Ke tvorbě mapy se často používá flash, ale ten má jednu velkou nevýhodu. Uživatel musí mít nainstalovaný flash přehrávač. Proto si dnes ukážeme, jak se dá vytvořit mapka pouze pomocí html a javascriptu. Jak taková mapka bude vypadat, si můžete prohlídnout zde. Tato mapka nám bude fungovat i s vypnutým javascriptem, jen bude ochuzena o hover efekt.

demo: mapa.html

Co budeme potřebovat

Budeme potřebovat znát základní znalost HTML a javascriptové knihovny jQuery.

Dále budeme potřebovat mapku ČR.

Mapa ČR – základ

 

Příprava mapky v grafickém programu

Nejprve je třeba připravit jednotlivé části mapky.

Celá mapa se bude skládat z pozadí (pozadí bude Mapa ČR – základ), z průhledného obrázku  a z jednotlivých částí krajů.

Nejprve si připravíme prázdný průhledný obrázek, který bude mít velikost, jako Mapa ČR – základ (později si ukážeme, k čemu jej využijeme)

Dále si vytvoříme jednotlivé kraje. Ty vytvoříme z našeho oblíbeného základu (Mapa ČR – základ). Každý kraj bude na jeden obrázek, který bude mít průhledné pozadí. Kraj si zvýrazníme nějakou tmavší barvou. (pak využijeme u hover efektu) Ve výsledku budeme mít 14 obrázku se 14 kraji.

příprava jihočeského kraje

Tvorba základu pro mapu

Základem pro mapu bude <div>, který bude mít pozadí Mapa ČR – základ. Do tohoto divu vložíme průhledný obrázek. (toto děláme proto, že pomocí javascriptu budeme měnit obrázek na jednotlivé kraje a tím docílíme hover efektu)

Náš základ by mohl vypadat nějak takto:

        <style>
            #czechMap{
                position: relative;
                width: 500px;
                height: 293px;
                background-image: url('mapa_cr.png');
            }

            #czechMap-overlap{
                position: relative;
                top: 0px;
                left: 0px;
                border: none;
            }
        </style>
        <div id="czechMap">
            <img id="czechMap-overlap" src="none.png" >
        </div>

Tvorba „klikacího“ prostředí

Teď nás čeká nejtěžší a nejnudnější část. Budeme muset vytvořit sektory, pro jednotlivé kraje.

K tomu se využívají html tagy: map a area.

map

tímto tagem nadefinujeme klikací mapu
map nastavíme pouze jméno name=“firstMap“

area

jsou oblasti, které se uvádí v map (jedna oblast = jeden kraj)
zde nás čeká více atributů:

class=“czechMap-area“ – nastavíme mu třídu pro snazší zpracování v jQuery
href=“page.html“ – odkaz, kam bude uživatel nasměrován po kliku na oblast
alt=“Středočeský kraj“
title=“Středočeský kraj“
data-img=“sc.png“ - HTML5 zápis, kde si uvedeme odkaz na obrázek, který dále bude zpracovávat jQuery
shape=“poly“ –  tímto zápisem nadefinujeme, že se oblast bude vyznačovat pomocí mnohoúhelníku,
coords=“x,y,x2,y2,x3,y3,….“ - zde si nadefinujeme jednotlivé body oblasti. body se definují podle obrázku z horního levého rohu. (doprava = +x, dolu = +y). Já, ke zjištění souřadnic, využíval photoshop a panel informace:

Celý zápis pro jednotlivé kraje by mohl vypadat takto:

            <map name="firstMap">
                <area class="czechMap-area" href="page.html" alt="Plzeňský kraj" title="Plzeňský kraj" data-img="plzen.png" shape="poly" coords="106,239,104,242,97,237,96,230,89,222,80,216,66,197,52,195,52,195,41,174,34,163,34,157,26,149,30,145,37,132,65,131,76,121,87,124,93,111,100,114,102,122,117,125,130,134,128,152,120,155,119,166,125,167,125,178,125,196,117,212,119,217,110,223,106,239">
                <area class="czechMap-area" href="page.html" alt="Karlovarský kraj" title="Karlovarský kraj" data-img="kv.png" shape="poly" coords="37,132,65,131,76,121,87,124,93,111, 88,85,59,72 36,78,26,88,23,106,19,100,19,96,13,86,7,86,7,92,15,100,12,107,24,117,34,123,33,128">
                <area class="czechMap-area" href="page.html" alt="Ústecký kraj" title="Ústecký kraj" data-img="usti.png" shape="poly" coords="100,114, 88,85,70,77, 75,67,86,66,90,58,100,53,105,56,111,50,111,44,119,42,134,42,137,36,142,33,147,34,172,20,163,13,164,8,168,7,171,8,182,11,187,16,186,21,190,21 ,188,29,183,36,177,34,175,42,169,50,177,66, 177,74,171,79,170,84,160,88,144,86,133,97,108,104,105,111">
                <area class="czechMap-area" href="page.html" alt="Liberecký kraj" title="Liberecký kraj" data-img="liberec.png" shape="poly" coords="188,29,183,36,177,34,175,42,169,50,177,66, 184,68,185,72,193,71,211,57,223,67, 231,69,234,66,244,71,249,63,254,68,261,66,257,55,255,38,246,34,242,37,241,31,236,26,233,14,216,11,215,27,203,28,201,33,195,32">
                <area class="czechMap-area" href="page.html" alt="Královehradecký kraj" title="Královehradecký kraj" data-img="kh.png" shape="poly" coords="223,67,231,69,234,66,244,71,249,63,254,68,261,66,257,55,255,38,272,40,277,49,284,47,286,51,287,56,295,50,300,52,304,49,310,49,316,57,313,65,301,74,311,82,326,98, 326,106,312,113,310,118,302,119,288,111,287,108,281,105,276,110,273,109,271,105,260,111,255,109,248,114,246,110,241,106,241,92,231,93,227,87,223,86,223,81,225,77">
                <area class="czechMap-area" href="page.html" alt="Pardubický kraj" title="Pardubický kraj" data-img="pardubice.png" shape="poly" coords="326,106,312,113,310,118,302,119,288,111,287,108,281,105,276,110,273,109,271,105,260,111,255,109,248,114, 242,121,253,128,251,140,257,146,265,146,276,154,277,158,284,159,286,155,316,170,326,169,327,165,344,167,347,162,349,153,341,141,342,136,340,124,346,118,349,101,346,118,349,101,346,102,336,111">
                <area class="czechMap-area" href="page.html" alt="Olomoucký kraj" title="Olomoucký kraj" data-img="olomouc.png" shape="poly" coords="344,167,347,162,349,153,341,141,342,136,340,124,346,118,349,101,346,118,349,101,352,97,359,97,358,88,354,86,349,76,352,73,371,80,382,86,383,91,387,90,389,94,388,97,377,105,376,115,372,119,372,124,374,127,372,136,386,143,392,147,410,150,425,171,414,184,409,182,407,187,398,189,395,193,388,192,382,200,372,203,353,179,351,192,345,188,346,175,342,174,343,167">
                <area class="czechMap-area" href="page.html" alt="Moravskoslezský kraj" title="Moravskoslezský kraj" data-img="ms.png" shape="poly" coords="389,94,388,97,377,105,376,115,372,119,372,124,374,127,372,136,386,143,392,147,410,150,425,171,433,174,443,174,453,176,462,187,466,185,473,174,487,174,493,168,489,153,477,149,471,130,457,126,452,127,450,123,444,120,437,119,434,114,434,119,429,119,421,123,409,110,401,103,413,96,410,86,403,91,392,92">
                <area class="czechMap-area" href="page.html" alt="Zlínský kraj" title="Zlínský kraj" data-img="zlin.png" shape="poly" coords="425,171,414,184,409,182,407,187,398,189,395,193,388,192,382,200,372,203,433,174,443,174,453,176,462,187,453,196,446,199,441,223,437,228,429,229,426,239,420,239,413,247,408,247,401,238,392,238,376,225,370,225,370,219,375,215,372,214,370,207,344,167">
                <area class="czechMap-area" href="page.html" alt="Jihomoravský kraj" title="Jihomoravský kraj" data-img="jm.png" shape="poly" coords="408,247,401,238,392,238,376,225,370,225,370,219,375,215,372,214,370,207,353,179,351,192,345,188,346,175,342,174,343,167,327,165,326,169,316,170, 314,196,307,200,305,222,300,228,283,230,267,240,258,241,254,246,269,252,277,249,295,263,318,265,323,258,338,259,338,263,346,266,356,267,357,274,360,274,377,247,389,253,396,251,402,253">
                <area class="czechMap-area" href="page.html" alt="Vysočina" title="Vysočina" data-img="vysocina.png" shape="poly" coords="251,140,257,146,265,146,276,154,277,158,284,159,286,155,316,170,314,196,307,200,305,222,300,228,283,230,267,240,258,241,251,236,256,223,246,223,240,219,239,212,234,213,226,212,218,204,213,205,208,196,209,175,214,168,231,166,231,163,226,159,232,151,245,146,245,142">
                <area class="czechMap-area" href="page.html" alt="Jihočeský kraj" title="Jihočeský kraj" data-img="jc.png" shape="poly" coords="258,241,254,246,251,236,256,223,246,223,240,219,239,212,234,213,226,212,218,204,213,205,208,196,209,175,198,169,189,179,160,174,157,176,144,175,139,179,126,177,125,178,125,196,117,212,119,217,110,223,106,239,128,260,145,272,144,281,164,286,173,280,174,276,180,280,186,278,192,283,194,271,198,267,200,261,210,262,214,245,215,234,228,242,234,240,235,237">
                <area class="czechMap-area" href="page.html" alt="Praha" title="Praha" data-img="praha.png" shape="poly" coords="168,129,181,123,189,123,189,117,192,113,180,105,170,108,169,111,162,111,162,118,167,126">
                <area class="czechMap-area" href="page.html" alt="Středočeský kraj" title="Středočeský kraj" data-img="sc.png" shape="poly" coords="126,177,139,179,144,175,157,176,160,174,189,179,198,169,209,175,214,168,231,166,231,163,226,159,232,151,245,146,245,142,251,140,253,128,242,121,248,114,246,110,241,106,241,92,231,93,227,87,223,86,223,81,225,77,223,67,211,57,193,71,185,72,184,68,177,74,171,79,170,84,160,88,144,86,133,97,108,104,105,111,100,114,102,122,117,125,130,134,128,152,120,155,119,166,125,167,125,178">
            </map>

uuuuffff :-)

teď když konečně máme prostředí hotové, tak ho můžeme napojit jednoduše na náš obrázek a to tak, že do img tagu připíšeme atribut usemap=“#firstMap“:

            <img id="czechMap-overlap" src="none.png" usemap="#firstMap">

 

Zkrášlení javascriptem

Teď už zbývá jediná věc a to, nastavit hover efekt. Vybereme si tedy třídu ’.czechMap-area‘ a nastavíme jí hover událost. Hover událost volá 2 callback funkce. Jedna se zavolá při najetí a druhá při odjetí.

Funkce při najetí si vybere náš obrázek ‚#czechMap-overlap‘ a nastaví mu attr src kraj: $(this).attr(‚data-img’)

Funkce při odjetí nastaví zpět průhledný obrázek

Kód by mohl vypadat nějak takto:

        <script>

            $(function(){

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

                   $('#czechMap-overlap').attr('src', $(this).attr('data-img') );

               },function(){

                   $('#czechMap-overlap').attr('src', 'none.png');
               });

            });

        </script>

Celý kód:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.3.1'></script>
        <style>
            #czechMap{
                position: relative;
                width: 500px;
                height: 293px;
                background-image: url('mapa_cr.png');
            }

            #czechMap-overlap{
                position: relative;
                top: 0px;
                left: 0px;
                border: none;
            }
        </style>
    </head>
    <body>
        <div id="czechMap">
            <map name="firstMap">
                <!--
                Author: Jan Matoušek
                Contact: matousek.vr@gmail.com
                License: GPL
                -->
                <area class="czechMap-area" href="page.html" alt="Plzeňský kraj" title="Plzeňský kraj" data-img="plzen.png" shape="poly" coords="106,239,104,242,97,237,96,230,89,222,80,216,66,197,52,195,52,195,41,174,34,163,34,157,26,149,30,145,37,132,65,131,76,121,87,124,93,111,100,114,102,122,117,125,130,134,128,152,120,155,119,166,125,167,125,178,125,196,117,212,119,217,110,223,106,239">
                <area class="czechMap-area" href="page.html" alt="Karlovarský kraj" title="Karlovarský kraj" data-img="kv.png" shape="poly" coords="37,132,65,131,76,121,87,124,93,111, 88,85,59,72 36,78,26,88,23,106,19,100,19,96,13,86,7,86,7,92,15,100,12,107,24,117,34,123,33,128">
                <area class="czechMap-area" href="page.html" alt="Ústecký kraj" title="Ústecký kraj" data-img="usti.png" shape="poly" coords="100,114, 88,85,70,77, 75,67,86,66,90,58,100,53,105,56,111,50,111,44,119,42,134,42,137,36,142,33,147,34,172,20,163,13,164,8,168,7,171,8,182,11,187,16,186,21,190,21 ,188,29,183,36,177,34,175,42,169,50,177,66, 177,74,171,79,170,84,160,88,144,86,133,97,108,104,105,111">
                <area class="czechMap-area" href="page.html" alt="Liberecký kraj" title="Liberecký kraj" data-img="liberec.png" shape="poly" coords="188,29,183,36,177,34,175,42,169,50,177,66, 184,68,185,72,193,71,211,57,223,67, 231,69,234,66,244,71,249,63,254,68,261,66,257,55,255,38,246,34,242,37,241,31,236,26,233,14,216,11,215,27,203,28,201,33,195,32">
                <area class="czechMap-area" href="page.html" alt="Královehradecký kraj" title="Královehradecký kraj" data-img="kh.png" shape="poly" coords="223,67,231,69,234,66,244,71,249,63,254,68,261,66,257,55,255,38,272,40,277,49,284,47,286,51,287,56,295,50,300,52,304,49,310,49,316,57,313,65,301,74,311,82,326,98, 326,106,312,113,310,118,302,119,288,111,287,108,281,105,276,110,273,109,271,105,260,111,255,109,248,114,246,110,241,106,241,92,231,93,227,87,223,86,223,81,225,77">
                <area class="czechMap-area" href="page.html" alt="Pardubický kraj" title="Pardubický kraj" data-img="pardubice.png" shape="poly" coords="326,106,312,113,310,118,302,119,288,111,287,108,281,105,276,110,273,109,271,105,260,111,255,109,248,114, 242,121,253,128,251,140,257,146,265,146,276,154,277,158,284,159,286,155,316,170,326,169,327,165,344,167,347,162,349,153,341,141,342,136,340,124,346,118,349,101,346,118,349,101,346,102,336,111">
                <area class="czechMap-area" href="page.html" alt="Olomoucký kraj" title="Olomoucký kraj" data-img="olomouc.png" shape="poly" coords="344,167,347,162,349,153,341,141,342,136,340,124,346,118,349,101,346,118,349,101,352,97,359,97,358,88,354,86,349,76,352,73,371,80,382,86,383,91,387,90,389,94,388,97,377,105,376,115,372,119,372,124,374,127,372,136,386,143,392,147,410,150,425,171,414,184,409,182,407,187,398,189,395,193,388,192,382,200,372,203,353,179,351,192,345,188,346,175,342,174,343,167">
                <area class="czechMap-area" href="page.html" alt="Moravskoslezský kraj" title="Moravskoslezský kraj" data-img="ms.png" shape="poly" coords="389,94,388,97,377,105,376,115,372,119,372,124,374,127,372,136,386,143,392,147,410,150,425,171,433,174,443,174,453,176,462,187,466,185,473,174,487,174,493,168,489,153,477,149,471,130,457,126,452,127,450,123,444,120,437,119,434,114,434,119,429,119,421,123,409,110,401,103,413,96,410,86,403,91,392,92">
                <area class="czechMap-area" href="page.html" alt="Zlínský kraj" title="Zlínský kraj" data-img="zlin.png" shape="poly" coords="425,171,414,184,409,182,407,187,398,189,395,193,388,192,382,200,372,203,433,174,443,174,453,176,462,187,453,196,446,199,441,223,437,228,429,229,426,239,420,239,413,247,408,247,401,238,392,238,376,225,370,225,370,219,375,215,372,214,370,207,344,167">
                <area class="czechMap-area" href="page.html" alt="Jihomoravský kraj" title="Jihomoravský kraj" data-img="jm.png" shape="poly" coords="408,247,401,238,392,238,376,225,370,225,370,219,375,215,372,214,370,207,353,179,351,192,345,188,346,175,342,174,343,167,327,165,326,169,316,170, 314,196,307,200,305,222,300,228,283,230,267,240,258,241,254,246,269,252,277,249,295,263,318,265,323,258,338,259,338,263,346,266,356,267,357,274,360,274,377,247,389,253,396,251,402,253">
                <area class="czechMap-area" href="page.html" alt="Vysočina" title="Vysočina" data-img="vysocina.png" shape="poly" coords="251,140,257,146,265,146,276,154,277,158,284,159,286,155,316,170,314,196,307,200,305,222,300,228,283,230,267,240,258,241,251,236,256,223,246,223,240,219,239,212,234,213,226,212,218,204,213,205,208,196,209,175,214,168,231,166,231,163,226,159,232,151,245,146,245,142">
                <area class="czechMap-area" href="page.html" alt="Jihočeský kraj" title="Jihočeský kraj" data-img="jc.png" shape="poly" coords="258,241,254,246,251,236,256,223,246,223,240,219,239,212,234,213,226,212,218,204,213,205,208,196,209,175,198,169,189,179,160,174,157,176,144,175,139,179,126,177,125,178,125,196,117,212,119,217,110,223,106,239,128,260,145,272,144,281,164,286,173,280,174,276,180,280,186,278,192,283,194,271,198,267,200,261,210,262,214,245,215,234,228,242,234,240,235,237">
                <area class="czechMap-area" href="page.html" alt="Praha" title="Praha" data-img="praha.png" shape="poly" coords="168,129,181,123,189,123,189,117,192,113,180,105,170,108,169,111,162,111,162,118,167,126">
                <area class="czechMap-area" href="page.html" alt="Středočeský kraj" title="Středočeský kraj" data-img="sc.png" shape="poly" coords="126,177,139,179,144,175,157,176,160,174,189,179,198,169,209,175,214,168,231,166,231,163,226,159,232,151,245,146,245,142,251,140,253,128,242,121,248,114,246,110,241,106,241,92,231,93,227,87,223,86,223,81,225,77,223,67,211,57,193,71,185,72,184,68,177,74,171,79,170,84,160,88,144,86,133,97,108,104,105,111,100,114,102,122,117,125,130,134,128,152,120,155,119,166,125,167,125,178">
            </map> 

            <img id="czechMap-overlap" src="none.png" usemap="#firstMap">
        </div>
        <script>

            $(function(){

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

                   $('#czechMap-overlap').attr('src', $(this).attr('data-img') );

               },function(){

                   $('#czechMap-overlap').attr('src', 'none.png');
               });

            });

        </script>
    </body>
</html>

Tak a to je celé:-) Mapu se zdrojovým kódem, psd a png obrázky si můžete stáhnout v sekci ke stažení.

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

Označeno v Webdesign
2 komentáře “Mapa ČR pomocí html a javascriptu
  1. dementhor napsal:

    Díky díky, funguje to skoro na první pokus – a to jsem v JS prakticky negramotný (^__^ )
    Jen bych podotkl, že pokud nejsou použité obrázky v kořenovém adresáři, je k nim potřeba přidat absolutní cestu včetně URL. Kromě toho je pěkné, že i když to předpokládá HTML5, v aktuálních prohlížečích (testováno v FF12, Opera 11, IE8 ve Win XP) to krásně funguje i ve stránce, která je XHTML 1.0 Transitional, a po příslušných úpravách to skoro i zvaliduje (kromě toho elementu data-img, ale to se holt asi nedá nic dělat).
    —dementhor

    • Jan Matoušek napsal:

      Díky za reakci. data-img sice validátorům vadí, ale jinak to ničemu neškodí. Takže bych to osobně neřešil. Popřípadě by šlo data-img vyhodit a nadefinovat si cesty přímo ve scriptu.

1 Pings/Trackbacks pro "Mapa ČR pomocí html a javascriptu"
  1. [...] 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 [...]

Napsat 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