 Przesuwany obraz/mapa, Od czego zaczac? |
  |
| Przesuwany obraz/mapa, Od czego zaczac? |
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 218 Pomógł: 0 Dołączył: 14.04.2004 Skąd: Słupsk, Nowy Sącz Ostrzeżenie: (0%) 
 |
Zgaduje, ze nie jest to proste pytanie...
ale nawet nie wiem czego sie czepic i o co pytac w googlu... bo wklepanie tematu jak tutaj prowadzi do nie takich wynikow jakbym chcial... (IMG:style_emoticons/default/winksmiley.jpg) jaki jest cel: chcialbym wiedziec w jaki sposob uzyskac efekt taki jak np. googlemaps... czyli przesuwam obraz/mape za pomoca myszki, mapa jest oczywiscie duuuza... i potrzebne kawalki doladowuja sie jak sa potrzebne... bajery w stylu oddal/przybliz i etykietki juz sobie chyba poradze (IMG:style_emoticons/default/smile.gif) w czym to sie w ogole robi? od czego zaczac? gdzie zadawac odpowiednie pytania? moze ktos tworzyl cos podobnego... widzialem podobne efekty w roznych grach przegladarkowych jak np. kingdoms.com.pl, ale nie mam pojecia jak sie za takie cos zabrac... z gory dzieki za jakies wskazowki, pozdrawiam, k. |
 |
 
