Mapa Polski z województwami (html map area)

//Mapa Polski z województwami (html map area)

Mapa Polski z województwami (html map area)

2013-03-20T13:49:51+01:00 25 listopada, 2010|Categories: Gotowe rozwiązania IT (porady, solucje)|Tags: |
mapka polski html + css

mapka polski html + css

Projektując katalog siłowni i klubów fitness potrzebowałem standardowej, klikalnej mapy Polski z podziałem na województwa. Nie myślałem, że będzie z  tym tak źle .. wiele stron  je posiada, niewielu chce się podzielić.
Swoją mapę znalazłem na stronie http://www.ikeris.com/pl/mapa-polski-tylko-html-i-css/ . Ogromne podziękowania dla autora.

Aby dodać taką mapę na stronę :

1. W sekcji head templatki lub strony gdzie ma znajdować się mapa dodajemy link do stylu:

<link rel="stylesheet" type="text/css" media="screen" href="mapa.css">

pobierz CSS mapa polski

2. Wklejamy kod w miejsce w którym chcemy pokazać mapę:

<div id=”map”>
<ol>
<li id=”zachodniopomorskie”><a href=”#zachodniopomorskie-details”
title=”Województwo Zachodniopomorskie”><span>Zach.pom.</span></a></li>
<li id=”pomorskie”><a href=”#pomorskie-details”
title=”Województwo Pomorskie”><span>Pomorskie</span></a></li>
<li id=”warminsko-mazurskie”><a href=”#warminsko-mazurskie-details”
title=”Województwo Warmińsko-Mazurskie”><span>Warm.-Maz.</span></a></li>
<li id=”podlaskie”><a href=”#podlaskie-details”
title=”Województwo Podlaskie”><span>Podlaskie</span></a></li>
<li id=”lubuskie”><a href=”#lubuskie-details”
title=”Województwo Lubuskie”><span>Lubu.</span></a></li>
<li id=”wielkopolskie”><a href=”#wielkopolskie-details”
title=”Województwo Wielkopolskie”><span>Wielkopolskie</span></a></li>
<li id=”kujawsko-pomorskie”><a href=”#kujawsko-pomorskie-details”
title=”Województwo Kujawsko-Pomorskie”><span>Kuj.-Pom.</span></a></li>
<li id=”mazowieckie”><a href=”#mazowieckie-details”
title=”Województwo Mazowieckie”><span>Mazowieckie</span></a></li>
<li id=”lodzkie”><a href=”#lodzkie-details”
title=”Województwo Łódzkie”><span>Łódzkie</span></a></li>
<li id=”dolnoslaskie”><a href=”#dolnoslaskie-details”
title=”Województwo Dolnośląskie”><span>Dolnośląskie</span></a></li>
<li id=”opolskie”><a href=”#opolskie-details”
title=”Województwo Opolskie”><span>Opol.</span></a></li>
<li id=”slaskie”><a href=”#slaskie-details”
title=”Województwo Śląskie”><span>Śląskie</span></a></li>
<li id=”swietokrzyskie”><a href=”#swietokrzyskie-details”
title=”Województwo Świętokrzyskie”><span>Święt.</span></a></li>
<li id=”malopolskie”><a href=”#malopolskie-details”
title=”Województwo Małopolskie”><span>Małopol.</span></a></li>
<li id=”lubelskie”><a href=”#lubelskie-details”
title=”Województwo Lubelskie”><span>Lubelskie</span></a></li>
<li id=”podkarpackie”><a href=”#podkarpackie-details”
title=”Województwo Podkarpackie”><span>Podkar.</span></a></li>
</ol></div>

Kolejny krok to zmiana linków, do których kierują konkretne województwa (czyli wszystko co jest po <a href=” … )

3. Wrzucamy plik mapy w miejsce, w którym znajduje się plik z kodem mapy (ścieżkę do pliku możemy zmienić w w arkuszu stylów mapa.css):

mapa polski html map area (PSD + PNG) [ikeris.com.pl]

I to wszystko. Jeżeli mapa się nie pokazuje, upewnij się że w pliku mapa.css masz poprawne ścieżki do pliku polska-map.png.

POBIERZ CAŁĄ PACZKĘ : PLIK PHP, ARKUSZ CSS , GRAFIKA PNG + PSD.

paczka Mapa Polski HTML + CSS

Facebook - komentarze