Javascript ile üzerine gelince değişen resim
1 Haziran 2021 / 18:30
Burak
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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:
|
1 2 3 |
<a onMouseOver=”changer(‘img1′,2)” onMouseOut=”changer(‘img1′,1)” href=”http://www.sanaldata.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 (:
Bu Yazılarıda Okuyabilirsiniz...
Bir yanıt yazın