Üzerine Gelince Değişen Resim – JavaScript RollOver Uygulaması 6

Merhaba arkadaşlar bu yazımızda herhangi bir link, button veya normal yazının üzerine gelince olan değişiklikler üzerinde duracağız ve bununla ilgili bir örnek uygulama yapacağız.

Php server üzerinde çalışır sayfa yenilenmeden kendi başına verileri getiremez. Bu yüzden dinamik çalışan JavaScript vardır. JS dili kullanıcılara aktif olarak döner ve sayfaların daha hareketli olmasını sağlar. Kısaca bunlara değindikten sonra örnek uygulamamıza geçebiliriz.

[ad#orta]

Örnek:
Sayfamızda bir link olduğunu varsayalım ve bu link üzerine gelince bir değişme olmasını istiyoruz.
Diyelim…
Normal link iken resim1.jpg
Üzerine gelince ise resim2.jpg
çıksın böylece hareketliymiş gibi kullanıcılar algılasın. Kodlarımız tamamen bunun üzerine kurulu…

Kodlara başlamadan önce kodlarımızın olduğu sayfaların yanında resim1.jpg ve resim2.jpg lerimizi koyalım.

Aşağıda resimleri değiştiren esas işi gören JavaScript fonksiyonlarımız bulunmaktadır.

<script language="javascript">
function resim_over() 
{
document.resim.src="resim2.jpg";
}
function resim_out() 
{
document.resim.src="resim1.jpg";
}
</script>

Çalışma şekli şu şekildedir.
Üzerine gelince normalde kaynağı (src) resim1.jpg olanı resim2.jpg yaparak resimi değiştirir.
Document : Javascriptte belgeyi ifade eder…
Name ile de resim adı geldiği için sonrasında resim yazılır.
Ve Özelliği olan src belirtilir.

Kodlarımızın tamamının bulunduğu kısım

<html>
<script language="javascript">
function resim_over() {
document.resim.src="resim2.jpg";
}
function resim_out() {
document.resim.src="resim1.jpg";
}
</script>
<body>
<p><img src="resim1.jpg" name="resim" id="resim">
</p>
<p>&nbsp;</p>
<p><a href="#" onMouseOver="resim_over();" onMouseOut="resim_out();">Buraya Link Yazılcak</a>
</p>
</body>
</html>

Burada ise yaptığımız tek değişiklik linkimize onMouseOver(Fare üzerine gelince) ve onMouseOut(Fare üzerinden gidince) olayları olduğunda çalışacak olan JavaScript fonksiyonlarını yazıyoruz.

Herkese Başarılar…

6 thoughts on “Üzerine Gelince Değişen Resim – JavaScript RollOver Uygulaması

  1. Reply grafitus Tem 4,2010 01:30

    Aslında bunu tek JavaScript fonksiyonu ile de yapabiliriz?

    <code>

    function resim()

    {

    var current = getElementById('resim').src == 'resim1.jpg' ? 1 : 0;

    document.getElementById('resim').src = current ? 'resim1.jpg' 'resim2.jpg;

    }

    </code>

  2. Reply admin Tem 4,2010 01:34

    Elbetteki sizin dediğiniz şekildede yapabilirz. Fakat burada arkadaşların over ve out olaylarını öğrenmiş oluyorlar. Katkılarınızdan dolayı teşekkür ederim..

  3. Reply ufuq Eyl 7,2010 17:50

    benim bir sorum olacak:

    javascript rollover ile oluşturduğum bir menüm var.

    bu menüde aktif sayfanın linkinin onmouseover daki gibi kalmasını nasıl sağlarım?

    yani örneğin menüden iletişim linkine tıklayınca iletişim butonunun resmi değişsin ve iletişim sayfasında olduğum sürece öyle kalsın. ziyaretçiler o sayfada olduklarını anlasınlar.

    umarım anlatabilmişimdir sorunumu..

    teşekkürler

  4. Reply serdar Tem 15,2012 10:04

    bayadır aradım burda buldum ve çok kolayda anlatlmış
    teşekkürler

  5. Reply mustafa eşdik Şub 4,2015 01:05

    selam resim degişsin kodu nereye eklememiz gerekiyor bu konuda yardımcı olurmusunuz

  6. Reply Murat Şub 11,2015 22:00

    Merhaba anlatımınız için teşekkürler
    Peki bunu eticaret sitesine nasıl uygulayabiliriz 1000lerce resim var
    genel tanımları image1 ve image2 olarakmı girmemiz gerekir..

Leave a Reply