Soluk Görünümlü Resim Baglantilar 22 Agustos
t-infection.com
Basligin çok karisik oldugunun farkindayim. Bu yazimda sizlere anlatmak istedigim sey birçok blog sitemizin kullandigi küçük soluk resimlerin fare ile üzerine gelince asil rengini almasi ve baglanti alani olarak kullanilmasi. (Örnek olarak, Sesebian ve Fikirbozan‘in sidebar bölgesine bakabilirsiniz) Fikirbozan.net’in gönderisinden esinlenerek yazdigm bu makalede hem geçerli (valid) bir kod yazimi ve kolaylikla sitemize uygulayacagimiz bir örnek yapacagiz. Aslina bakarsaniz bu isi filter parametresi ile de yapabiliyoruz ancak bu yöntem W3C’nin Xhtml Validation alanindan geçemiyor. Bu yüzden hali hazirda DynamicDrive.com üzerinde kullanilan suradaki scripti geçerli bir hale getirdim. Localde yaptigim denemelerde scriptin hem çalistigini hem de Geçerlilik Testinden geçtigini gördüm. Bu küçük ön bilgiden sonra hemen uygulamamiza geçelim.
Öncelikle bu uygulamayi bir blog sitesinde kullanacaksaniz header.php dosyanizi açin ve asagidaki kodlari girin. Sayet bunu html/css bazli bir sitede kullanacaksaniz head etiketinin bitiminden önce asagidaki kodu yazin.
Yaziyi Kapat ?
<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 yazdiktan sonra resim baglantilarimizi göstermek istedigimiz alana ise asagidaki kodu yaziyoruz. (Blog sitelerinde sidebar.php dosyasi içine bu kodu yerlestirebilirsiniz)
* <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 sekilde görünecek ve verdiginiz link özelligi nedeniyle fare ile üzerine gelince asil rengini alacak. Bu islemi yaparken ben baglantiyi bir div sinifi içine aldim. Bu sinifi siz kendinize göre de degistirebilirsiniz. (div sinifi içine almadiginiz linkler geçerlilik testinden geçemeyebilir) Resimlerinizin (baglanti vereceginiz resimlerin) ayni ebatta olmasi bu uygulamanin daha kolay ve daha güzel olmasini saglar. (Tipki verdigim örneklerdeki gibi)
Böylece istediginiz kadar baglantiyi belli bir alanda gösterebilir ve ziyaretçilerinize farkli bir görünüm sunabilirsiniz. Umarim faydali olmustur… (Sayet bu uygulamayi bir blog üzerinde uygulayan arkadaslar olursa lütfen sitelerini geçerlilik testine tabi tutsunlar)
