|
|
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 | : 4  | Katılımcı : 15 | | Okunma | : 10756 | | | | | |
| |
ş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. |
|
