Interaktywne menu






Takie menu wygląda dużo ciekawiej niż linki tekstowe. Podobne menu można zrobić we, flashu, ale do tego potrzebna jest znajomość tego programu i action script. Ja zrobiłam je w dużo prostszy sposób. Wystarczy znać podstawy html i zrobić odpowiednie rysunki (w dowolnym programie graficznym).

1. Potrzebny będzie rysunek, który przedstawia rożne działy twojej strony. Podziel go na części. Ja podzieliłam go tak jak na obrazku poniżej.



Zmodyfikuj części prowadzące do podstron. Możesz na przykład dodać do nich tekst, lekko je rozmyć, zmienić ich odcień itp. Po najechaniu na nie myszka maja się odróżniać od reszty.

2. Umieść rysunek na stronie. Żeby wszystkie części dobrze do siebie pasowały najlepiej powstawiać je w komórki tabeli.

3. Teraz trzeba zrobić tak by po najechaniu myszka zmieniały się rysunki. Posłuży do tego polecenie OnMouseOver.

Ogólna postać kodu dla obrazka, który ma być linkiem to:
< a href="adres podstrony.htm">
< img src="adres ograzka.jpg">
< /a>

po dodaniu efektu OnMouseOver wyglada to tak:
< a href="adres podstrony.htm" OnMouseOut="document.nazwa_obrazka.src='adres_obrazka.jpg'"
OnMouseOver="document.nazwa_obrazka.src='adres_obrazka_
                           po_najechaniu_myszka.jpg'>
< img src="adres obraka.jpg" name="nazwa_obrazka" border=0>< /a>

name - może być dowolne, byle by było takie same dla obrazka i obrazka po najechaniu myszka

w moim przypadku ten kod wygląda tak:
< a href="" OnMouseOut="document.pic2.src='image/monitor_down.gif'"
                  OnMouseOver="document.pic2.src='image/monitor_up.gif'">
< img src="image\monitor_down.gif" name="pic2" border=0>< /a>

Pamietaj ! OnMouseOver musi być pisany w ten sposób, z użyciem dużych i małych liter. To jest jeden z tych nielicznych przypadków, gdy wielkość liter w html ma znaczenie.

4. W ten sam sposób dopisz efekt OnMouseOver do wszystkich części Twojego menu.



Napisz, co myślisz o tym tutorialu.
Jak masz jakiś problem z nim, zostaw wiadomość. Odpowiemy na nią.
zobacz komentarze dodaj komentarz