loading...

Popular Posts

Recent Posts

    Search

    Type your search keyword, and press enter


    loading...
    X FILE
    loading...
    Home » BLOGGER » TUTORIAL » Balloon Tooltip keren di blog

    Balloon Tooltip keren di blog

     ,    
    Balloon Tooltip keren di blog
    Balloon Tooltip adalah sebuah Tips yang dapat ditampilkan dalam bentuk balon saat onmouseover diatas Link atau gambar. Balloon Tooltip ini pada dasarnya menggunakan 3 buah gambar, yang terlebih dahulu anda tempatkan dalam subfolder sama.



    Demo Balloon Tooltip

    Ini adalah sebuah demonstrasi bagaimana Balloon Tooltip dapat berjalan. Silahkan anda letakan cursor anda pada Link atau text yang berwarna kuning dibawah ini.


    Sentuhlah saya bila anda ingin melihat Balloon Tooltip.

    And here's some more content
    Roll over me
    This is the last piece of the content on this web page


    Cara Memasang Balloon Tooltip

    • Langkah Pertama
    Tambahkan kode CSS dan JS berikut ini ke dalam tag <head> template anda.

    CSS Balloon Tooltip

    <style type="text/css">

    #bubble_tooltip{
    width:147px;
    position:absolute;
    display:none;
    }
    #bubble_tooltip .bubble_top{
    background-image: url('https://sites.google.com/site/archivesiugi/javascr/bubble_top.gif');
    background-repeat:no-repeat;
    height:16px;
    }
    #bubble_tooltip .bubble_middle{
    background-image: url('https://sites.google.com/site/archivesiugi/javascr/bubble_middle.gif');
    background-repeat:repeat-y;
    background-position:bottom left;
    padding-left:7px;
    padding-right:7px;
    }
    #bubble_tooltip .bubble_middle span{
    position:relative;
    top:-8px;
    font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
    font-size:11px;
    }
    #bubble_tooltip .bubble_bottom{
    background-image: url('https://sites.google.com/site/archivesiugi/javascr/bubble_bottom.gif');
    background-repeat:no-repeat;
    background-repeat:no-repeat;
    height:44px;
    position:relative;
    top:-6px;
    }

    </style>

    Javascript Balloon Tooltip

    <script type='text/javascript'>
    //<![CDATA[

    function showToolTip(e,text){
    if(document.all)e = event;

    var obj = document.getElementById('bubble_tooltip');
    var obj2 = document.getElementById('bubble_tooltip_content');
    obj2.innerHTML = text;
    obj.style.display = 'block';
    var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
    if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
    var leftPos = e.clientX - 100;
    if(leftPos<0)leftPos = 0;
    obj.style.left = leftPos + 'px';
    obj.style.top = e.clientY - obj.offsetHeight -1 + st + 'px';
    }

    function hideToolTip()
    {
    document.getElementById('bubble_tooltip').style.display = 'none';

    }

    //]]></script>


    • Langkah Kedua
    Meng-Implementasikan Balloon Tooltip
    Untuk membuat Balloon Tooltip pada sebuah Link atau Text, silahkan anda gunakan tag seperti berikut ini:
    <a href="#" onmousemove="showToolTip(event,'Ini adalah isi Tooltip');return false" onmouseout="hideToolTip()">Link atau Text</a>

    Anda tidah harus menggunakan tag <a> jika anda tidak menginginkannya dan anda dapat menggunakan tag <span> sebagai gantinya. Contoh:
    <span class="tooltip_text" href="#" onmousemove="showToolTip(event,'Ini adalah isi Tooltip');return false" onmouseout="hideToolTip()">Link atau Text</span>

    • Langkah Terakhir
    Silahkan anda letakan tag <div> berikut ini di bagian bawah halaman anda untuk menampilkan Balloon Tooltip pada halaman website anda.
    <div id="bubble_tooltip">
    <div class="bubble_top"><span></span></div>
    <div class="bubble_middle"><span id="bubble_tooltip_content"></span></div>
    <div class="bubble_bottom"></div>
    </div>

    sumber: dhtmlgoodies

    Share This:    Facebook Twitter Google+ Stumble Digg
    : BLOGGER TUTORIAL