Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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.

4 komentar:

  1. Pagi Gan, meskipun pertanyaanku kmrn belum terjawab <22 September 2010 15.00>. Sekarang saya mau nanya lagi, apakah artikel diatas bisa digunakan dengan template Joomla (saya pakai hosting hyperphp).
    Kalau bisa, gimana cara memasang nya Gan???

    Tolong dijawab ya Gan... (sekalian pertanyaan yg kemarin/Mencari file hosting gratis untuk javascript dan css)

    Sekali lagi Thank's Gan.

    BalasHapus
  2. Buat Sobat Muhammad:
    1. Javascript Tooltip-4 tidak bisa digunakan di blogspot.
    2. Domain gratisan biasanya tidak memuaskan. Sering terjadi hanya gratis selama 1 th dan tahun berikutnya harus bayar. Supaya blog bisa kembali "nongol" (stl di "non aktifkan") tentunya harus bayar dulu baru bisa digunakan lagi!). Beberapa yang sampai saat ini gratis total, biasanya lebih sering banyak macetnya. Mendingan buat saja di blospot, wordpress atau blogdetik. Dijamin lancar! O, ya ... aku sbnrnya sudah berkunjung ke blog spy sekaligus untuk jawab pertanyaan lewat comment. Sayang blom bisa buka kolom comment-nya.

    Salam ...

    gubhug reyot

    BalasHapus
  3. kapan tooltip 4 bisa dipake di blogspot ya cak?? hehehehe.. kurang rame blog ku ga ono tultip sing apik koyo ngono cak..

    BalasHapus
  4. thnks u infonya
    http://www.inimun.co.cc

    BalasHapus

 
GR | Edited by | gubhug reyot