Javascript:Linke Gelince Değişen Resim (Javascript Rollover) - JavaScript Webmaster bilgi bankası, knowledge base Webmaster Araçları

AnaSayfa > JavaScript > Javascript:Linke Gelince Değişen Resim (Javascript Rollover)
Kategori: JavaScript
Gönderen: Admin
Tarih: 2008-11-07
Puan: 7   Puan:7 | Katılımcı:8 | Katılımcı : 8
Okunma: 5750
  
 
1 puan 2 puan 3 puan 4 puan 5 puan 6 puan 7 puan 8 puan 9 puan 10 puan

şimdi a.jpg ve b.jpg adında 2 tane resimimiz var.
sayfamızda birde link var diyelim.mouse bu link üzerine gelince resim değişsin çekince eski haline gelsin diyelim.
javascript kullanacağım bunun için.
Hazırsanız Başlayalım:
önce



Kod Çizelgesi Kod Dili: "html"
<img src="a.jpg" name="resim" id="resim">

adı ve id değeri resim olan bir resim oluşturdum.
sonra javascript fonksiyonlarımızı yazacaz.

<script language="javascript">
function ykd_resim_over() {
document.resim.src="b.jpg";
}
function ykd_resim_out() {
document.resim.src="a.jpg";
}
</script>

yukarıdaki kodda resim_over fonksiyonunda resim isimli nesnenin src değerini b.jpg resim_out ta ise a.jpg olarak ayarladım.
şimdi sayfamıza bir link ekleyelim.

<a href="#" onMouseOver="ykd_resim_over();" onMouseOut="ykd_resim_out();">Resim Değiştirme Linki (Mause yi üzerine getirip çekin)</a>

burada ise onMouseOver yani mousenin linkin üzerine geldiği anda ykd_resim_over fonksiyonunu onMouseOut yani mouse linki terkettiği anda ise ykd_resim_out fonksiyonunu çalıştırmasını söyledim.
Şimdi sayfamızı kaydedelim ve deneyelim.
örnek olarak alttaki kodları kopyalayıp not defterine yapıştırın ve sayfayı a.html olarak kaydedin.a.html dosyasının olduğu yere a.jpg ve b.jpg adında 2 tanede resim dosyası ekleyin ve deneyin.


Kod Çizelgesi Kod Dili: "html"
<html>
<body>
<p><img src="a.jpg" name="resim" id="resim">
</p>
<p> </p>
<p><a href="#" onMouseOver="ykd_resim_over();" onMouseOut="ykd_resim_out();">Resim Değiştirme Linki (Mause yi üzerine getirip çekin)</a>
<script language="javascript">
function ykd_resim_over() {
document.resim.src="b.jpg";
}
function ykd_resim_out() {
document.resim.src="a.jpg";
}
</script>
</p>
</body>
</html>



Makale Sahibi : Yasar Kemal Dag




Yorumlar
Henüz Kimse Yorum Yapmamış, ilk yorumu siz ekleyin!
Yorum Ekleme Aparatı
Yorum Eklemek için lütfen sol menuden giris yapınız..
Toplam 0 yorum listelendi.