Jak zrobić graficzne menu w Image-Maps

SZUKASZ IDEALNEGO PREZENTU DLA MĘŻA, RODZICÓW. DZIADKÓW...? 🎁 🎁 🎁
Gwarantuję, że te 3 są najlepsze jakimi możesz obdarować swoich bliskich!
Z O B A C Z

Jakiś czas temu pokazywałam jak poruszać się po stronie Image-Maps i jak zrobić za jego pomocą menu graficzne. Niestety Image-Maps trochę odświeżyło stronę i kilka osób prosiło mnie o nową instrukcję. Jeśli jesteś ciekawa to zapraszam do lektury :)

Jak zrobić graficzne menu w Image-Maps

Zaczynamy do wejścia na stronę  Image Maps. Pokaże Ci się okienko widoczne poniżej. Możesz wgrać zdjęcie z dysku (wtedy wybierz pomarańczowy przycisk) lub wkleić link do twojego obrazka.

jak zrobić graficzne menu w Image Maps


Gdy wgrasz już zdjęcie lub podasz adres obrazu, wybierz "Start Mapping".


jak zrobić graficzne menu w Image Maps


W kolejnym okienku wyświetli Ci się wgrane zdjęcie. Tuż nad nim wybierz "Click to continue".


jak zrobić graficzne menu w Image Maps


W kolejnym kroku naciskśnij prawy klawisz myszy i z wyświetlonego okienka wybierz kształt- ja wybrałam "Create Rest"  (we wcześniejszej wersji nie mieliśmy wyboru).


jak zrobić graficzne menu w Image Maps


Teraz zaznacz obszar który chcesz podlinkować. W okienku, które Ci się pokaże uzupełnij pole "Map URL", gdzie powinien się znaleźć link strony do której ma odsyłać dany fragment grafiki. Z tego co zauważyłam, nie możemy nacisnąć prawego klawisza myszki i opcji wklej, dlatego radzę skorzystać ze skrótu klawiszowego "ctr+v".


jak zrobić graficzne menu w Image Maps


Jeśli chcesz dodatkowo by twój obrazek zmieniał wygląd po najechaniu na dany fragment myszką, musisz wybrać zakładkę "Events" i w odpowiednie miejsce wkleić link do obrazka po zmianie.





Gdy wszystko uzupełnisz wystarczy naciśnij "Save". Opracowany fragment obrazka zaznaczy się na czerwono. Z kolejnymi fragmentami postępuj podobnie.


jak zrobić ruchome menu w Image Maps


Ja już nie zaznaczałam wszystkich słów, ale uznajmy, że praca jest zakończona. Ponownie naciiśnij prawy klawisz myszy i wybierz "Get Code".


jak zrobić ruchome menu w Image Maps


Na koniec pokaże Ci się poniższe okienko. Na samej górze wybierz "HTML Code" i skopiuj cały kod. Ponieważ nie można skorzystać z prawego klawisza myszki polecam skrót "ctrl+c".

jak zrobić ruchome menu w Image Maps

Ostatni krok to wklejenie pobranego kodu na twój blog - dodaj gadżet HTML Java.

Jak Ci poszło?

Inny sposób znajdziecie TUTAJ!


