Açıklamalı Menü

**AnesTetiC** · 12-09-2007, 08:48 PM

Bu menü yardımı ile sayfanızı ziyaret edenlere farklı bir imaj ve bilgi verebilirsiniz. Sayfada her link için bir açıklama resmi ve birde link üzerinde mouse yokken görünecek bir resim olmak zorundadır.
Kullacacğınız resimler ve butonların uyumları sayfanın görünüşüne ayrı bir hava katacaktır.

Bu scripti kullanırken öncelikle gerekli link sayısı artı bir olacak şekilde resimlerimizi yazırlıyoruz. Bu resimler kadar
var aciklaN=new Image(); şeklinde javascripte yeterli miktarda resim alanı açmasını sağlıyoruz. Burada aciklaN şeklinde girdiğimiz değer kullanılacak resimin adıdır. acikla, acikla1 gibi.
Yine gerekli resimleri yükletmek için aciklaN.src="aciklama.gif"; şeklinde bir kullanım gerekiyor. Burada aciklaN şeklindeki tanımlama önceden tanımladığımız resim adları ile aynı olmalıdır. Mesela acikla.src="aciklam.gif"; acikla1.src="aciklama1.gif" gibi.
Bu resimleri kullanmak için gerekli linke şu şekilde bir ekleme yapıyoruz. <img src="acikla.gif" name=aciklamaresmi><a href="gidilecek_adres.html" onMouseOver="aciklamaresmi.src=aciklaN.src" onMouseOut="aciklamaresmi.src=acikla.src"><img src="buton1.gif"></a>Burada açıklama için kullanacağımız resmi yerleştirdik. Sonra linkler için gerekli resimleri ve linkleri giriyoruz. Her link için
onMouseOver="aciklamaresmi.src=aciklaN.src" şeklinde tanımlama ile o link üzerine gelindiğinde aciklamaresmi olarak tanımladığlımız resmin aciklaN.src olarak tanımlacığımız resim ile değişmesini sağlıyoruz. Bu nedenle her link için gerekli açıklama resmi adını doğru kullanın mesela acikla1.src gibi.
onMOuseOut="aciklamaresmi.src=acikla.src" şeklindeki tanımlama mouse linkin üzerinden gittiğinde orjinal giriş resminin görünmesini sağlar.
Şunuda hatırlatayım kesinlikle resim isimlerinde Türkçe karakter kullanmayın.

Kod:

<html>
<head>
<script>
<!-- gizle
var acikla=new Image();
var acikla1=new Image();
var acikla2=new Image();
var acikla3=new Image();
var acikla4=new Image();
var acikla5=new Image();
var acikla6=new Image();
acikla.src="resimler/acikla.gif";
acikla1.src="resimler/acikla1.gif";
acikla2.src="resimler/acikla2.gif";
acikla3.src="resimler/acikla3.gif";
acikla4.src="resimler/acikla4.gif";
acikla5.src="resimler/acikla5.gif";
acikla6.src="resimler/acikla6.gif";
// gizleme sonu -->
</script>
</head>
<body>
<table border=0 align=left><tr><td>
<img src="resimler/acikla.gif" width=150 height=50 border=0 name=aciklamaresimi><br>
<a href="#" onMouseOver="aciklamaresimi.src=acikla1.src" onMouseOut="aciklamaresimi.src=acikla.src"><img width=130 height=30 src="resimler/buton1a.gif" alt="Programlar"></a><br>
<a href="#" onMouseOver="aciklamaresimi.src=acikla2.src" onMouseOut="aciklamaresimi.src=acikla.src"><img width=130 height=30 src="resimler/buton2a.gif" alt="Javascript"></a><br>
<a href="#" onMouseOver="aciklamaresimi.src=acikla3.src" onMouseOut="aciklamaresimi.src=acikla.src"><img width=130 height=30 src="resimler/buton3a.gif" alt="Html kursu"></a><br>
<a href="#" onMouseOver="aciklamaresimi.src=acikla4.src" onMouseOut="aciklamaresimi.src=acikla.src"><img width=130 height=30 src="resimler/buton4a.gif" alt="Bedava servisler"></a><br>
<a href="#" onMouseOver="aciklamaresimi.src=acikla5.src" onMouseOut="aciklamaresimi.src=acikla.src"><img width=130 height=30 src="resimler/buton5a.gif" alt="Background"></a><br>
<a href="#" onMouseOver="aciklamaresimi.src=acikla6.src" onMouseOut="aciklamaresimi.src=acikla.src"><img width=130 height=30 src="resimler/buton6a.gif" alt="E-Mail"></a><br>
</td></tr></table>
Sayfa içeriği
</body>
</html>