JQuery ile Bilgi Baloncukları Oluşturma

Bugün jQuery ile bilgi baloncukları oluşturma örneği göstereceğim. Yani tanımladığımız bir elementin üzerine geldiğimizde o lement hakkında bilgi verebileceğimiz bir pencere açılacak.

Bu örneğimizde linklere, textlere veya elementlere bilgi baloncuğu açarken "title" eiketini kullanacağız. Title etiketinin içine yazdırdığımız bilgiyi jquery yardımıyla bilgi baloncuğu şeklinde kullancılarımıza göstereceğiz. 

 

 

 

 

 

 

 

 

 

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>


<style type="text/css">  

.dis_kutu {width: 960px; margin: 0 auto; overflow: hidden; height:910px;}

.bilgi_balonu {
    display:none;
    position:absolute;
    border:1px solid #333;
    background-color:#161616;
    border-radius:5px;
    padding:5px 10px;
    color:#fff;
    font-size:12px Arial;
    border-bottom:4px solid #C03;
}
</style>

 

<script type="text/javascript">
$(document).ready(function() {
        // bilgi_balonu only Text
        $('.bilgi_bal_ac').hover(function(){
                // Üstüne gelince
                var title = $(this).attr('title');
                $(this).data('tipText', title).removeAttr('title');
                $('<p class="bilgi_balonu"></p>')
                .text(title)
                .appendTo('body')
                .fadeIn('slow');
        }, function() {
                // Üstünde ayrılınca
                $(this).attr('title', $(this).data('tipText'));
                $('.bilgi_balonu').remove();
        }).mousemove(function(e) {
                var mousex = e.pageX + 20; //Get X coordinates
                var mousey = e.pageY + 10; //Get Y coordinates
                $('.bilgi_balonu')
                .css({ top: mousey, left: mousex })
        });
});
</script>

 


<div class="dis_kutu">
 Tüm Örnekler için | <a title="Daha Fazla Örnek İçin Tıklayın" class="bilgi_bal_ac" href="http://alpsonmez.com">alpsonmez.com</a> 
  </div>

<div class="dis_kutu">
  
<h2>Üstüne gelince açılacak paragraf</h2>
<p title="Yazının üstüne gelince burdaki bilgi baloncuğu açıldı" class="bilgi_bal_ac">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin purus odio, elementum quis eleifend nec, accumsan et leo. Mauris tellus tellus, vehicula id pulvinar ut, egestas molestie odio. Suspendisse potenti.</p>

 

<h2>Resim üzerine gelince açılacak bilgi baloncuğu</h2>
<img src="image.jpg" class="bilgi_bal_ac" title="Resim bilgi balonu" />

 

<h2>İnput bilgi baloncuğu</h2>
<input type="text" placeholder="İsminizi giriniz" class="bilgi_bal_ac" title="İsminizi giriniz"/>
</div>

Programın Çıktısı

a

Mesaj ve Yorumlar

Yorum Sayısı (0)

ÜYE YORUMLARI

Çevrimiçi :
12
Günlük :
245
Haftalık :
1112
Aylık :
3580
Copyright © 2012 İşbara Alp Sönmez – Programlama Örnekleri. Her hakkı saklıdır. www.alpsonmez.com Bu sitedeki herhangi bir içeriğin, herhangi bir sitede iznim dışında paylaşım yapılması durumunda hukuki dava açacağımı tarafınıza arz ederim.