|
|
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 1 675 Pomógł: 286 Dołączył: 15.06.2009 Skąd: Wieliczka Ostrzeżenie: (0%)
|
po prostu overflow: hidden (IMG:style_emoticons/default/smile.gif)
tworzysz sobie diva z mapą, ładujesz do niego obrazki a div ma overflow: hidden i dlatego z niego nie wystają Ten post edytował Pawel_W 5.09.2010, 16:30:44 |
|
|
|
|
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 2 350 Pomógł: 512 Dołączył: 4.01.2009 Skąd: Wrocław / Świdnica Ostrzeżenie: (0%)
|
|
|
|
|
|
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 218 Pomógł: 0 Dołączył: 14.04.2004 Skąd: Słupsk, Nowy Sącz Ostrzeżenie: (0%)
|
a faktycznie to nie takie skomplikowane jak myslalem...
dzieki powiedzmy ze sobie pokopiowalem pogrzebalem i dziala... (IMG:style_emoticons/default/winksmiley.jpg) ale widze, ze to ma epwne wady, ktorych nie moge przeszkoczyc... 1. jak ustawic, ktory kawalek mapy ma byc wyswietlony domyslnie... bo niekoniecznie ma to byc lewy gorny rog... 2. dodanie jakiegokolwiek elementu w divie jest bezcelowe, bo przy ruszeniu mapa znika... wiec jak dodac jakis element klikalny np. link choc w tym wypadku chcialem uzyc przezroczystego linku-obrazka... tak ze niby klikam mape, a tak naprawde przezroczysty obraz na nim... jak to uzyskac? to w css cos zmienic czy w dolaczonych plikach js? i co mniej wiecej... wystarczy jakies naprowadzenie... dalej sobie jakos chyba poradze... pozdrawiam, k. |
|
|
|
|
Post
#5
|
|
|
Grupa: Zarejestrowani Postów: 2 350 Pomógł: 512 Dołączył: 4.01.2009 Skąd: Wrocław / Świdnica Ostrzeżenie: (0%)
|
Daj proszę kod, który użyłeś - najlepiej umieść działający skrypt na jakimś serwerze. Na razie odpowiem tylko tak:
Cytat 1. jak ustawic, ktory kawalek mapy ma byc wyswietlony domyslnie... bo niekoniecznie ma to byc lewy gorny rog.. CSS i pozycjonowanie Cytat 2. dodanie jakiegokolwiek elementu w divie jest bezcelowe, bo przy ruszeniu mapa znika... wiec jak dodac jakis element klikalny np. link choc w tym wypadku chcialem uzyc przezroczystego linku-obrazka... tak ze niby klikam mape, a tak naprawde przezroczysty obraz na nim... Chyba chodzi Ci o: JS i efekt Bubble-ing lub/i pobawić się zdarzeniami. Opisz dokładniej - co i kiedy znika i przy jakim kodzie (IMG:style_emoticons/default/smile.gif) |
|
|
|
|
Post
#6
|
|
|
Grupa: Zarejestrowani Postów: 218 Pomógł: 0 Dołączył: 14.04.2004 Skąd: Słupsk, Nowy Sącz Ostrzeżenie: (0%)
|
dzieki, ze sie zainteresowales...
ktory to kawalek css bedzie za to odpowiedzialny? tymczasowo zarzucilem to tu: http://lilion.org/strony/lilionimperium/?strona=mapa zrodlo mozesz podejrzec... generalnie pokopiowalem kawalki tego exampla co jest chyba 3 posty wyzej... zauwaz ze na polu A1 jest w divie tekst "vvv", a na polu B6 "xxx"... no i ich zachowanie jest zabawne... A1 w ogole nie widac, az nie ruszysz mapa... a B6 widac dopoki nie przesuniesz mapy... mozesz to zobaczyc przesuwajac szybko mapke na b6... ale zaraz potem znika... jak zrobic by bylo widoczne zawsze... bo wtedy tam sobie daj jakis img lub link i bedzie efekt jaki chcialem uzyskac... pozdrawiam, k. |
|
|
|
|
Post
#7
|
|
|
Grupa: Zarejestrowani Postów: 2 350 Pomógł: 512 Dołączył: 4.01.2009 Skąd: Wrocław / Świdnica Ostrzeżenie: (0%)
|
Masz tam div-a o id moveable. Teraz zainteresuj się co do jest firebug(dodatek do FF (inne przeglądarki mają swoje odpowiedniki) ). Zauważysz, że styl(CSS) tego div-a się zmienia wraz z przesuwaniem i jak ustawisz jego wartość to zmienisz początkowe położenie mapy(ważne, aby to było w atrybucie style). Zmienia się tam: margin-top i margin-left
Co do następnego problemu to wystarczyło lekko przypatrzeć się skryptowi - masz tam(w pliku move.js) fragment: Kod if( (key = $.inArray( $(this).attr('id'), selected )) == -1 ) { selected.push($(this).attr('id')); $(this).html('<p class="chosed"></p>'); } Masz tam użytą funkcję(jQuery) html, chyba wiesz co ona robi i dlaczego Ci przeszkadza (IMG:style_emoticons/default/smile.gif) Możliwe, że jeszcze gdzieś znajduje się taki mankament. Cytat dzieki, ze sie zainteresowales... Nie ma za co - chętnie pomogam (IMG:style_emoticons/default/smile.gif) |
|
|
|
|
Post
#8
|
|
|
Grupa: Zarejestrowani Postów: 218 Pomógł: 0 Dołączył: 14.04.2004 Skąd: Słupsk, Nowy Sącz Ostrzeżenie: (0%)
|
Cytat(kamil4u @ 7.09.2010, 19:35:52 )  Masz tam div-a o id moveable. Teraz zainteresuj się co do jest firebug(dodatek do FF (inne przeglądarki mają swoje odpowiedniki) ). Zauważysz, że styl(CSS) tego div-a się zmienia wraz z przesuwaniem i jak ustawisz jego wartość to zmienisz początkowe położenie mapy(ważne, aby to było w atrybucie style). Zmienia się tam: margin-top i margin-left zainteresowalem sie... uzywam chrome... jak to wymagane moge sciagnac FF do testow... wrzucilem do css margin-top i left na 200... faktycznie pozycja startowa sie zmienila... ale teraz mapa dziwnie przeskakuje i nie wiem dlaczego... Cytat(kamil4u @ 7.09.2010, 19:35:52 ) Co do następnego problemu to wystarczyło lekko przypatrzeć się skryptowi - masz tam(w pliku move.js) fragment: Kod if( (key = $.inArray( $(this).attr('id'), selected )) == -1 ) { selected.push($(this).attr('id')); $(this).html('<p class="chosed"></p>'); } Masz tam użytą funkcję(jQuery) html, chyba wiesz co ona robi i dlaczego Ci przeszkadza (IMG:style_emoticons/default/smile.gif) Możliwe, że jeszcze gdzieś znajduje się taki mankament. JS generalnie rozumiem... mam tylko problemy z pisaniem czegos poza najprostszymi skryptai... tego akurat nie rozumiem... albo zle rozumiem... bo dla mnie to odpowiada za zaznaczanie pol, z ktorego nie korzystam... chyba ze jakos jedno koliduje z drugim... ale to znaczy ze tu cos poprawic czy to usunac? |
|
|
|
|
Post
#9
|
|
|
Grupa: Zarejestrowani Postów: 1 675 Pomógł: 286 Dołączył: 15.06.2009 Skąd: Wieliczka Ostrzeżenie: (0%)
|
Cytat(phoenix84 @ 9.09.2010, 03:47:35 ) zainteresowalem sie... uzywam chrome... jak to wymagane moge sciagnac FF do testow... chrome ma coś takiego jak narzędzia dla programistów (ctrl + shift + i) (IMG:style_emoticons/default/winksmiley.jpg) |
|
|
|
|
Post
#10
|
|
|
Grupa: Zarejestrowani Postów: 218 Pomógł: 0 Dołączył: 14.04.2004 Skąd: Słupsk, Nowy Sącz Ostrzeżenie: (0%)
|
Cytat(Pawel_W @ 9.09.2010, 12:17:42 ) chrome ma coś takiego jak narzędzia dla programistów (ctrl + shift + i) (IMG:style_emoticons/default/winksmiley.jpg) no znam to, ale nie widze by style podczas przesuwania sie zmienialy... wiec chyba to narzedzie tego nie pokazuje (IMG:style_emoticons/default/smile.gif) pozdrawiam, k. |
|
|
|
|
Post
#11
|
|
|
Grupa: Zarejestrowani Postów: 2 350 Pomógł: 512 Dołączył: 4.01.2009 Skąd: Wrocław / Świdnica Ostrzeżenie: (0%)
|
Nie znam skryptu, którego używasz, a prawdopodobnie ma on błędy.
Zacznijmy od: Kod JS generalnie rozumiem... mam tylko problemy z pisaniem czegos poza najprostszymi skryptai... tego akurat nie rozumiem... albo zle rozumiem... bo dla mnie to odpowiada za zaznaczanie pol, z ktorego nie korzystam... chyba ze jakos jedno koliduje z drugim... ale to znaczy ze tu cos poprawic czy to usunac? Używana jest tam funkcja html, która zmienia zawartość div-a, wraz z Twoim tekstem, czy czym tam chcesz. Musisz znaleźć odpowiednie fragmenty kodu, który zmienia właśnie innerHTML(tak w czystym JS się nazywa zawartość elementu)i je odpowiednio przekształcić. Więc zamiast podmiany innerHTML musisz tylko dodać element(tam chyba akapit[p])Teraz ta pozycja: Cytat wrzucilem do css margin-top i left na 200... faktycznie pozycja startowa sie zmienila... ale teraz mapa dziwnie przeskakuje i nie wiem dlaczego... Umieść stronę z tym kodem na serwerze i pokaż jak zmieniłeś ten styl. Ogólnie, nigdy nie korzystałem z jQuery, więc nie jest to dla mnie takie proste niestety - dużo rzeczy muszę się po prostu domyślać (IMG:style_emoticons/default/sad.gif) |
|
|
|
|
Post
#12
|
|
|
Grupa: Zarejestrowani Postów: 218 Pomógł: 0 Dołączył: 14.04.2004 Skąd: Słupsk, Nowy Sącz Ostrzeżenie: (0%)
|
danie marginesow na -200 -200 pomoglo, ale tylko jako pozycja startowa... potem JS cos miesza...
zmiana kodu w tej funkcji co mowiles powoduje reakcje na klikniecie... i faktycznie nie znika... ale ja bym wolal by bylo tam cos na stale niezaleznie od klikania... dla testu dodaje napis "zaznaczone" (IMG:style_emoticons/default/smile.gif) z efektow ubocznych mamy te przeskoki oraz niewiadomo skad rzad "D", ktorego w kodzie nie ma... bo w kodzie jest tylko A1-C10, i dopoki nie grzebie w marginesach to jest ok... z nowym marginesem -200 -200 dochodzi rzad D, ale nie wiem skad (IMG:style_emoticons/default/smile.gif) moze bysmy sie umowili na priv, bo cos tak ciezko tutaj sie zgrac... a konkluzje tu pozniej opisze jak do czego dijdziemy by inni mieli z tym juz mniej problemow... moje gg:5619948 pozdrawiam, k. Ten post edytował phoenix84 11.09.2010, 15:34:06 |
|
|
|
|
|
Aktualny czas: 23.08.2025 - 07:01 |
