• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Interaktywna mapa polski - Jak wykonać?

VPS Starter Arubacloud
+1 głos
5,624 wizyt
pytanie zadane 12 lipca 2018 w HTML i CSS przez bulit000 Początkujący (460 p.)

Dzień dobry. Zaczynam przygodę z CSS i JS. Chciałbym dla treningu zrobić prosty programik, lecz nie wiem jak się do tego zabrać. Mam na stronie mapę polski. Chce, żebym mógł klikać w poszczególne województwa dla jakiejś tam komendy w JS, ale w jaki sposób opisać te grafiki kodem?

Tak, aby każde województwo po najechaniu myszką było podświetlane i możliwe do kliknięcia?

4 odpowiedzi

0 głosów
odpowiedź 12 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)
wybrane 12 lipca 2018 przez bulit000
 
Najlepsza
Mam w swoich zakładkach taki artykuł: http://domanart.pl/klikalna-mapa-svg-2/

Nie robiłem tego nigdy w projektach, raczej mało mam do czynienia w moich apkach z svg ale artek wydaje się ciekawy i może będzie to właśnie to czego szukasz.
komentarz 12 lipca 2018 przez bulit000 Początkujący (460 p.)
Tak jest, dzięki wielkie! Widzę, że zrobiłeś to na dwa sposoby. Zapoznam się z każdym i spróbuję podjąć decyzję, czego użyje...
komentarz 12 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Widzę, że zrobiłeś to na dwa sposoby.

Takie małe sprostowanie... to nie mój artykuł i nie mój blog (mój jest pod poradnik.drogimex.pl), ja tylko dałem linka do tego bloga :)

Pozdrawiam

PS. Może podzielisz się jak uda Ci się zrobić jakieś fajne rozwiązanie i ładne wizualnie :) ?

komentarz 12 lipca 2018 przez bulit000 Początkujący (460 p.)
Nie wiem ile mi to zajmie, ale jeśli tylko uda mi się to skończyć to czemu nie! Choć zaawansowane to raczej nie będzie... :)
+1 głos
odpowiedź 12 lipca 2018 przez Tpk Nałogowiec (40,100 p.)
edycja 12 lipca 2018 przez Tpk
Jeżeli chcesz żeby to było podświetlane województw to zamiast obrazka łatwiej byłoby (moim zdaniem) załatwić sobie taką mapę w formie wektoru (svg), wtenczas możesz bez problemu zmieniać kolor i inne właściwości pojedynczych kształtów.

Same podświetlenie myślę, że bez problemu można zrealizować w JS zwykłymi zdarzeniami i zmianami styli. Dodatkowo jeżeli chcesz ładnie to dodaj do tego transform: scale(1.2); aby powiększyć wskazany fragment.
komentarz 12 lipca 2018 przez bulit000 Początkujący (460 p.)
Dzięki za odpowiedź! Mógłbyś napisać coś więcej? Jak ugryźć zmianę lub przygotowanie grafiki wektorowej? Posiadam Adobe Illustrator.
komentarz 12 lipca 2018 przez Tpk Nałogowiec (40,100 p.)
Proszę: https://www.youtube.com/watch?v=IM8eTD01UE8

Pierwsze 10 min wyczerpuje temat, mapę znajdziesz może nawet gotową gdzieś na necie.
0 głosów
odpowiedź 29 lipca 2019 przez Misiek Mądrala (5,300 p.)
stary temat ale użyteczny i mam pytanie jak zrobić żeby np:

- po najechaniu na województwo podświetliło się

- po kliknięciu powiększyło się wybrane województwo i np pod spoden wyświetliło dane pobrane z mysql ?
–1 głos
odpowiedź 12 lipca 2018 przez Alex.Ironside Stary wyjadacz (14,880 p.)
Musialbys wyroznic kazde wojewodztwo kodem. Najlatwiej chyba byloby wyciac kazde do osobnego zdjecia i poukladac je w css z position: absolute. Po czym dodac kazdemu id i na hover dodawac klase active czy co tam chcesz. W sumie to mozna to bez JS zrobic nawet. Chyba ze chcesz cos robic po kliknieciu. Wtedy juz eventy w JS. Nie jest to tak proste jak moze sie wydawac, ale do zrobienia ;)

Podobne pytania

0 głosów
0 odpowiedzi 137 wizyt
pytanie zadane 29 października 2018 w JavaScript przez kameleon Użytkownik (590 p.)
0 głosów
1 odpowiedź 221 wizyt
pytanie zadane 20 sierpnia 2020 w JavaScript przez Paweł Walda Nowicjusz (120 p.)
+1 głos
4 odpowiedzi 403 wizyt
pytanie zadane 30 listopada 2018 w HTML i CSS przez YakumoPL Obywatel (1,970 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...