Własnoręczne zrobienie klikalnej mapy zajmuje naprawdę tylko 5 minut. Nie musisz umieć programować. Na takiej mapie możesz dodać własne odnośniki dla każdego z województw, krajów czy też kontynentów. W kilku krokach pokażę ci jak zrobić taką klikalną mapę. W tym tutorialu nauczysz się następujących rzeczy:

  • Tworzenia klikalnej mapy bez znajomości javascript.
  • Czym jest grafika wektorowa.
  • Jak dodać gotową mapę do wpisu na blogu.
  • Jak edytować w notatniku dowolną ilość wierszy na raz.

Na początek pokażę ci jak wygląda przykładowa klikalna mapa. W poniższej mapce są puste odnośniki więc klikanie nigdzie cię nie przeniesie. Za to widać dobrze na czym polega hover-effect, czyli graficzny efekt najeżdżania kursorem na województwa.

 

Skąd wziąć mapkę?

Na szczęście nie musimy rysować mapy odręcznie. Jestem zwolennikiem wykorzystywania rzeczy, które zostały już przez kogoś zrobione. Pod warunkiem, że jest to legalne oczywiście. Zdecydowanie szybsze jest składanie gotowych klocków, niż najpierw tworzenie każdego klocka z osobna.
Nie będziemy tutaj wykorzystywać żadnych standardowych plików graficznych typu .jpg. Kiedyś jednak tak to właśnie robiono. Brano obrazek i zaznaczano regiony-odnośniki. Jednak sporo z tym roboty. Zresztą jest to stare i niemodne rozwiązanie;). My wykorzystamy do tego celu grafikę wektorową. Nasza mapa będzie zapisana w prostym pliku .svg. Gotowe mapki do darmowego wykorzystania niekomercyjnego znajdziecie TUTAJ.

Co to jest grafika wektorowa?

Obraz w grafice wektorowej zdefiniowany jest przy pomocy figur geometrycznych lub tzw. ścieżek, czyli punktów wyznaczających linię. Czym się różni obrazek wektorowy od zwykłego .jpg? No cóż, zdjęcia wektorowo nie zapiszesz. Jednak rzeczy typu logo firmy, napisy, czcionki czy właśnie mapy mogą z powodzeniem zostać zapisane wektorowo. W takiej oto formie mają dużą przewagę nad .jpg. Po pierwsze zajmują bardzo mało miejsca na dysku. Po drugie, można je dowolnie powiększać bez utraty jakości, co w .jpg nie jest możliwe. Po trzecie, w dobie nowoczesnego HTML, grafika wektorowa stała się jednym z jego elementów. Oznacza to łatwe jej wykorzystanie na stronach internetowych. Możemy do niej stosować style CSS i w naprawdę prosty sposób – bez znajomości javascript – tworzyć świetne efekty graficzne w mgnieniu oka. Nie będę wchodził w szczegóły HTML i CSS nie jestem w nich biegły . Znam tylko podstawy, a jeśli czegoś potrzebuję to w wszystko można znaleźć w internecie. Także zainteresowanych zgłębianiem wiedzy tajemnej pisanych ręcznie stron internetowych odsyłam do bardziej kompetentnych źródeł typu w3.org.

Mamy już mapę. Co dalej?

Otwórz plik mapy w notatniku. Ja do tego celu używam Notepad++. Każdy osobny region – w tym przykładzie to jest województwo – jest zdefiniowany w klamerkach <path>.  Zauważcie tylko, że każdy region jest klasy land co wygląda tak : <path id=”PL-DS” title=”Dolnośląskie” class=”land”… Dla tej właśnie klasy ustawimy w stylach CSS, że podczas najechania myszką (ang. hover) region ma zmienić kolor na czerwony. W tym celu wystarczy, że w naszym pliku mapy, pomiędzy tagami <style>, a </style> dodamy ten fragment kodu stylu CSS:
.land:hover
{
fill:#FF0000;
cursor: pointer;
}

Teraz dodajmy odnośniki do każdego regionu.

