0

Resimlere Opacity Vermek

İnternet sitemizdeki resimlere opacity vermek ve sonra verdiğimiz değerlerle oynayıp resmin görünürlüğünü değiştirmek aslında çok basit bir durum. İhtiyacımız olan tek şey var. Belli CSS kodlarımız ve birde yine belli olan JS kodlarımız. Bu yazıda ikisinide bulacak ve bir resmin opacity değerini nasıl ayarlarsınız onu öğreneceksiniz.

İlk etapta gerekli js kodunu Google Dokümanlar üzerinden indirin. Bu dosyayı web sitesine upload etmeniz gerekli. Blogger gibi bir sistemde bu dosya kullanılamaz. Eğer dosyayı upload edemeyeceğinizi düşünüyor ya da nasıl yapılacağı hakkında bir fikriniz yoksa benim uploadımı kullanabilirsiniz. http://tabugo.com/digerisler/opaljscode.js Bu sayfayı aşağıda ekledim. Upload ettiğiniz zaman kendi sayfanızla değiştirebilirsiniz.


<head> ile </head> arasına yazacağımız kısım aşağıdadır.

<script type="text/javascript" src="http://tabugo.com/digerisler/opaljscode.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var opacity = 0.5, toOpacity = 1.0, duration = 400;
    $('.opacity').css('opacity',opacity).hover(function() {
            $(this).fadeTo(duration,toOpacity);
        }, function() {
            $(this).fadeTo(duration,opacity);
        }
    );
});
</script>

<body> ile </body> arasında kullanacağımız kısım aşağıdadır.

<a href="Resmin Gideceği URL">
<img style="opacity: 0.5;" title="Resmin Üstüne Geldiğinizde Görünen İsim" src="Resmin Bulunduğu URL" class="opacity" alt="Resim Alt Tagi" border="0" />
</a>

Yapacağımız şey çok basit. Üstteki script kodunu Wordpress kullanıyorsak Üst Kısım denilen CSS sayfasına </head> kodundan önce yapıştırıyoruz. Bu kod sonradan bütün sayfalarımızda etkin olacaktır. Blogger kullanıyorsak yine HTML düzenle kısmından CSS ayarlarına girdiğimizde </head> kodundan önce ekliyoruz.

İkinci olarak bir yazımıza eklediğimiz resimde opacity kullanmak istiyorsak resmin kodunu yukardaki gibi düzenliyoruz. Wordpress kullanıyorsak ilk önce içeriğe bir resim ekleyelim. Resim eklendikten sonra HTML kısmına geçip eklediğimiz resmin kodlarını bulalım ve yukardaki gibi düzenleyelim. Eklediğiniz resim soluk görünecektir. Mouse ile üstüne geldiğinizde resmin opaklığı artacaktır. Herhangibir problem yaşayan lütfen yorum yaparak belirtsin problemi giderebilelim.

Yorum Gönder

Yorum Gönder

 
tic
Top