Cara membuat dan Memasang Javascript Tooltip-4: Image, Transparency and Fade Effect

Masih seperti sebelumnya, kali ini masih akan menampilkan tooltip dengan javascript "minimalis" untuk menjaga performa blog terutama pada saat loading. Dengan javascript yang tidak terlalu berkapasitas besar diharapkan beban blog tidak akan semakin bertambah berat. Meskipun demikian sebaiknya jangan terlalu pesimistis akan kemampuan scrip yang satu ini. Meskipun terhitung sederhana, javascript yang satu ini bisa di bilang punya kemampuan agak menakjubkan.

Untuk membuatnya silahkan simpan KODE CSS di atas kode </head> kemudian simpan javascript di atas kode </body>.

Kode CSS :

<style type="text/css">
.tholtips{
        font-weight:bold;
        color: #ffcc00;
        cursor:pointer; 
}
#tholwo{
        left:-9999px;
        position:absolute; 
        display:block; 
        background:#335890 url(http://i48.tinypic.com/n5hilv.jpg) repeat-x;
        overflow:hidden;
        margin:5px;
        padding:10px;
        border-radius:15px;
        border:2px solid #3399FF;
        font-family:Arial;
}
#tholwo b{font-size:11px; font-family:Verdana;font-weight:bold;color: #99CC00;}
#tholwo h4{font-size:11px; font-family:Verdana;font-weight:bold;color: #00FFFF;margin:6px 0;}
#tholwo p{font-size:12px; font-family:Arial;color:#fff;text-align:left;}
#tholwo img{float:left;border:1px solid blue;background:#999900;padding:2px; margin:6px 8px 8px 0;}
</style>

Javascript :

<script type="text/javascript">
var tooltip=function(){
var id = 'tholwo';
var top = 10;var left = -150;var maxw = 300;var speed = 4;var timer = 40;
var endalpha = 90;var alpha = 0;
var tholwo,h;var ie = document.all ? true : false;return{show:function(v,w){
if(tholwo == null){tholwo = document.createElement('div');tholwo.setAttribute('id',id);
t = document.createElement('div');t.setAttribute('id',id + 'top');c = document.createElement('div');
c.setAttribute('id',id + 'cont');b = document.createElement('div');b.setAttribute('id',id + 'bot');
tholwo.appendChild(t);tholwo.appendChild(c);tholwo.appendChild(b);document.body.appendChild(tholwo);
tholwo.style.opacity = 0;tholwo.style.filter = 'alpha(opacity=0)';document.onmousemove = this.pos;}
tholwo.style.display = 'block';c.innerHTML = v;tholwo.style.width = w ? w + 'px' : 'auto';
if(!w && ie){t.style.display = 'none';b.style.display = 'none';tholwo.style.width = tholwo.offsetWidth;t.style.display = 'block';b.style.display = 'block';}
if(tholwo.offsetWidth > maxw){tholwo.style.width = maxw + 'px'}
h = parseInt(tholwo.offsetHeight) + top;clearInterval(tholwo.timer);
tholwo.timer = setInterval(function(){tooltip.fade(1)},timer);},
pos:function(e){var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
tholwo.style.top = (u - h) + 'px';tholwo.style.left = (l + left) + 'px';},fade:function(d){var a = alpha;if((a != endalpha && d == 1) || (a != 0 && d == -1)){var i = speed;if(endalpha - a < speed && d == 1){i = endalpha - a;}else if(alpha < speed && d == -1){i = a;}
alpha = a + (i * d);tholwo.style.opacity = alpha * .01;tholwo.style.filter = 'alpha(opacity=' + alpha + ')';}else{clearInterval(tholwo.timer);if(d == -1){tholwo.style.display = 'none'}}},hide:function(){
clearInterval(tholwo.timer);tholwo.timer = setInterval(function(){tooltip.fade(-1)},timer);}};}();
</script>

Gunakan xHTML untuk menampilkan tooltip :

Ada 4 Contoh untuk menuliskan link, nama link, beserta isi tooltip baik berupa teks ataupun teks yang disertai gambar/image :

xHTML-1 :

<span class="tholtips" onmouseover="tooltip.show('<h4>Tulis judul tooltip di sini !</h4><p>Tulis teks tooltip di sini !</p> ');" onmouseout="tooltip.hide();"><a href="Link: contoh --> (http://...html/com)"> Tulis nama-Link di sini (contoh: gubhugreyot) !</a></span>

xHTML-2 :

<span class="tholtips" onmouseover="tooltip.show('<h4>Tulis judul tooltip di sini !</h4><img src=\'http://.../image.jpg\'/><br/><h4>Tulis teks tooltip di sini !</h4> !');" onmouseout="tooltip.hide();"><a href="Link: contoh --> (http://...html/com)"> Tulis nama-Link di sini (contoh: gubhugreyot) !</a></span>

xHTML-3 :

<span class="tholtips" onmouseover="tooltip.show('<h4>Tulis judul tooltip di sini !</h4><img src=\'http://.../image.jpg\'/><p>Tulis teks tooltip di sini !</p><b>Tulis teks tooltip di sini !</b>');" onmouseout="tooltip.hide();"><a href="Link: contoh --> (http://...html/com)"> Tulis nama-Link di sini (contoh: gubhugreyot) !</a></span>

xHTML-4 :

<span class="tholtips" onmouseover="tooltip.show('<h4>Tulis judul tooltip di sini !</h4><br />Membuat tooltip ini terlihat lebih indah dan menarik saat orang melihatnya !');" onmouseout="tooltip.hide();"><a href="Link: contoh --> (http://...html/com)"> Tulis nama-Link di sini (contoh: gubhugreyot) !</a></span>

Catatan/Keterangan :

1. Sebaiknya gunakan gambar/image dengan ukuran maksimal 120px (width).
2. Berberapa variable yang terdapat dalam javascript berfungsi untuk merubah tampilan tooltip, baik berupa fade effect, posisi tooltip dan lebar tooltip.
3. Javascript Tooltip-4 diperuntukkan bagi sobat blogger lain di luar blogspot/blogger.