Jquery Title Görünümünü Değiştirme
Javascript

Jquery Title Görünümünü Değiştirme

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


author

Aykut ErdoÄŸan

easytooltip, title, jquery, css

  • Bu Yazılara da Gözat:

    2 Yorum

    author
    author

    Cevapla