Jak zrobić graficzne menu cz. II

Dzisiaj chciałam Wam pokazać drugi sposób na graficzne menu. O pierwszym możecie przeczytać tutaj.

Mimo, że tutorial będzie się opierał na zakładkach bocznych (zrobiłam screeny przy okazji pracy przy jednym blogu), to analogicznie można zrobić menu czy social ikonki.

Po wykorzystaniu tego sposobu efekt może być taki (najedź myszką):

Żeby uzyskać taki efekt potrzebujemy 3 obrazków - jednego bazowego, jednego po najechaniu myszką dla facebook, i jednego zamiennego dla bloglovin. Moje wyglądały tak:

Zaczynamy od otwarcia strony www.image-maps.com/. Pokaże nam się takie okienko:

W miejscu "From URL" wklejamy link do obrazka bazowego (przed najechaniem myszką) i wciskamy "Start Mapping Your Image". (Jeśli nie wiesz skąd wziąć link do obrazka zajrzyj tutaj.

Następnie klikamy "Continue to next step":

Wtedy pokaże nam się już właściwe okno do mapowania. Na początek najlepiej odhacz wszystkie zaznaczenia - potrzebne nam będzie tylko "Use Rollerover Image". Żeby zacząc mapowanie wybierz "Ractangle":

Zaznacz pole, które ma odsyłać do danej strony W miejscu "Link for this map" wklej link do strony. W drugim zaznaczonym miejscu wklej link do obrazka nr1 ( w tym przypadku do obrazka facebook po najechaniu myszką). Po wszystkich czynnościach Naciśnij "Save". Z drugim obrazkiem postąp identycznie, zaczynając od "Rectangle": 

Gdy zakończysz mapowanie wybierz  "Get Your Code":

Pokaże nam się wtedy takie okno jak poniżej. Wybierz zakładkę "HTML Code", skopiuj cały kod i wklej jako gadżet HTML/java w dowolnym miejscu na swoim blogu.

I koniec :)

Zalety tego sposobu:

- możemy podlinkować od razu całe menu, dzięki czemu od razu wiemy jak będzie wyglądał efekt finalny

- możemy zrobić sobie menu lub social ikonki na dowolnym zdjęciu zaznaczając odpowiednie fragmenty

Wady:
- jeśli linkujemy całe menu to w razie gdy chcemy zmienić jedną etykietkę, wszystkie czynności powtarzamy od nowa

- jeśli w ten sposób chcemy podlinkować np. dwa gadżety, trzeba uważać by zaznaczać jak najmniejsze pola (najlepiej nie wyjeżdżać poza tekst). Nie wiem czemu tak się dzieje, ale gdy zaznaczamy duże pola, to przy najechaniu na jeden gadżet lubi podświetlać się etykieta z drugiego gadżetu).

- trudności w podlinkowaniu pochylonego tekstu (problem dotyczy przypadku gdy chcemy mieć więcej niż jeden gadżet-patrz wyżej).

Może nie do końca rozumiecie o co mi chodzi z tymi wadami i zaletami, ale nie potrafię tego inaczej napisać... wszystko wyjdzie w praniu :)

Przez ostatnio wadę wynalazłam jeszcze jeden sposób linkowania np. pochylonego tekstu, ale to następnym razem.

Dajcie znać czy coś zrozumiałyście!

AKTUALIZACJA : Image Maps zmieniło wygląd - nową instrukcję znajdziesz w notce - Jak zrobić graficzne menu w IMAGE-MAPS