Javascript ile üzerine gelince değişen resim

Temmuz 25, 2008 tarihinde Hakan Yamanoğlu tarafından yazıldı.

Web siteniz için bir imaj hazırladınız ve resmin üzerine gelince arka tarafta yüklenmiş başka bir resmin görünmesini istiyorsunuz diyelim. Bunun için çok basit bir Javascript kodu bulunuyor. Öncelikle şu java script kodunu, kullanacağınız sayfada <body> etiketinden sonra tanımlayın:

<SCRIPT LANGUAGE=”JavaScript” type=”text/javascript”>

<!– Değişen resim
if(document.images) {
pics = new Array();
pics[1] = new Image();
pics[1].src = “resim1.jpg”;
pics[2] = new Image();
pics[2].src = “resim2.jpg”;
}

function changer(from,to) {
if(document.images) {
document.images[from].src = pics[to].src;
}
}
//–>
</SCRIPT>

Daha sonra bu değişen resim çalışmasını kullanacağınız yere aşağıdaki kodu ekleyin:

<a onMouseOver=”changer(‘img1′,2)” onMouseOut=”changer(‘img1′,1)” href=”http://www.teknolojiherseyim.com”>
<img name=”img1″
border=”0″ vspace=”0″ hspace=”0″ src=”resim1.jpg” alt=”alttag”></a>

Artık kullandığınız resim1.jpg üzerine mouse imlecini getirdiğinizde resim2.jpg görünecek, mouse imlecini resmin üzerinden çektiğinizde ise tekrar resim1.jpg görünecek. Çalışan örneği görmek için Teknoloji Herşeyim logosunu deneyin (:

Etiketler:CSS, değişen resim, image, Javascript, mouseOver javascript, resim, teknoloji herşeyim

Bunlara da bakmakta fayda var

Yorumlar

“Javascript ile üzerine gelince değişen resim” yazısına 4 Yorum

müJdaT diyor ki:

25 Temmuz 2008, 22:33

Teşekürler. Güzel bir paylaşım da senin logo öyle bi olmuşki sanki admı yiyecen. birden bire çıkan bir kafa :)

Cevapla
efm diyor ki:

27 Temmuz 2008, 11:12

hehe eline sağlık.

Cevapla
Volkan diyor ki:

27 Temmuz 2008, 16:26

Teşekkürler, daha önce bunu yapmayı düşünmüştüm ama unutmuşum. Sizin logo çok hoşuma gitti.

Cevapla
emre diyor ki:

27 Aralık 2008, 14:57

fakat ben aynı sayfa için örneğin 5 buton kullanıcam dolayısıyla 5 tane artı 2. resim olucak öyle olunca nasıl yapıcaz?

Cevapla