jQuery İle Resim Opacity Değeri Vermek

Son yazdığımız wordpess eklentisinden sonra epey süre makale yazmamıştık bu makalemizde jQuery ile Resimlere opacity değeri vermeyi işleyelim iki seçimli bir uygulama olacak ister resmin üstüne geliğinde resim saydamlaşsın isterseniz saydam olan resim netleşsin.Sizin tercihinize kalmış fazla uzatmayalım.

1-) Sayfamıza gerekli jquery kodlarımızı çağıralım kodların head tagları arasında olması sayfa açılışı sırasında ilk bu kodların yüklenmesi anlamına geleceğinden önemlidir.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
          // Bu kısım resmin üstüne geldiğinde soluklaşmasını sağlar.Başlangıç
		 $(function() {
		   $("#MiLaT img").hover(function() {
		     $(this).stop().animate({
		     "opacity": "0.5"     }, 500 );  // "0.5" olan opacity değieridir.0.1 ile 1 arasında olmalı
		     }, function() {
		       $(this).animate({
		         "opacity": "1"             }, 1000 ); // "1" olan kısım Resmin üstünden çekildiğinde tekrar hangi opacity değeri alacağıdır
		         });
		   });
          // Bu kısım resmin üstüne geldiğinde soluklaşmasını sağlar.Bitiş
          // Bu kısım resmin üstüne geldiğinde netleşmesini sağlar.Başlangıç
		 $(function() {
		   $("#MiLaT1 img").css({ opacity: 0.5 });
		   $("#MiLaT1 img").hover(function() {
		     $(this).stop().animate({
		     "opacity": "1"     }, 500 ); // "1" olan opacity değieridir.0.1 ile 1 arasında olmalı
		     }, function() {
		       $(this).animate({
		         "opacity": "0.5"             }, 1000 ); // "1" olan kısım Resmin üstünden çekildiğinde tekrar hangi opacity değeri alacağıdır
		         });
		   });
          // Bu kısım resmin üstüne geldiğinde soluklaşmasını sağlar.Bitiş
});
</script>

2-) Body taglarımızdan sonra aşağıdaki kodu istediğimiz yere koyuyoruz .

<div id="MiLaT"><img border="0" src="hakkimizda.jpg" alt="Hakkimizda" /></div>
<div id="MiLaT"><img border="0" src="referanslar.jpg" alt="Referans" /></div>
<div id="MiLaT"><img border="0" src="hesaplama.jpg" alt="Hesaplama" /></div>
<div id="MiLaT"><img border="0" src="iletisim.jpg" alt="Iletisim" /></div>

3-)
Kodlamımız bitti şimdi açıkalamaya geçelim.Siz kullanmayacağınız kısmı silebilirsiniz başlangıç ve bitiş olarak açıklayıcı metin olarak 1. kısımda yazdım
.

  $("#MiLaT img").hover(function()

yazan yerde MiLaT classı içindeki resimleri seçili hale getiriyoruz.Siz kendi css classınızı belirtebilirsiniz.

Demo Sayfası


Yorumlar (8)
Sende Bir Cevap Yazsan Ne Olurdu Ha Ne Olurdu

Isim (Zorunlu)

Website

hd porno