Yazının Üzerine Gelince Değişen Resim Scripti

Kodla Büyü

rtyucel

Seçkin Üye
Seçkin Üye
Mesajlar
713
Uzun zaman önce bu forumda epey bi başlık açılmıştı bu konuda. Zaman zaman verilen kodlar aralarda kaldı diye düşünüyorum. Bende scripti hazırladım ve kullanımınıza sunuyorum.
Son zamanlarda özellikle haber sitelerinde karşımıza çıkan bir yapının kodlarını sizlerle paylaşmak istedim. Örneğin http://www.yerkoyeml.k12.tr/index.asp veya http://www.igdeagaci.com sitelerindeki haberler gibi yazının/resmin üzerine gelince yanda resim değiştiren kodlarını sizler için derledim.
Kodları sayfanıza eklemek için ilk önce resimdegistir isimli script kodumuzu sayfamıza ekliyoruz.


Kod:
 <script>
    function resimdegistir(res1){
    var yol;
    yol=res1;
    document.getElementById("resim1").src=""+yol;
    }
    </script>



scriptimizi hazırladıktan sonra değişecek resmimize "resim1" ismini veriyoruz.

Kod:
<img id="resim1" name="resim1" src="baslangicResmi"/>



gelelim yan tarafında üzerine geldiğimizde resimleri değiştirecek linkleri yazmaya

Kod:
<a onmouseover="resimdegistir('images/araba.jpg')">Araba</a>
    <a onmouseover="resimdegistir('images/kedi.jpg')">Kedi</a>
    <a onmouseover="resimdegistir('images/bocek.jpg')">Böcek</a>



linklerimizi de yukarıdaki gibi yazdıktan sonra scriptimiz kullanılabilir duruma gelmiştir.

Script ile ilgili görüşlerinizi yazabilirsiniz. Kolay gelsin

Kaynak: http://rtyucel.blogspot.com/2008/05/linkin-zerine-gelince-deien-yanda.html
 
teşekkürler hocam. bende web sayfasındaki haberleri bu şekilde değiştirecektim. :alkis: :alkis: :alkis:
 
Geri
Üst