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

23 / Ocak / 2010 Author

İsa Engiz

Genel, JQuery, javascript Tags

css, JQuery, opacity, transparan Yorumlar

5 Yorum Yapilmis.

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.

css-transparan-resimlerle-link-verme

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.

Çalışma sonucunda oluşacak sayfayı buraya tıklayarak görebilirsiniz.

Kodları, buraya tıklayarak indiribilirsiniz.

HTML

Sayfa yapısı şu şekilde:

<h1>CSS Transparan Resimlerle Link Verme</h1>
        <a href="http://www.digg.com"><img class="transparan" src="resim/digg.jpg" no="1" /></a>
        <a href="http://www.google.com"><img class="transparan"  src="resim/google.jpg" no="2" /></a>
        <a href="http://www.facebook.com"><img class="transparan"  src="resim/facebook.jpg" no="3" /></a>
        <a href="http://www.linkedin.com"><img class="transparan"  src="resim/linkedin.jpg" no="4" /></a>
        <a href="http://www.twitter.com"><img class="transparan"  src="resim/twitter.jpg" no="5" /></a>
 
        <p class="tanim gorunmez" id="yazi-1">digg.com, Kevin Rose tarafından 2004 yılında kurulmuş...</p>
        <p class="tanim gorunmez" id="yazi-2">Google.com Larry Page ve Sergey Brin tarafından 1998'de kurulmuş...</p>
        <p class="tanim gorunmez" id="yazi-3">Facebook.com Mark Zuckerback tarafından 2003 yılında kurulmuş...</p>
        <p class="tanim gorunmez" id="yazi-4">Linkedin.com Jeff Weiner tarafından 2002 yılında kurulmuş...</p>
        <p class="tanim gorunmez" id="yazi-5">Twitter.com Jack Dorsay tarafından 2006 yılında kurulmuş...</p>

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ış

- Bu blogda yer alan yazıları RSS ile takip edebilirsiniz. RSS aboneliği için tıklayın.

- Ya da bu blogda yer alan bütün yazıları içindekiler sayfasında görüntüleyebilirsiniz. Tıklayın!