Yanıp sönen menu

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

Bu tip menülerde ister butonları ışıklandırabilir, isterseniz yukarı aşağı hareket ettirebilirsiniz. Bu sizin tercihinize kalmış bir iş. Bu hareketin oluşması şu şekilde oluyor. Link bir resim. Mouse bu resmin üzerine geldiğinde yeni bir resim gözüküyor. Mouse linkin üzerinden ayrıldığında ise tekrar eski resme dönülüyor. Bu ise sanki bir hareket var imajı veriyor.

Bu scripti kullanmak istediğinizde kaç link verecekseniz iki katı kadar resim yapmanız gerekiyor. Mesela biz 6 link için 12 resim hazırladık.
Script içerisinde resimleri tanımlıyoruz. Her resim için
var resmin_adi=new Image(); şeklinde javascripte bir resim yeri açmasını sağlıyoruz.
Yine resmin_adi.src="resim.gif"; şeklinde birtanımlama ile her resim browsere yükletilir.
Link tanımlamaları yapılırken her resim gösterilirken resme bir isim veriliyor. Mesela
<img name="yeni_resim" src="resim.gif"> gibi. Yine link verilirken şu şekilde veriyoruz.
<a href="gidilecek_adres.html" onMouseOver="yeni_resim.src=resim2.src" onMouseOut="yeni_resim.src=resim1.src">
Burada yeni_resim.src resme verilen isimdir. resim2.src ise mouse linkin üzerine geldiğinde gösterilecek resmin script bölümünde tanımladığımız adıdır. resim1.src ise resim1'in script bölümünde tanımlanan adıdır.

Kod:

<html>
<head>
<script>
<!-- gizle
var but1a=new Image();
var but1b=new Image();
var but2a=new Image();
var but2b=new Image();
var but3a=new Image();
var but3b=new Image();
var but4a=new Image();
var but4b=new Image();
var but5a=new Image();
var but5b=new Image();
var but6a=new Image();
var but6b=new Image();
but1a.src="buton1a.gif";
but1b.src="buton1b.gif";
but2a.src="buton2a.gif";
but2b.src="buton2b.gif";
but3a.src="buton3a.gif";
but3b.src="buton3b.gif";
but4a.src="buton4a.gif";
but4b.src="buton4b.gif";
but5a.src="buton5a.gif";
but5b.src="buton5b.gif";
but6a.src="buton6a.gif";
but6b.src="buton6b.gif";
// gizleme sonu -->
</script>
</head>
<body>
<table border=0 align=left><tr><td>
<a href="#" onMouseOver="b1.src=but1b.src" onMouseOut="b1.src=but1a.src"><img name=b1 width=130 height=30 src="buton1a.gif" alt="Programlar"></a><br>
<a href="#" onMouseOver="b2.src=but2b.src" onMouseOut="b2.src=but2a.src"><img name=b2 width=130 height=30 src="buton2a.gif" alt="Javascript"></a><br>
<a href="#" onMouseOver="b3.src=but3b.src" onMouseOut="b3.src=but3a.src"><img name=b3 width=130 height=30 src="buton3a.gif" alt="Html kursu"></a><br>
<a href="#" onMouseOver="b4.src=but4b.src" onMouseOut="b4.src=but4a.src"><img name=b4 width=130 height=30 src="buton4a.gif" alt="Bedava servisler"></a><br>
<a href="#" onMouseOver="b5.src=but5b.src" onMouseOut="b5.src=but5a.src"><img name=b5 width=130 height=30 src="buton5a.gif" alt="Background"></a><br>
<a href="#" onMouseOver="b6.src=but6b.src" onMouseOut="b6.src=but6a.src"><img name=b6 width=130 height=30 src="buton6a.gif" alt="E-Mail"></a><br>
</td></tr></table>
</body>
</html>