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

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…

Hasan Huseyin İŞLER hakkında

Lise yıllarında programlama ile tanışan ve Q-Basic, Pascal, C başlangıç seviyesinde öğrenenir. Üniversite de TEF-BSÖ okurken diğer dillerin yanı sıra PHP'de kendini geliştirmeye devam ederek bunların yanında CSS, JS ve Wordpress sistemiyle ilgilenir. www.phpsorunu.com'un da yöneticisi ve yazarlarındandır.
Bu yazı HTML, JavaScript kategorisine gönderilmiş. Kalıcı bağlantıyı yer imlerinize ekleyin.

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

  1. grafitus der ki:

    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. admin der ki:

    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. ufuq der ki:

    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. serdar der ki:

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

  5. mustafa eşdik der ki:

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

  6. Murat der ki:

    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..

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>