klikalny rysunek mapka

pytanie zadane 13 lipca 2016 w JavaScript przez andrzej151 Początkujący (300 p.)

Witam

mam pytanie odnośnie polecanych lub czegoś co mnie nakieruje na rozwiązanie. Chce zrobić coś na kształt klikalnego obrazka lub system wyboru miejsc w kinie. Zupełnie nie mam na to koncepcji poza na sztywno przypisanymi klikalnymi prostokątami na obrazku ustawianymi za pomocą CSS. jeszcze inny pomysł aby umieścić aplet javowy tam już łatwiej takie coś zrobić choć nie za bardzo rozumiem jak działa osadzanie apletów na stronach i co do tego potrzebne. Czy jest ktoś w stanie doradzić która opcja jest lepsza lub byłby wstanie podpowiedzieć co warto zobaczyć?

3 odpowiedzi

odpowiedź 14 lipca 2016 przez kosaa Stary wyjadacz (14,130 p.)
wybrane 14 lipca 2016 przez andrzej151

Najlepsza

Wg. mnie powinieneś za pomocą CSS zdefiniować klasy typu fotel-1os, kanapa_vip, itp. a potem za pomocą takich klas tworzyć sale kinowe nadając im identyfikatory i co tam tylko potrzebujesz. Unikniesz problemu gdzie zmieni się rozkład siedzeń i będzie trzeba bardzo dużo przerabiać.

Od strony wizualnej wyedytował bym checkbox np. tak:
http://jsfiddle.net/4huzr/

komentarz 14 lipca 2016 przez andrzej151 Początkujący (300 p.)

ok dziękuje czyli prosta koncepcja ostylizowanego formularza wydaje sie najprostrza i mogę bez nauki dodatkowych rzeczy już to zrobić i pozycje checkbox powinny byś na sztywno ustawione tak ?

komentarz 14 lipca 2016 przez kosaa Stary wyjadacz (14,130 p.)

nie wiem co rozumiesz przez pozycje checkboxa, ale mniej więcej zrobił bym tak

<from>
  <table>
    <tr>
      <td>
        <input type="checkbox" id="chair1" class="chair1_person">
      </td>
      <td>
        <input type="checkbox" id="chair2" class="chair1_person">
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="chair3" class="chair1_person">
      </td>
      <td>
        <input type="checkbox" id="chair4" class="chair1_person">
      </td>
    </tr>
  </table>
</form>

p.s. oczywiście do tego CSS zmieniający wygląd checkboxa, jakaś walidacja w JS aby klient nie zarezerwował Ci całej sali itp

komentarz 14 lipca 2016 przez andrzej151 Początkujący (300 p.)

chodziło mi o pozycje x y danego miejsca miejsce 1 jest w pozycji 5 5 a drugie np 10 5 czy taka ramka(miejsce) da sie nałożyć na obrazek ?

komentarz 14 lipca 2016 przez kosaa Stary wyjadacz (14,130 p.)

chodzi Ci o background-image dla tabeli?

komentarz 14 lipca 2016 przez andrzej151 Początkujący (300 p.)

ja zrozumiałem że jest obrazek i na nim prostokąty(checkboksy) przezroczyste z pól nałożone na obrazek to jest twoja propozycja czy o coś innego chodzi

mi chodziło że np na takiej mapce można klikać i wybierać niebieskie strefy i tylko można je kliknąć i wywołać w js funkcje a sa te pola dość w różnych miejscach

odpowiedź 13 lipca 2016 przez kubaapk Nałogowiec (44,270 p.)

Na svg chyba będzie można to zrobić najłatwiej.

komentarz 14 lipca 2016 przez andrzej151 Początkujący (300 p.)

Pierwszy raz o tym słyszę wiec będę musial poczytać jest pan w stanie cos polecić aby zacząć a i pytanie jak to może pomóc jakies wskazówki dziękuję za pomoc

komentarz 14 lipca 2016 przez kubaapk Nałogowiec (44,270 p.)

Może to Ci pomoże: https://parall.ax/blog/view/2985/tutorial-creating-an-interactive-svg-map

odpowiedź 14 lipca 2016 przez Robert Saternus Stary wyjadacz (12,180 p.)

Polecam zainteresowanie się tzw. images map przykład tutaj (http://www.robertsaternus.esy.es/nieruchomosci/3.4_Wyszuki_3D.html)

Dawno się z tym nie bawiłem i nie wiem czy w html5 coś lepszego nie wymyślili ale myślę, że jest to warta uwagi metoda. Co więcej by ułatwić sobie pracę można skorzystać z gotowych generatorów np. https://www.image-maps.com/

Pozdrawiam

komentarz 14 lipca 2016 przez andrzej151 Początkujący (300 p.)
edycja 14 lipca 2016 przez andrzej151

Na pewno zobaczę dziękuję za podpowiedź mniej wiecej o to mi chodzioło dobry gotowiec ale wolałym sie dowiedzieć jak to może działać jak napisać to od podstaw