25 Ocak 2012 Çarşamba

Java Script Animasyonlu Butonlar


<script LANGUAGE="JavaScript">
    if ((navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 3)
    || (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) >= 4)) { analiz = 1; }
    else { analiz = 0; }

if (analiz)
{
buton1on = new Image(91, 22); // 1. butonun fare gelince çıkacak resmin genişliği ve yüksekliği belirtilmiştir
buton1on.src = "images/a2.gif";// 1. butonun fare gelince çıkacak resmin bulunduğu klasör ve ismi belirtilmiştir
buton1off = new Image(91, 22);// 1. butonun fare gidince çıkacak resmin genişliği ve yüksekliği belirtilmiştir
buton1off.src = "images/a1.gif";// 1. butonun fare gidince çıkacak resmin bulunduğu klasör ve ismi belirtilmiştir
}

function faregel(resimadi)
{
if (analiz)
{
fgelince = eval(resimadi + "on.src");
document [resimadi].src = fgelince;
}
}

function faregit(resimadi)
{
if (analiz)
{
fgidince = eval(resimadi + "off.src");
document [resimadi].src = fgidince;
}
}

</script>
---Asağıdaki kodlar sadece bir buton için tablo oluşuturmaktadır ikinci bir   buton yapmak isterseniz 1 gördüğünüz yere 2 yazmalisiniz.---
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" height="22"><a HREF="hedef.htm" onmouseover="faregel('buton1')"
onmouseout="faregit('buton1')"><img SRC="images/a1.gif" BORDER="0" ALT NAME="buton1"
WIDTH="91" HEIGHT="22"></a></td>
</tr>
</table>
   Açıklama :
   İ.E. ve Netscape'de çalışır.
  1. yukarıdaki  <script language="javascript >......</script> bölümünü sayfanızın html kodlarının <head> ile </head> arasında olan bölümüne yerleştirin.
  2. Birden fazla buton kullanmak için if(analiz) diye başlayan fonksiyon içine buton1 le baslayan satırları tekrar kopyalayın ve 1 leri 2 yada daha fazla yapın ve resim isimlerini de değiştirin
  3. <table ile baslayan satırları butonlarınızı koymak istediğiniz yere yerleştirin
  4. Birden fazla buton kullanmak istiyorsanız <tr> ile baslayıp </tr>  biten bölümü tekrar kopyalayın ve 1'leri 2 yapın
  5. Son olarak yukarıda kırmızı renkteki yazıları kullanırken silin
Gönderen zaman:
Etiketler: , , ,

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)