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.

<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)

Rastgele Yazılar