CSS Transparan Resimler İle Jquery Kullanarak Bağlantı Verme

CSS ile resimlerin transparanlığını ayarlamak hiç de zor değildir. Ancak yazdığımız kodun bütün tarayıcılar tarafından aynı şekilde yorumlandığından emin olmalıyız. Bunu yapmak da zor değildir.

Bu yazıda CSS ile resim transparanlığını ayarlamanın ne kadar kolay olduğunu anlatmaya çalışacağız. Aynı zamanda bu özelliği (ve jquery’i) kullanarak yapılabilecek bağlantılara bir örnek vereceğiz.

CSS ile resim transparanlığı

CSS ile resmin transparanlığını ayarlayacak olan ve bütün tarayıcılarda çalışacak olan kod şöyledir:

.transparan {
        filter:alpha(opacity=50);
 -moz-opacity:0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;
}

Aslında “opacity: 0.5″ kodu, standartlara uyan bütün tarayıcılar tarafından doğru şekilde algılanıp çalıştırılır. Ancak kullanıcıların büyük bir bölümü standartlara uyan tarayıcıları (IE) kullanmadığı için, onların da bu güzellikten mahrum kalmamasını sağlamak için yukarıdaki ekstra kodları ekliyoruz.

Transparan resimler ile bağlantı vermek Resimlerin transparan özelliklerini kullanarak yapılabilecekler, sadece bizim hayal gücümüzle sınırlı. Burada sadece bir örnek olarak yapılabilecek bağlantıları tartışalım.

HTML

Sayfa yapısı şu şekilde:

CSS Transparan Resimlerle Link Verme

        
        
        
        
 
        

digg.com, Kevin Rose tarafından 2004 yılında kurulmuş...

Google.com Larry Page ve Sergey Brin tarafından 1998'de kurulmuş...

Facebook.com Mark Zuckerback tarafından 2003 yılında kurulmuş...

Linkedin.com Jeff Weiner tarafından 2002 yılında kurulmuş...

Twitter.com Jack Dorsay tarafından 2006 yılında kurulmuş...
Resimlere link veriyoruz ve resimlerin açıklamasını görünmez olacak şekilde dokümana yüklüyoruz.

CSS kodu

Yaptığımız çalışmanın bizim için önemli olan css kodu şu şekilde:

img {
        border:2px solid #eee;
        margin:5px;
        float:left;
        padding:2px;
}
.gorunmez {
        display:none;
}
.transparan {
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
}

Jquery ile son ayarlar

Jquery ile hover efektlerini ayarlayacağız:

$(document).ready(function(){
        $('img').hover(
          function () {
                $(this).removeClass("transparan");
                no = $(this).attr('no');
                $('p#yazi-'+no).removeClass("gorunmez");
          },
          function () {
                $(this).addClass("transparan");
                $('p#yazi-'+no).addClass("gorunmez");
          }
        );
});

Temel mantık şu şekilde: imleç resmin üzerine gelince resmin transparanlığını kaldır, ilgili yazıyı görünür yap, imleç resmin üzerinden gidince ise işlemleri geri al.

Burada dikkat edilecek en önemli nokta, gösterilecek yazıyı, img etiketi altındaki “no”dan alıyoruz. Jquery ile bu tarz işlemleri farklı şekillerde de çok kolay yapabilmekteyiz.

Sonuç

Bu özelliği kullanarak yapılabilecekler arasından sadece bir örnek olan bu uygulamadan esinlenerek başka işlemler de yapılabilir. Geliştirmek size kalmış