Link wg koloru

pytanie zadane 26 grudnia 2016 w HTML i CSS przez kodajkonai Nowicjusz (210 p.)

Witam,
Chcę umieścić na stronie mapę świata, gdzie każdy kontynent ma inny kolor. Po kliknięciu na dany kontynent nastąpi przekierowanie do podstrony o danym kontynencie. Zależy mi na tym, aby przekierowanie było precyzyjne i zgadzało się z kształtami kontynentów, dlatego nie chcę użyć znacznika <area> z podaniem koordynatów. Myślałem nad zrobieniem linków wg kolorów, tylko jak to osiągnąć?

komentarz 26 grudnia 2016 przez niezalogowany

A tym już czasem nie zajmowałby się JS? Tzn renderujesz mapę przy użyciu <canvas>, skąd możesz bez problemu pobrać kliknięty piksel i coś z nim zrobić

komentarz 26 grudnia 2016 przez kodajkonai Nowicjusz (210 p.)

Czyli za pomocą samego htmla nie da się przypisać odnośnika do danego koloru na zdjęciu?

komentarz 26 grudnia 2016 przez Nicolaus Dyskutant (9,740 p.)

Raczej nie, przynajmniej ja czegoś takiego nie widziałem, widziałem w JS, ale w HTML?...

komentarz 26 grudnia 2016 przez niezalogowany

Nie wiem, nie jestem webowcem. Ale dla mnie kłóci się to z ideą samego html'a - to czym powiniem się zajmować + pewnie osiągnąłbyś dość słabej jakości kod

komentarz 26 grudnia 2016 przez Nicolaus Dyskutant (9,740 p.)

Teorytycznie mógłbyś zrobić to za pomocą SVG, tylko byłoby z tym dużo roboty i kod by był nieczytelny.

komentarz 26 grudnia 2016 przez niezalogowany

kodajkonai, w jaki sposób wyświetlasz mapę na stronie?

komentarz 26 grudnia 2016 przez kodajkonai Nowicjusz (210 p.)

aktualnie jako zwykły obraz <img src> zapisany w png, ale jeżeli jest jakieś inne rozwiązanie to mogę zmienić

komentarz 26 grudnia 2016 przez niezalogowany

@kodaj, ale musisz mieć możliwość pobrania poszczególnych pikseli

komentarz 26 grudnia 2016 przez kodajkonai Nowicjusz (210 p.)

w jaki sposób to osiągnąć?

1 odpowiedź

odpowiedź 26 grudnia 2016 przez niezalogowany
wybrane 27 grudnia 2016 przez kodajkonai

Najlepsza

Najprościej, a zarazem najbardziej elastycznie, będzie użyć mapy SVG. Poszczególne kontynenty zapakuj w znacznik a i gotowe : )

komentarz 26 grudnia 2016 przez kodajkonai Nowicjusz (210 p.)

w jaki sposób wyodrębnić poszczególne kontynenty

komentarz 26 grudnia 2016 przez niezalogowany

W tym pliku już są pogrupowane.

Dodaj SVG na swoją stronę jako tekst i wszystko się rozjaśni. (Otwórz plik edytorem tekstu, lub w przeglądarce PPM -> pokaż źródło strony)

komentarz 26 grudnia 2016 przez kodajkonai Nowicjusz (210 p.)

Jestem w stanie umieścić link na całym svg, ale nie na pojedynczym kontynencie, w którym miejscu wstawić znacznik a?

komentarz 26 grudnia 2016 przez niezalogowany

<svg>
  <a href="#">
    <g> <!-- Afryka -->
       // paths...
    </g>
  </a>
  <g> <!-- Europa -->
     // paths...
  </g>
  <g> <!-- ... -->
     // paths...
  </g>
  ...
</svg>

Mniej więcej tak wygląda struktura