logo elektroda
logo elektroda
X
logo elektroda
REKLAMA
REKLAMA
Adblock/uBlockOrigin/AdGuard mogą powodować znikanie niektórych postów z powodu nowej reguły.

Jak stworzyć interaktywną mapę z menu w HTML?

dragon99919 04 Cze 2011 20:56 3286 10
REKLAMA
  • #1 9576930
    dragon99919
    Poziom 2  
    Posty: 4
    Witam. Pracuję nad pewnym projektem, który chcę umieścić w HTML. Chodzi o interaktywną mapę miasta w którym mieszkam. Mapka już mi się udała, po kliknięciu w plik w przeglądarce otwiera się okno, gdzie klikając sobie w odpowiedni punkt na mapie - przenosi nas do danego punktu... Aby powrócić do mapy, potrzeba po prostu powrócić do menu guziczkiem pod odpisem danego obiektu.

    Niedawno jednak natknąłem się na tak ciekawą stronkę, że nie mogłem sobie odmówić, żeby nie spytać jak ona jest zrobiona...

    Otóż mamy po lewej stronie menu, a po drugiej stronie - czyste pole. Gdy klikniemy na jakiś guzik z menu po lewej, link nie otwiera się w nowym oknie, a pojawia się na tym pustym polu, przez co wciąż mamy dostęp do menu głównego strony...

    Naprawdę, kod czegoś takiego niezmiernie by mi pomógł ponieważ w ten sposób, praca wyglądałaby lepiej, a przemieszczanie się po legendzie nie wymagałoby chowania innego pliku w innej karcie przeglądarki. :P

    Może mi ktoś powiedzieć jak taki kod jest napisany? Czy sam HTML potrafi to wykonać, czy może trzeba jeszcze javy, czy PHP? Zależy mi na tym, aby jak najszybciej otrzymać odpowiedź. W poniedziałek oddaję projekt. :)

    Z góry dziękuję za pomoc.
  • REKLAMA
  • #2 9577265
    D214d3k
    Poziom 39  
    Posty: 3837
    Pomógł: 543
    Ocena: 633
    Prawdopodobnie jest to strona stworzona na FRAMESET i wszystkie otwierane strony mają target na ramkę (nazwę ramki) w której pierwotnie jest wczytany pusty html.
    Link
    Zobacz sobie w linku działy FRAMESET i wczytywanie strony do ramki. FRAMESET to konstrukcja strony od której się odchodzi lepiej więc wczytać (pod)stronę do div'a.
  • REKLAMA
  • #3 9577314
    dragon99919
    Poziom 2  
    Posty: 4
    Cóż, poczytałem i wciąż niestety nie mogę tego pojąć... Mógłby mi ktoś dać prosty przykład w pliku, na którym mógłbym się bazować? Bo ja tam widzę tylko parametry tej ramki.
  • #4 9577496
    D214d3k
    Poziom 39  
    Posty: 3837
    Pomógł: 543
    Ocena: 633
    Widzę, że słowo gotowiec nie przyciągnęło Twojego wzroku:).
    Tu jest przykład działania tego gotowca.
    Link
  • Pomocny post
    #5 9578043
    Youmound
    Warunkowo odblokowany
    Posty: 1159
    Pomógł: 33
    Ocena: 43
    No to tak masz przykład :

    <iframe src="plik.html" name="ramka">Twoja Przeglądarka nie obsługuje ramek</iframe>

    Jest to wywołanie ramki wstawiasz je w miejscu którym ma być pobrana do niego treść.

    A teraz odnośniki do ramki >

    <a href="plik.html" target="ramka"">NAZWA </a>

    Jest to ramka pływająca > o wiele łatwiejsza niż stała ramka FRAMEST.
    przykładowo działanie wrzuciłem tu > jest to strona którą napisałem do szkoły :) dosłownie w 15min właśnie opierająca się na ramce > jak chciał nauczyciel możesz sobie skopiować jej cały kod i wykorzystać u siebie w celu np. przejrzenia jak to działa . Są komentarze wszystko opisujące , nie przejmuj się użyciem w nim CSS.

    A co do wyżej : czasem lepiej nauczyć się na gotowcu niż czytając samą teorię.
    Jeżeli nadal czegoś nie rozumiesz to pytaj :).

    PS.
    Przekierowanie danych do diva nie będzie opierało się na samym HTML już szybciej na DHTML a czy kolega zna JavaScript aby to zrobić ?
  • REKLAMA
  • #6 9578317
    dragon99919
    Poziom 2  
    Posty: 4
    Dziękuję za odpowiedź. ^^
    Kod działa, jednak mam mały problem:

    Jak stworzyć interaktywną mapę z menu w HTML?

    Tak chwilowo wygląda mój projekt. Po kliknięciu przycisku "Mapa" mapa pojawia się w ramce, jednak jest ona strasznie zmniejszona. Chciałbym, aby przypasowała się ona do całej ramki. Może trzeba jakoś zmienić jej rozmiary? Nie widzę tego nigdzie w kodzie, więc nie mam pojęcia zielonego jak to zrobić.
  • REKLAMA
  • Pomocny post
    #7 9578330
    Youmound
    Warunkowo odblokowany
    Posty: 1159
    Pomógł: 33
    Ocena: 43
    iframe {border:none; width:100%; height:100%;}

    i ten kod na wszystko Ci odpowie :D

    daj dla iframe np style="height:100px; width:1000px;" bądź 100% powinno działać.
    bądź daj w CSS tj ja dałem.
    zobacz plik INDEX i nagłówek jest tam deklaracja wielkości ramki, czyli to co Ci skopiowałem :)
  • #8 9578377
    dragon99919
    Poziom 2  
    Posty: 4
    Jeszcze raz dziękuję. ^^
    Co ciekawe, odkryłem dziwną, aczkolwiek bardzo dla mnie przydatną opcję. Bazując na tym kodzie odnośnika do ramki, wstawiłem też opisy obiektów w ramkę. Teraz, nawet jak w coś klikam na mapie, nie otwiera się to w innej karcie, ale również w tej ramce, choć jest to z zupełnie innego pliku. :D

    Dzięki serdeczne jeszcze raz i obiecuję, że jeżeli kiedykolwiek umieszczę mój projekt w necie, to zamieszczę o nim tutaj małe info. :P
  • #9 9578394
    Youmound
    Warunkowo odblokowany
    Posty: 1159
    Pomógł: 33
    Ocena: 43
    No bo tak działa ramka ja Ci powiem więcej możesz mieć takich ramek na jednej stronie nawet 50 i każda może otwierać inną treść ;] wystarczy wstawić drugą ramkę o innej nazwie :)
  • #10 9578964
    D214d3k
    Poziom 39  
    Posty: 3837
    Pomógł: 543
    Ocena: 633
    Ukryj ramki będzie jeszcze lepszy efekt.
    <frameset rows="105,*" border="0" frameborder="0" framespacing="0">
    <frame name="banner" noresize="noresize" scrolling="no" frameborder="0" src="pliki/baner.html" />
    <frame name="home" noresize="noresize" scrolling="auto" frameborder="0" src="pliki/tyt.html" />


    </frameset>
    <noframes>
  • #11 9579374
    scrabypl
    Poziom 25  
    Posty: 779
    Pomógł: 80
    Ocena: 14
    Ps. "Twoja przeglądarka nie obsługuje ramek".
    Też by się przydało.

Podsumowanie tematu

LABEL_AI_GENERATED
Użytkownik poszukiwał sposobu na stworzenie interaktywnej mapy w HTML, która umożliwia nawigację bez otwierania nowych okien. Odpowiedzi sugerowały użycie ramek (frameset) oraz iframe do osadzania treści w obrębie jednej strony. Użytkownik otrzymał przykłady kodu, w tym sposób na ustawienie rozmiaru iframe, aby mapa dostosowywała się do dostępnej przestrzeni. Dodatkowo, omówiono możliwość dodawania wielu ramek na jednej stronie oraz ukrywania ramek dla lepszego efektu wizualnego. Użytkownik z powodzeniem zaimplementował te rozwiązania, co poprawiło funkcjonalność jego projektu.
Podsumowanie AI na podstawie dyskusji. Może zawierać błędy.
REKLAMA