Başlığın çok karışık olduğunun farkındayım. Bu yazımda sizlere anlatmak istediğim şey birçok blog sitemizin kullandığı küçük soluk resimlerin fare ile üzerine gelince asıl rengini alması ve bağlantı alanı olarak kullanılması. (Örnek olarak, Sesebian ve Fikirbozan‘ın sidebar bölgesine bakabilirsiniz) Fikirbozan.net’in gönderisinden esinlenerek yazdığm bu makalede hem geçerli (valid) bir kod yazımı ve kolaylıkla sitemize uygulayacağımız bir örnek yapacağız. Aslına bakarsanız bu işi filter parametresi ile de yapabiliyoruz ancak bu yöntem W3C’nin Xhtml Validation alanından geçemiyor. Bu yüzden hali hazırda DynamicDrive.com üzerinde kullanılan şuradaki scripti geçerli bir hale getirdim. Localde yaptığım denemelerde scriptin hem çalıştığını hem de Geçerlilik Testinden geçtiğini gördüm. Bu küçük ön bilgiden sonra hemen uygulamamıza geçelim.
Öncelikle bu uygulamayı bir blog sitesinde kullanacaksanız header.php dosyanızı açın ve aşağıdaki kodları girin. Şayet bunu html/css bazlı bir sitede kullanacaksanız head etiketinin bitiminden önce aşağıdaki kodu yazın.
Yazının Devamını Göster ▼
<script type=”text/javascript”>
//Highlight image script- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use
function makevisible(cur,which){
strength=(which==0)? 1 : 0.2
if (cur.style.MozOpacity)
cur.style.MozOpacity=strength
else if (cur.filters)
cur.filters.alpha.opacity=strength*100
}
</script>
Bu kodu yazdıktan sonra resim bağlantılarımızı göstermek istediğimiz alana ise aşağıdaki kodu yazıyoruz. (Blog sitelerinde sidebar.php dosyası içine bu kodu yerleştirebilirsiniz)
- <div class=”baglantikutusu”>
<a href=”whatever.html”><img src=”resminiz.gif” style=”filter:alpha(opacity=20);-moz-opacity:0.2″ onmouseover=”makevisible(this,0)” onmouseout=”makevisible(this,1)” alt=”" /></a>
</div>
Böylelikle ilgili alandaki resimleriniz soluk bir şekilde görünecek ve verdiğiniz link özelliği nedeniyle fare ile üzerine gelince asıl rengini alacak. Bu işlemi yaparken ben bağlantıyı bir div sınıfı içine aldım. Bu sınıfı siz kendinize göre de değiştirebilirsiniz. (div sınıfı içine almadığınız linkler geçerlilik testinden geçemeyebilir) Resimlerinizin (bağlantı vereceğiniz resimlerin) aynı ebatta olması bu uygulamanın daha kolay ve daha güzel olmasını sağlar. (Tıpkı verdiğim örneklerdeki gibi)
Böylece istediğiniz kadar bağlantıyı belli bir alanda gösterebilir ve ziyaretçilerinize farklı bir görünüm sunabilirsiniz. Umarım faydalı olmuştur… (Şayet bu uygulamayı bir blog üzerinde uygulayan arkadaşlar olursa lütfen sitelerini geçerlilik testine tabi tutsunlar)
Harika olmuş, üstelik CSS’te olduğu kadar yavaş da değil, aniden değişiyor transparanlığı. Teşekkürler, en kısa zamanda bu sisteme geçtiğimde kullanacağım.
Teşekkür ederim Barış vallahi siteye koydum ama bir blog üzerinde deneme imkanım olmadı, sen eğer uygulayıp bana da bildirirsen ben de bi kontrol ederim. Geçerlilik testinden bir blog üzerinde geçecek mi çok merak ediyorum. İlgin için sağol. :)
Teşekkür ederim. Sitenin boyutunu baya bir arttıyor opacity. Görsellik tamam ama bizim gibi kısıtlı maddi imkanlarla siteyi döndürenlerin kotayı aşmaması lazım. En az kodla en çok şey…
Text bağlantılara alternatif olsun diye geliştirdiğim bir uygulamaydı, başarılıda oldu kanaatindeyim çünkü birçok blog yazarı arkadaş kullanmaya başladı.İşin bir diğer cilveside bağlantılar için tasarladıgım blog logolarını hem blog sahipleri benimsedi ve kabullendi, hemde diğer tüm bloglara yansıdı (: umarım bu teşhir yöntemini diğer tüm bloglarda görebiliriz.
Volkan.
İzin verirsen ben de senin yazını referans alarak bu konuda kendi benimsediğim bir yöntemi blog’umda anlatmak istiyorum (:
Ben bikaç deneme yaptım sitem için. İE ve Firefox ta düzgün çalıştı ancak Opera da çalışmadı.
bunu blogcu lar ın kullanabılme sansı varmı acaba..bilgi verirseniz sevınıriz..
@dehliz evet bloglarda da kullanabiliriz, zaten ana kullanım alanı olarak blogları kastetmiştim. Kolay gelsin.
Birşey sormak istiyorum. Şimdi eğer wordpresste widget desteği varsa o zaman bu kodur ne şekilde tam olarak nere koyuyoruz. Biraz daha detaylı açıklayabilir misiniz. Teşekkürler.