JavaScript Örnekleri – Fare Yazının Üzerine Gelince Değişen Resim

JavaScript Örneklerimize fare yazının üzerine gelince değişen resim uygulaması ile devam ediyoruz, uygulamamızda yazının onmouseover olayına göre çelışacak olan fonksiyona bir sayısal değer gönderiyoruz. Bu değere karşılık gelen resim de img nesnesinin src parametresine atanıyor.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>http://www.bilisimogretmeni.com/</title>
<script type="text/javascript">
function resim_degis(ind)
{
var res = document.getElementById("rsm");
var res_dizi = new Array();
res_dizi[0] = "http://www.bilisimogretmeni.com/images/cicek.jpg";
res_dizi[1] = "http://www.bilisimogretmeni.com/images/dag.jpg";
res_dizi[2] = "http://www.bilisimogretmeni.com/images/penguen.jpg";
res.src = res_dizi[ind];
}
</script>
</head>
<body>
<table>
<tr>
<td><p onmouseover="resim_degis(0)">Çicek</p></td>
<td rowspan="3"><img id="rsm" name="resim" src="http://www.bilisimogretmeni.com/images/cicek.jpg"/></td>
</tr>
<tr> <td><p onmouseover="resim_degis(1)">Dağ</p></td> </tr>
<tr> <td><p onmouseover="resim_degis(2)">Penguen</p></td> </tr>
</table>
</body>
</html>

[wp-js-fiddle url=”https://jsfiddle.net/BilisimOgretmeni/503xrpe4/” style=”width:100%; height:250px; border:solid #4173A0 1px;”]

Pin It on Pinterest