poniedziałek, 7 grudnia 2015

Obrazkowe menu #2


Sposób na obrazkowe menu już był, ale znam inny. W przeciwieństwie do poprzedniego poradzi sobie z tym, że twoje wymarzone menu wygląda np. tak:

Przepraszam za brak polskich znaków. Wrzuciłam obrazek na tinypic, zanim sobie przypomniałam, że przecież miałam odręcznie zrobić tę jedną kreskę (czcionka nie miała polskich znaków). Linki prowadzą na Idąc przez las, bo coś musiałam zalinkować.
To teraz kod.
<div style="text-align: center"><a href="obrazek" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="obrazek" usemap="#menudrzewo"  /></a></div>
<map name="menudrzewo">
<area shape="rect" coords="133,300,230,340" href="link" title="tekst" />
<area shape="poly" coords="30,153,121,153,75,74" href="link" title="tekst" />
<area shape="circle" coords="240,86,40" href="link" title="tekst" />
</map>
A teraz analiza. W miejsce słowa obrazek, wstawiacie link do menu. Link zastępujecie miejscem, do którego czytelnik ma trafić. Tekst, to to, co się pojawi, gdy najedzie na obszar myszką. Nazwa mapy musi być w obu miejscach taka sama i ten hashtag jest potrzebny. Linki mogą mieć kilka kształtów:

  1. prostokąt nazywa się rect i podajemy współrzędne górnego lewego oraz dolnego prawego wierzchołka (w tej kolejności) - Główna
  2. wielokąt nazywa się poly i podajemy współrzędne wszystkich wierzchołków, których może być dowolna ilość - O Blogu
  3. koło to circle i potrzebujemy współrzędnych środka i długości promienia - O Mnie
Współrzędne przepisujemy z painta, pojawiają się w dolnym prawym rogu.

2 komentarze:

  1. O wow. Ciekawe, bardzo ciekawe. I ta instrukcje za pewne wykorzystam w niedlugim czasie, jak juz wszystko sie uporzadkuje. Gratuluje, bo na pewno wiele osob skorzysta z instrukcji :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Też mam plany co do obrazkowego menu (choć chyba u siebie użyję obu sposobów w szablonie, a tego jeszcze w postach).

      Usuń