• 28-08-2007, 00:59:11
    #1
    Baktım forumda istekler artıyor bu makaleyi yazayım dedim
    Şimdi yardım konusuna yazmadın niye yeni konu açıyorsun diye düşünenlere söyleyim.Amacım Seo Googledan arayanlarda yararlanması için.

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

    <script language="javascript">
    
    function ykd_resim_over() {
    document.resim.src="b.jpg";
    }
    function ykd_resim_out() {
    document.resim.src="a.jpg";
    }
    
      </script>
    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.

    <a href="#" onMouseOver="ykd_resim_over();" onMouseOut="ykd_resim_out();">Resim Değiştirme Linki (Mause yi üzerine getirip çekin)</a>
    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.

    <html>
    <body>
    <p><img src="a.jpg" name="resim" id="resim">
    </p>
    <p>&nbsp;</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 Tamamen Bana Aittir.Değiştirip Başka Forumlarda Kendi Yapmış Gibi Paylaşanlara Hakkım Helal Değildir.

    YKD-SoFTWaRe İnternet Hizmetleri
    Yetkili: Yaşar Kemal D
    Ana Sayfa <----> YKD-SoFTWaRe İnternet Hizmetleri
  • 29-08-2007, 16:41:16
    #2
    Üyeliği durduruldu
    Hocam Eline sğalık Tam radığıklarım diyebilirim =)
  • 11-09-2008, 06:44:19
    #3
    En basit hali :

    <img src="logo.gif" onmousemove="this.src='loader.gif'" onmouseout="this.src='logo.gif'" />
  • 11-09-2008, 10:34:20
    #4
    tesekkurler yasar kemal dag makale sitemize alinti oldugunu belirterek eklemis bulunmaktayim
  • 11-09-2008, 12:20:30
    #5
    Biraz eski bir yöntem. css ile yapıyoruz genelde artık.
  • 11-09-2008, 12:52:42
    #6
    Alexis adlı üyeden alıntı: mesajı görüntüle
    Biraz eski bir yöntem. css ile yapıyoruz genelde artık.
    Nasıl yapılıyor onuda bilelim (:

    Ayrıca konu yanlış yerde javascript bölümüne alınmalı.
  • 11-09-2008, 13:00:50
    #7
    Kimlik doğrulama veya yönetimden onay bekliyor.
    CSS Rollover Images ile de yapilabilir (:
  • 24-01-2010, 21:10:17
    #8
    Üyeliği durduruldu
    teşekkürler