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