JavaScript resim üzerine fare ile gelince resmin değişmesi kodu kullanımı örneği (JavaScript change an image when the mouse moves over it code usage example)

JavaScript ile HTML dosyanızda görüntülediğiniz resmin fare ile üzerine gelindiğinde değişmesini isterseniz size yardımcı olacak olan “img” elementinin “onMouseOver” ve “onMouseOut” nitelikleridir.

En sade hali ile mevcut kodumuz bu şekildedir.

<a href="myIndex.html">
    <img src="myImage01.png" border="0">
</a>

Mevcut kodumuza öncelikle “name” niteliği ekliyoruz.

<a href="myIndex.html">
    <img src="myImage01.png" border="0" name="myImgName">
</a>

Şimdi ise JavaScript kodumuzu aşağıdaki şekilde yazıyoruz.

<script>
myImage01 = new Image(54,18)
myImage01.src = "myImage01.png"
myImage02 = new Image(54,18)
myImage02.src = "myImage02.png"

function changeImage(imgName, ref) {
    document.images[imgName].src = ref.src;
}
</script>

Yukarıda JavaScript te tanımladığımız fonksiyonu aşağıdaki gibi kullanıyoruz.

<a href="index.html" onMouseOver="changeImage('myImgName',myImage02)">
    <img src="myImage01.png" border="0" name="myImgName">
</a>

Eski resmi yeniden görebilmek için ise aşağıdaki kod parçasını uygulamalısınız.

<a href="index.html" onMouseOver="changeImage('myImgName',myImage02)"
onMouseOut="changeImg('myImgName',myImage01)">
<img src="myImage01.png" border="0" name="myImgName">
</a>

yada en basit hali ile şu şekilde bir kod yazabilirsiniz.

<a href="index.html">
    <img src="myImage01.png" border="0" name="myImgName"
        onMouseOver="this.src='myImage01.png';"
        onMouseOut="this.src='myImage02.png';">
</a>
Share on Facebook0Tweet about this on TwitterShare on Google+0Share on StumbleUpon0Share on Reddit0

Leave a Reply


*