ş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.
[code]<script language="javascript">
function ykd_resim_over() {
document.resim.src="b.jpg";
}
function ykd_resim_out() {
document.resim.src="a.jpg";
}
</script>[/code]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.
[code]<a href="#" onMouseOver="ykd_resim_over();" onMouseOut="ykd_resim_out();">Resim Değiştirme Linki (Mause yi üzerine getirip çekin)</a>[/code]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 |
