Jquery Image Tooltip

Tooltip Adalah Komponen grafis dalam user interface pengguna. Komponen ini biasanya muncul ketika pointer mouse diarahkan ke komponen.
Ini hanya sebuah fitur tambahan untuk mempercantik blog dan membuatnya tampil beda =D dimana sebagian situs besar seperti Kapanlagi.com sepertinya juga memasang tooltip khusus yang begitu menarik.
Buat yang belum pernah dengar, tooltip itu balon info yang muncul saat sebuah gambar atau link yang berisi tag title diarahkan oleh kursor [Contoh] tapi kali ini yg muncul bukan hanya title saja melainkan gambar (arahkan mouse anda di gambar bawah ini)

Bentuk default-nya seperti ketika sobat mengarahkan kursor mouse pada tab atas browser.
Tooltip kali ini menggunakan sedikit Javascript dan CSS, jadi bagi sobat yang merasa tidak begitu perlu ya tidak usah memaksakan kecantikan blognya :) karena ditakutkan akan sedikit memberatkan blog walau tidak banyak karena namanya javascript pasti sedikit memberatkan blog meski 0,0005 sekian detik.

Jika sobat ingin mempraktikkannya silakan ikuti langkah berikut ini.

Berikut caranya :

• Login Ke Akun Blogger sobat
• Pilih Rancangan/Design
• Pilih EDIT HTML

1. Silahkan sobat Copy semua CSS ini dan letakan di atas ]]></b:skin> atau </style>

#psychifio {
  font-family: "Arial", Geneva, san-serif;
  font-size: 11px;
  color: #fbf7be;
  text-align: center;
  text-shadow: 0px 1px 0px #aca99e;
  padding: 10px 0 30px 0;
  position: absolute;
  padding: 5px;
  display: none;
  border-radius: 25px;
  box-shadow: 5px 5px 8px #999;
  background: #333 url(http://image-on-tooltip.googlecode.com/files/jqttbg-1.gif) bottom left repeat;
  max-width:220px;
  border:5px solid #ccc;
}
#psychifio img {
  border-radius: 15px;
  height: auto;
  margin-bottom: 10px;
  max-width: 320px;
  border: 7px solid black;
}

2. Jika sudah tambahkan Javascript ini di atas </head>

<script type="text/javascript">
//<![CDATA[
this.imagethumb = function () {
    xOffset = 150;
    yOffset = 10;
    $(".post-body img").hover(function (e) {
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='psychifio' style='padding:10px 6px 10px;'><img src='" + this.src + "' alt='Image jqtt1' />" + c + "</p>");
        $("#psychifio").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("slow")
    }, function () {
        this.title = this.t;
        $("#psychifio").remove()
    });
    $(".post-body img").mousemove(function (e) {
        $("#psychifio").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px")
    })
};
$(document).ready(function () {
    imagethumb()
});
//]]>
</script>

3. Klik save template.
Semoga bermanfaat, jika ada yg ingin di tanyakan silahkan tinggalkan komentar sobaat...

Share on Facebook

Share on Twitter

Share on Google+