Jakiś czas temu natknąłem się na ciekawy skrypt. Jego autorem jest Winston Wolf (strona skryptu). Skrypt ten pozwala wstawić na stronę mapkę Polski z możliwością podlinkowania obszarów województw. Ważną rzeczą jest to, że do działania nie potrzeba Flasha. Skrypt oparty jest o bibliotekę jQuery i zbudowany jest na prostej liście nieuporządkowanej, jednym pliku graficznym z mapką oraz odpowiednim rozmieszczeniu span-ów dla uzyskania nieregularnych kształtów.

Paczka zawiera wersje o szerokościach: 230px, 320px, 440px oraz 540px. Do każdego rozmiaru dołączony jest również plik PSD, który umożliwia zmianę wyglądu mapki. Skrypt ten nie zajmuje wiele miejsca. Plik z kodem JavaScript ma jedynie kilka linijek.

Pobierz paczkę (1,7 MB – .zip) | Przykład działania

Aby wyświetlić mapkę na stronie do sekcji head dodajemy:

Code block

<link rel="stylesheet" type="text/css" title="basic" media="screen,projection" href="style.css" />
<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript" src="script.js"></script>

Następnie, tam gdzie chcemy zobaczyć mapkę dajemy:

Code block

<ul id="polska"  class="po_prawej">
<li id="polska1"><a href="#" title="Dolnośląskie">Dolnośląskie</a></li>
<li id="polska2"><a href="#" title="Kujawsko-pomorskie">Kujawsko-pomorskie</a></li>
<li id="polska3"><a href="#" title="Lubelskie">Lubelskie</a></li>
<li id="polska4"><a href="#" title="Lubuskie">Lubuskie</a></li>
<li id="polska5"><a href="#" title="Łódzkie">Łódzkie</a></li>
<li id="polska6"><a href="#" title="Małopolskie">Małopolskie</a></li>
<li id="polska7"><a href="#" title="Mazowieckie">Mazowieckie</a></li>
<li id="polska8"><a href="#" title="Opolskie">Opolskie</a></li>
<li id="polska9"><a href="#" title="Podkarpackie">Podkarpackie</a></li>
<li id="polska10"><a href="#" title="Podlaskie">Podlaskie</a></li>
<li id="polska11"><a href="#" title="Pomorskie">Pomorskie</a></li>
<li id="polska12"><a href="#" title="Śląskie">Śląskie</a></li>
<li id="polska13"><a href="#" title="Świętokrzyskie">Świętokrzyskie</a></li>
<li id="polska14"><a href="#" title="Warmińsko-mazurskie">Warmińsko-mazurskie</a></li>
<li id="polska15"><a href="#" title="Wielkopolskie">Wielkopolskie</a></li>
<li id="polska16"><a href="#" title="Zachodniopomorskie">Zachodniopomorskie</a></li>
</ul>

W powyższym fragmencie kodu widnieje class=”po_prawej”. Za pomocą tego możemy ustawić widoczność dla listy województw. Dostępne są wartości:

• ukryta
  domyślnie; nie wyświetla listy
• po_lewej
  lista województw po lewej
• po_prawej
  lista po prawej stronie mapki
• poniżej
  lista poniżej mapki w jednej kolumnie
• poniżej dwie_kolumny
  lista poniżej mapki w dwóch kolumnach
• poniżej trzy_kolumny
  lista poniżej mapki w trzech kolumnach (tylko dla mapek 400 i 500px)

To już wszystko. Jak widać, instalacja tego skryptu jest banalnie prosta i nie wymaga wielkich umiejętności.