Cara Membuat Tooltip gambar dengan jquery

kali ini EFA akan sharing jquery lagi, karena Tooltip kali ini di buat dengan bantuan jquery, dan sedikit berbeda dengan Tooltip - Tooltip biasanya, seperti apa bentuk Tooltip gambar dengan jquery, ini silahkan di lihat demo nya dibawah ini, ngak usah kemana mana, jadi coba sobat blogger mania sorot saja gambar ini, mereka pada telanjang sepertikita dulu.

kita lanjut ke tahap pembuatannya :

1. Log in ( masuk di blog anda )
2. Klik Rancangan
3. Klik Edit HTML
4. Cari Kode </head>
5. Setelah ketemu silahkan anda simpan kode di bawah ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.js' type='text/javascript'></script>
<script>
this.imagePreview = function(){ /* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.preview").hover(function(e){
this.t = this.title;
this.title = ""; var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");     },
function(){
this.title = this.t; $("#preview").remove();
    }); $("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
}); };

// starting the script on page load
$(document).ready(function(){
imagePreview();
});
</script>

sekarang cari kode ]]></b:skin>

setelah ketemu silahkan anda simpan kode di bawah ini di atas kode ]]></b:skin>

#preview{
position:absolute;
border:2px solid #0e0;
background:#0B0;
padding:5px;
display:none;
color:#fff;
}

Ok sekarang silahkan klik SIMPAN TEMPLATE
dan kode pemanggilannya / penggunaannya ada di bawah ini,

<a href="Disini URL gambar Tooltip" class="preview"><img src="Disini url gambar" width="100" height="150"></a>

Atur ketinggian dan lebar gambar lihat kode
width = Lebar, [ silahkan sesuaikan dengan keinginan anda ]
height = Tinggi [ silahkan sesuaikan dengan keinginan anda ]
Disini URL gambar Tooltip, Disini url gambar =  silahkan ganti dengan url gambarnya.


Untuk menggunakannya di sidebar silahkan Tambah gadget ► html/javascript
Kalau di postingan silahkan beralih dari mode Compose ke ► Edit html
Mungkin hanya itu yang bisa saya share semoga bermanfaat.

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «