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.

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!

CSS Transparan Resimler İle Jquery Kullanarak Bağlantı Verme yazısına 3 Yorum yapılmış.

  • sinan 23 Ocak 2010, 16:58

    eyvallah..

  • Soner Gönül 25 Ocak 2010, 14:26

    Güzel olmuş gerçekten !

  • Mustinet 10 Şubat 2010, 22:25

    siblings kullanarak da yazılabilir. Teşekkürler

görüşünü belirt

Spam Protection by WP-SpamFree

Arama


E-Posta Aboneliği


RSS Aboneliği

En Çok Yorumlanan Yazılar

Etiketler

404 ajax apache arama butonu as astrofizik açık kaynak banner blogger blogger/blogspot Blogger / Blogspot blogspot case chmod css date dosya yükleme editör etiket etkinlik favicon featured form ftp galeri Genel gimp hata sayfası header htaccess htpasswd ilişkisel veritabanı index innodb javascript join JQuery kategori koodla linux mysql opacity php resim url

Son Yorumlar

  • isa engiz: Yazı için teşekkürler. sabit ip 2.75 tl. bu ücreti verip kendi web sunucumuzu kurabiliriz… En yakın...
  • osman: Yazı için teşekkürler. Pardus projesinin Türkiye için çok önemli olduğunu düşünüyorum. Ancak yazıda da...
  • Mustinet: siblings kullanarak da yazılabilir. Teşekkürler
  • is: CSS kullanmadan sadece HTML kodlarıyla yanyana iki sütun (tablo kullanmadan) oluşturulabilir mi?
  • Doğan Yılmaz: verdiğiniz bilgiler için çok ama çok teşekkür ederim. artık sıkı bir takipçiniz olmaya karar verdim

Sayfalar


Faydalı Bağlantılar