Musimy w tym celu każdy region <path> umieścić w osobnym HTMLowym tagu <a>, który definiuje nam odnośnik. Kto zna podstawy HTML to na pewno się z nim zetknął. Dla naszych wszystkich regionów zrobimy to hurtowo, tak aby się nie naklepać. Tu z pomocą przychodzi Notepad++. Edytuj swoją mapę w tym właśnie notatniku i stań kursorem (karetką) przed pierwszym regionem. Dokładnie w tym miejscu:  |<path…  Wciśnij na raz lewy Alt i lewy Shift i schodź strzałką w dół do ostatniego wiersza. Jak widzisz powstał jeden wielki kursor dla wszystkich wybranych wierszy. Teraz możemy hurtowo dla wszystkich tych wierszy pisać jednocześnie. Napiszmy <a href=”http://www.mojastrona.pl”>. Aby zamknąć tag <a> czyli dopisać na końcu każdego regionu </a>, musimy wykonać małą sztuczkę. Problem w tym, że każdy region <path> ma inną długość. Jeśli sobie przeskrolujesz w notatniku w prawo to zobaczysz. Przez co nie możemy hurtowo zamknąć taga (albo może tagu, nie wiem, trzeba by sprawdzić w słowniku, na pewno tam będzie to słowo). Sztuczka polega na tym, że dany pierwszy <a> zamykamy na początku kolejnego wiersza. Tuż przed kolejnym <a>. To już możemy zrobić hurtem więc problem solved. Jedziemy dalej.

Umieść mapę na swoim blogu.

Zapisz plik mapy. Trzeba go teraz wrzucić na Twój serwer hostujący. Ja wykorzystuję do takich celów darmową FileZille. W katalogu bloga mam podkatalog “Shared” i tam wrzuciłem swoją mapkę. Publiczny adres www do niej to https://www.7hillz.pl/shared/polska.svg. Pytanie, jak tą mapkę umieścić na przykład we wpisie lub stronie? Jeśli chodzi o wordpress, to musimy przejść do trybu edycji tekstowego. Chodzi o to, abyśmy mogli wstawiać tam tagi html. Wstawimy tag <iframe>, do którego przekażemy link do naszej mapki. Dla przykładowej mapy Polski wygląda to tak:
<iframe width="80%" height="600px" 
src="https://www.7hillz.pl/shared/polska.svg" 
frameborder="0" scrolling="no" align="middle">
</iframe>

Jeśli zamiast czytania wolisz tutoriale na youtube, to przygotowałem również krótki instruktażowy filmik.

 

  • wreszcie coś czego szukałam od dawna! dziękuję! tyle tylko, że potrzebuję mapy… Europy. nie Polski, nie całego świata a jedynie Europy. czy wiesz może gdzie można taką znaleźć?

    pozdrawiam serdecznie!

    • Krzysiek Dąbrowski Mod • a few seconds ago

      Hej, jakiś czas temu zrobiłem też instruktażowy filmik na youtube. Zaraz go dodam do wpisu, nie wiem czemu tego jeszcze nie zrobiłem… Tam jest pokazane skąd brać darmowe mapki państw i kontynentów. W komentarzu nie dodaje linka bo filtr antyspamowy mi go wytnie :). To ja dziękuję. Bardzo się cieszę, że się to czasem przydaje:)

      Jak coś stworzysz to wyślij proszę linka, jestem ciekaw efektów:)

  • Hej, jakiś czas temu zrobiłem też instruktażowy filmik na youtube. Zaraz go dodam do wpisu, nie wiem czemu tego jeszcze nie zrobiłem… Tam jest pokazane skąd brać darmowe mapki państw i kontynentów. W komentarzu nie dodaje linka bo filtr antyspamowy mi go wytnie :). To ja dziękuję. Bardzo się cieszę, że się to czasem przydaje:)

    Jak coś stworzysz to wyślij proszę linka, jestem ciekaw efektów:)

  • Hej, sorry, Twój komentarz trafił początkowo do spamu i w ogóle go nie widziałem. Na szczęście dogadaliśmy się mailowo 🙂