33 komentarze:

  1. Super to wszystko opisałaś, a ja się męczyłam jakimiś dziwnymi sposobami z kodem html :)

    OdpowiedzUsuń
  2. Super na pewno wykorzystam :)

    OdpowiedzUsuń
  3. Wszytko fajnie opisane, pewnie nawet ja dam sobie radę. :)

    OdpowiedzUsuń
  4. W wolnej chwili wypróbuję :))

    OdpowiedzUsuń
  5. fajnie i przejrzyście napisane :)

    OdpowiedzUsuń
  6. Super, nareszcie wiem o co chodzi, dzięki ;)

    OdpowiedzUsuń
  7. Ja właśnie dzięki Twojemu staremu instruktarzowi mam graficzne menu :*

    OdpowiedzUsuń
    Odpowiedzi
    1. naprawdę? Super :) Bardzo się cieszę, że komuś moje porady naprawdę się przydają... A Tobie już pisałam, że blog mi się bardzo podoba :)

      Usuń
  8. Z pewnością wykorzystam! Super!

    OdpowiedzUsuń
  9. Ciągle zabieram się za wdrożenie Twoich rad na swoim blogu, ale nigdy nie mam na to czasu... :/

    OdpowiedzUsuń
  10. o kurcze :) skomplikowana sprawa :p

    OdpowiedzUsuń
  11. Witam,Chciałam zapytać jak wykonać takie tło na bloga jakie posiadasz i czy da sie uaktualnić LinkWin aby wyświetlały sie w nim teraźniejsze zdjęcia a nie te które wstawiłam na początku publikacji posta(w miedzy czasie zmieniałam zdjęcia w postach niestety gadżet ich nie uaktualnił)

    OdpowiedzUsuń
    Odpowiedzi
    1. Jeśli chodzi o tło to dodajesz je w projektancie szablonów - tła :)
      A jeśli chodzi o linkwithin to z tego co się orientuję zapamiętuje on pierwsze dodane zdjęcie. Co jakiś czas podobno się aktualizuje ale nie mamy na to wpływu :(

      Usuń
    2. Chodzi mi dokładnie o takie tło jakie posiadasz?Wykonałaś je sama?Widziałam już coś w tym stylu na paru innych blogach i zastanawia mnie czy sama wykonałaś obraz do tła ponieważ w obrazach do wyboru nie znajduje takiego tła.Próbowałam juz wykonać taki obraz z mikroskopijnych desenikiem jednak ciężko mi to idzie

      Usuń
    3. tak można samemu mały kwadracik zrobić i wykorzystać jako tło. Jak chcesz identyczne to podaj maila to ci wyślę

      Usuń
    4. Dziękuje bardzo za pomoc!
      markizykosmetyczne@wp.pl

      Usuń
  12. fantastyczny post! spadłaś mi z nieba z tym! a ja się tyle męczę zawsze z kodami ;p

    OdpowiedzUsuń
  13. Przepiękny blog *__* Mega przydatny post, mam nadzieję, że uda mi się coś takiego zrobić :D

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziekuje za mile slowa :-) mam nadzieje ze ci się uda :-)

      Usuń
  14. jesteś mistrzem ! kilka dni temu założyłam bloga a już mi działa graficzne menu ! <3

    OdpowiedzUsuń
    Odpowiedzi
    1. super - już widziałam:) bardzo dobrze wyszło :)

      Usuń
  15. Muszę to sobie wszystko zapisać :)

    OdpowiedzUsuń
  16. Czy któraś z Pań wie jak zmienić wygląd ikonki ''szukaj'' na blogu ? Widziałam na innych blogach maja takie ładne i atrakcyjne dla oka a ta moja taka jest bleee :)

    OdpowiedzUsuń
  17. Instrukcja bardzo czytelna i pomocna. Jednak u mnie pojawia się problem. Chciałabym wykonać menu z kilkoma elementami, w którym po najechaniu obrazek zmieniałby wygląd. Zrobiłam "główny" pasek, poszczególne elementy(po najechaniu), tj. napisałaś zaznaczałam kolejno elementy głównego paska menu(przed najechaniem), wklejałam adres odnośnika oraz link do grafiki "po najechaniu", zapisywałam i tak dalej aż do końca. Wszystko elegancko, tylko, że kiedy dodałam menu na bloga, to po najechaniu na poszczególne zakładki obrazek zmieniał się, tylko że na całej szerokości menu, po prostu rozjeżdżał się na całość, a nie jedynie pojawiał się w miejscu, gdzie powinien. I tak po najechaniu na każdy z elementów menu. Jakieś pomysły, skąd coś takiego?

    OdpowiedzUsuń
    Odpowiedzi
    1. musisz cały czas bazować na pierwszym obrazku, który wgrałaś... tzn kolejne muszą mieś identyczne wymiary... Jak np. masz "strona główna", "o mnie", "kontakt"... wszystko czarnymi literami a po najechaniu myszką ma być np. białymi to robisz pierwszy obrazek gdzie wszystkie są na czarno, później kolejny obrazem z białą czcionką "Strona główna" a reszta na czarno itd... Mam nadzieję, że rozumiesz o co mi chodzi?

      Usuń

Jestem wdzięczna za każdy pozostawiony komentarz - to niezwykle motywuje do dalszego pisania!