Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Tworzenie mapy
Forum PHP.pl > Forum > Po stronie przeglądarki
maciejkoch
Witam.
Robie portal zawierajacy mape. Jest ona rysowana z wlasnej grafiki, umieszonej w bazie.
Algorytm powinien wygladac tak:
1. wczytanie listy sciezek i wierzcholkow
2. narysowanie wszystkiego
3. zaznaczenie wierzcholkow przez uzytkownika
4. wyslanie listy/tablicy zaznaczonych wierzcholkow na serwer

Caly portal robiony jest w technologii Servlet + JSP, jednak obsluge mapy zmuszony jestem zrobic w JS...
Po wczytaniu listy wierzcholkow i sciezek dynamicznei wygenerowalem dla kazdego elementu <img> z wlasnym obrazkiem i pozycja.
Efekt taki:
Kod
...

<img class = "path" src=paths/Path01off.png
         style = "position: absolute;
                   left: 0px;
                   top: 0px;">
<img class = "path" src=paths/Path02off.png
         style = "position: absolute;
                   left: 63px;
                   top: 21px;">
<img class = "path" src=paths/Path03off.png
         style = "position: absolute;
                   left: 14px;
                   top: 101px;">
...

Analigicznie zrobilem z wierzcholkami.
Jednak kompletnie nie wiem jak umozliwic uzytkownikowi zaznaczenie tych wierzcholkow i pozniejsze wyslanie listy(tych wierzcholkow) na serwer.
Nakieruje mnie ktos?
kamil4u
Zainteresuj się zdarzeniami w JS. Jak masz małą wiedzę w tej dziedzinie możesz mieć spory problem...

Jeżeli chodzi Ci o zaznaczanie takie jakie jest w systemach operacyjnych to w wielkim skrócie musisz stworzyć dynamicznie np. <div>-a i obliczać jego położenie sprawdzając czy się pokrywa z obrazkami. Jest kilka gotowych skryptów, głównie takie, które wykorzystują bibiotekę np. jQuery. Poszukaj.

Jeżeli wystarczy, że zaznaczanie odbywa się za pomocą kliknięcia w element to wystarczy użyć zdarzenie click:
Kod
<img ...... onclick="alert('kilknieto');">


Problemem może być jak przesłać zaznaczone elementy do serwera... tu z pomocą przychodzi AJAX.

Jak mało wiesz o JS, a chcesz to zrobić samodzielnie to czeka Cię dużo pracy.
Powodzenia
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.