Tooltip Dengan Preview Gambar
Tooltip Dengan Preview Gambar - Metode ini, memungkinkan kita dapat menambahkan sebuah elemen lain ke tubuh/ objek tooltip. Elemen tambahan sudah diposisikan absolute, sehingga yang perlu kita lakukan adalah mengisi elemen tersebut dengan konten, seperti gambar atau text sebagai tabahannya yang akan bertindak sebagai isi tooltip.
Yang perlu kita lakukan hanya menentukan posisi yang sesuai untuk tooltip tersebut, sehingga membuatnya terlihat bergerak, dimana ketika kursor digerakkan pada objek, tooltip dengan elemen tambahan didalamnya ikut bergerak mengikuti gerakan kursor dan ketika kursor keluar dari objek, maka tooltippun akan otomatis menghilang.
Untuk mengiplementasikannya cukup mudah, kita hanya perlu menyisipkan class="screenshot" pada objek
DEMO:
Memberi atribut judul pada tag A
<a href="LINK_URL"
class="screenshot" Memberi Pratinjau Gambar
<a href="LINK_URL"
class="screenshot" [Demo]
Memberi atribut judul dan Pratinjau Gambar
<a href="LINK_URL"
class="screenshot" Untuk memulainya silahkan gunakan data berikut ini, yang dapat kita sisipkan kedalam tag <head> pada template:
<script type="text/javascript">
// <![CDATA[
this.screenshotPreview = 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.screenshot").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='' />"+ c +"</p>");
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#screenshot").remove();
});
$("a.screenshot").mousemove(function(e){
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
screenshotPreview();
});
// ]]>
</script>
<style type="text/css">
#screenshot{
position:absolute;
border:1px solid #ccc;
background:#ff0;
padding:5px;
display:none;
color:#fff;
}
</style>
Demikian sekilas bagaimana cara membuat tooltip yang dapat menampilkan Preview Gambar. Terimakasih, semoga bermanfaat!
Mantap gan tutorialnya
ReplyDeleteAsslamualaikum gan sedikit mungkin kalau bisa di up date artikel pada tutorial tooltip dengan preview gambar. jadi intinya dimana secripnya di pasang dan apakah tutorial ini untuk blogger atau word press html, saya kira dengan up datetannya nati akan lebih meudah di pahami oleh pembaca dan gampang untuk di praktikkan. jujur saja tutorial seperti ini banyak pengguna yang akan memampaatkan oleh karena itu kami hanya memberi pemasukan untuk dapat di pergunakan sesui posisinya terimakasih agan
ReplyDelete