Mouse Etkileşimli Menu Örneği;
Aşağıdaki örnekte bir menuden tek bir satır sergileniyor...
Burada verdiğim örnek kodları kullanarak yaptığım bir menu sistemi "YAPRAKLARIN DÜNYASI" isimli sitemde var. Aşağıdaki banneri tıklayarak bu siteyi inceleyebilirsiniz...
Ayrıca aynı kodları kullanarak yaptığım bir başka sitenin anasayfasını da görmenizi istiyorum. Ki böylece, sadece kaynak kodlarının görsellik açısından bir anlam ifade etmediğini, iyi ve farklı bir grafik yaklaşımın da gerekli olduğunu kolayca görebilesiniz... (Aynı kodlarla 2 farklı menü görünüşü...) Web tasarımına yeni başlayan arkadaşlar için söylüyorum; eğer iyi bir web tasarımcısı olmak istiyorsanız, aynı kodlarla görünümü tamamen farklı objeler ortaya koyabilmeniz gerekir...
<HEAD>....</HEAD> tagları arasına yerleştirilecek HTML kodu;
<BODY>....</BODY> tagları arasına yerleştirilecek HTML kodu;
Yapılması gerekenler;
1.ADIM: Menüde kullanılacak resimleri oluşturmak...
Örneğimizde 2 ayrı grafik obje kullanıyoruz. Aşağıda gösterilen bu grafikleri bir resim işleme programı yardımıyla oluşturmakla işe başladık ve bu işlem için biz "Paint Shop Pro 5.0" programını kullandık.
2.ADIM: Javascript Kodu ile sayfa gövdesinde kullanılacak HTML kodunu yazmak...
Yaptığımız sayfanın kaynak kodunda ilgili yerlere yukarıda belirttiğimiz kodları yazarak dosyayı ".HTM" yada ".HTML" uzantısı ile kaydettik. Bu işlemler için bildiğiniz Windows 95'in NOT DEFTERİ'ni kullandık...
3.ADIM: Sayfayı test etmek...
HTM uzantısı ile kaydettiğimiz sayfa dosyasını bir "WEB BROWSER" ile açarak nasıl göründüğünü test ettik. Sayfa istediğimiz gibi olana kadar kaynak kodlarında düzeltmeler yaptık.