Minal 'Aidin wal Faizin
Mampukah setiap tahun bertambah baik?
Sebuah tantangan bagi siapapun. Jadikan Idul fitri sebagai mement yang indah dan tepat untuk setiap kali merubah diri menjadi pribadi yang jauh lebih baik, lebih peduli, jauh dari korupsi, jauh dari iri hati dan dengki... dan tentu saja ... jauh lebih lebih berharga dimata Allah dan dan sesama.

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 «


5comments:

  1. Mantap nian nih blog, macam mana nih buatnya, jangan lupe jengulah blog aku

    ReplyDelete
  2. Gan saya mau nanya gimana cara bikin kolom komentar kayak gini dengan profilnya yang muncul ketika di sorot gan,,,?

    ReplyDelete
    Replies
    1. Admin bisa aja memberikan scriptnya kepada sobat, tapi admin kwatir kalau kalau tidak cocok ditemplate sobat, bila sobat berminat silahkan saja kirimkan alamat email sobat, nanti admin kirim scriptnya melalui email

      Delete
  3. Terima kasih min, tutorialnya oke punya, aku dah praktekin di http://stok-batik.blogspot.com/

    ReplyDelete
  4. Mantap Gan.. sangat membantu.

    ReplyDelete

Terimakasih Atas Komentar Anda dan EFA akan segera menuju Blog anda...

NextPrev