Merhaba arkadaÅŸlar. Bu makalemizde title bilgisi görüntüsünü deÄŸiÅŸtireceÄŸiz. Tabiki jquery ve css yardımıyla. Öncelikle css kodlarıyla baÅŸlayacağız. Sonrasında html ve javascript kodlarımızı yazacağız. Åžimdi baÅŸlayalım dersimize.
İndex.html - Css Kodlarımız

#easyTooltip

      {

	padding:5px 10px; //kenar boşlukları

	background:url(easy.png); //arkaplan resmi

	color:#ffffff;

	z-index:200;

	font-family: Tahoma, Geneva, sans-serif;

    font-size: 11px;

	opacity: 0.9; //saydamlığını ayarladık

	font-weight:bold;

	height:25px;

      }

a {

    text-decoration: none;

	color:#03C;

  }

	a:hover { text-decoration:underline;	

  }

Öncelikle title'ın arkaplan görseli, yazı tipi, yazı rengi, yazı boyutu, saydamlığını ve diÄŸer özelliklerini burada ayarladık. Ä°stersek arkaplan için görsel yerine bir renkte atayabiliriz;

background-color:#FF0000;

ÅŸeklinde. Sonrasında linkimizin tasarımını, renk ve alt çizgi özelliklerini deÄŸiÅŸtirdik. Bu kodları head etiketleri içinde style etiketi içine yazıyoruz. Åžimdi geçelim html kodumuza.
Ä°ndex.html - Html Kodumuz

<a href="http://www.aerdogan.com/" title="A.ErdoÄŸan Web GünlüÄŸü | ae">Linkimiz</a>

Linkimizi verdik ve title bilgimizi girdik. Åžimdi sıra geldi en önemli yere javascript kodlarımıza.
İndex.html - Javascript Kodlarımız

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<script type="text/javascript" src="http://www.aerdogan.com/easyTooltip.js"></script>

$(document).ready(function(){	

    $("a").easyTooltip();

});

Burada öncelikle jquery dosyamızı çektik. Sonrasında easytooltip dosyamızı içeri aktardık. Son olarakta fonksiyonumuzu oluÅŸturduk. Böylelikle uygulamamız hazır duruma geldi. Sonraki makalelerde görüÅŸmek dileÄŸiyle...