TUTORIAL: Image maps (nowy wygląd)

Kiedy dostałam wiadomość o problemach dotyczących z Image Maps nie miałam o nich pojęcia. Jednak gdy moja mapka zaczęła mi płatać figle, pomyślałam, że warto to sprawdzić. Panowie informatycy tworzący tą stronę uznali, że trzeba jej stworzyć nowy wygląd. Psikus! 

Dużo osób w blogosferze korzysta z mojej instrukcji, jeszcze więcej pewnie będzie korzystać teraz, gdy na nowo ją napiszę do obecnych zmian estetycznych . Łopatologicznie wyjaśniam więc co i jak (uśmiech)

DO DZIEŁA!

1. Na początku trzeba oczywiście znaleźć ikonki social media lub obrazki dowolnego kształtu i wyglądu - lub zrobić je samemu. Potem ustawić je w odpowiedniej kolejności w jakiś programie graficznym (każdy chyba na Pint'a). Poszukałam kilka darmowych stron z darmowymi ikonkami, możesz je wziąć STĄD, TUTAJ, TU RÓWNIEŻ. Teraz już nawet szukać nie musisz! 

PAMIĘTAJ! Ustaw szerokość całego panelu by pasował doskonale do ramek bocznych na Twoim blogu. W ustawieniach zaawansowanych zobaczysz jaką szerokość ma panel lub... raz za razem za pomocą prób i błędów będziesz próbowała. U mnie to 230pix

2. Teraz musisz wejść na stronę IMAGE MAPS, otworzy Ci się ona w brązowo-pomarańczowej kolorystyce. Na środku niej pojawi się komunikat proszący o wgraniu obrazka lub załadowaniu adresu URL. Wiesz już chyba co masz robić. Wkleić adres url (np wygeneruj go z imageshack) albo znajdź go w swoim komputerze i wybierz. Jeśli już to zrobisz kliknij "START MAPPING"

 
3.Wyskakuje wam sam obrazek na białym tle strony. Dziwne, prawda? Właśnie to jest to "unowocześnienie". Wystarczy najechać na niego kursorem i kliknąć prawym przyciskiem myszki by wyświetlić opcje. Wybieramy pierwszą od góry "create rect" co nam pozwoli wyznaczyć obszar na obrazku po którego kliknięciu będzie ona nas przenosiła do określonej strony. Po wybraniu tej opcji pojawi nam się okno, wystarczy spisać adres url (mi się nie chciał wkleić po poleceniu wydanym myszką więc przypominam: Ctr+V) do którego ikonka ma się odnosić i w międzyczasie zaznaczyć obszar klikając kursorem na ikonkę i tworząc kwadrat lub prostokąt jaki chcemy. Po całej operacji wystarczy kliknąć "Save". Gdy zalinkujemy już wszystko, nasze kwadraciki będą "na czerwono".

4. Teraz nie pozostało nic innego, jak znów kliknąć na "menu". W środkowej sekwencji jest taka opcja jak "Get Code" - to nic innego jak wygenerowanie kodu Java Script dla całego obrazka z social media. Klikamy więc na niego. Pokaże nam się taka duża ramka, u góry niej klikamy na "HTML Code" i kopiujemy dla siebie cały kod. 

GOTOWE!