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.
kişi tarafından okundu.
Yorum Gönder