JavaScript Image Trail Tooltip
Tabel Konten
Pertama kali Saya melihat tooltip semacam ini di situs SXC. Saya mencoba untuk membuat replikanya dengan tanpa menyertakan dukungan untuk peramban-peramban lawas. document.all
itu sudah sangat ketinggalan zaman!
Keistimewaan dari tooltip ini adalah dia bisa bergerak mengikuti gerakan pointer serta bisa mempertahankan posisinya agar tetap berada pada area yang terlihat di halaman agar Anda tidak mengalami masalah-masalah seperti: tooltip keluar terlalu jauh ke sebelah kanan atau ke sebelah bawah dari area terlihat pada halaman. JavaScript ini juga bisa digunakan untuk menggantikan salah satu plugin jQuery Saya yang tidak begitu terkenal dan tidak sering diperbaharui lagi:
JavaScript
/*! JavaScript Image Trail Tooltip by Taufik Nurrohman <http://gplus.to/tovic> */
(function(w, d) {
var tooltip = d.createElement('div'),
noImage = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", // 1 x 1 pixel transparent GIF
top = 0,
left = 0,
docWidth = 0,
docHeight = 0,
offsetTop = 20, // Default top distance of the tooltip to the mouse pointer
offsetLeft = 20, // Default left distance of the tooltip to the mouse pointer
wait = null;
// Get the correct width of the document without scrollbars
function getDocWidth() {
return d.documentElement.clientWidth;
}
// Get the correct height of the document
function getDocHeight() {
return Math.max(
d.body.scrollHeight, d.documentElement.scrollHeight,
d.body.offsetHeight, d.documentElement.offsetHeight,
d.body.clientHeight, d.documentElement.clientHeight
);
}
tooltip.id = "trail-image";
tooltip.className = "trail-image";
tooltip.innerHTML = '<img src="' + noImage + '" alt="Loading..." style="float:none;display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;border:none;outline:none;background:none;margin:0;padding:0;">';
// Just like `DOMContentLoaded` event, but only to
// wait for the existence of the `<body>` element
// to insert the tooltip markup in the proper area
function waitForBodyExist() {
if (!d.body) {
wait = setTimeout(waitForBodyExist, 100);
} else {
clearTimeout(wait);
d.body.appendChild(tooltip);
docWidth = getDocWidth();
docHeight = getDocHeight();
w.onresize = function() {
docWidth = getDocWidth();
docHeight = getDocHeight();
};
w.onscroll = hideTrail;
}
// console.log('Still waiting...');
} waitForBodyExist();
// Function to show the tooltip
// `width` => the tooltip width
// `height` => the tooltip height
// `file` => the URL of the image to show
function showTrail(width, height, file) {
tooltip.style.visibility = "visible";
tooltip.children[0].src = file;
tooltip.style.width = parseInt(width, 10) + "px";
tooltip.style.height = parseInt(height, 10) + "px";
d.onmousemove = function(e) {
if (!e) e = w.event;
if (e.pageX || e.pageY) {
left = e.pageX;
top = e.pageY;
} else if (e.clientX || e.clientY) {
left = e.clientX + d.body.scrollLeft + d.documentElement.scrollLeft;
top = e.clientY + d.body.scrollTop + d.documentElement.scrollTop;
}
tooltip.style.top = parseInt(((top >= docHeight - (height + offsetTop + 10)) ? top - (height + offsetTop) : top + offsetTop), 10) + "px";
tooltip.style.left = parseInt(((left >= docWidth - (width + offsetLeft + 10)) ? left - (width + offsetLeft) : left + offsetLeft), 10) + "px";
};
}
// Function to hide the tooltip
function hideTrail() {
d.onmousemove = "";
tooltip.style.top = "-9999px";
tooltip.style.left = "-9999px";
tooltip.style.visibility = "hidden";
tooltip.children[0].src = noImage;
docWidth = getDocWidth();
docHeight = getDocHeight();
}
// Add to the window object as an external/global function
w.showTrail = showTrail;
w.hideTrail = hideTrail;
})(window, document);
CSS
/* Image Trail Tooltip CSS */
.trail-image {
width:0;
height:0;
background-color:#ddd;
border:1px solid #888;
position:absolute;
top:-9999px;
left:-9999px;
z-index:9999;
visibility:hidden;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 1px rgba(0,0,0,.2);
box-shadow:0 1px 1px rgba(0,0,0,.2);
}
Penggunaan
Dasar Penggunaan
Ada dua fungsi utama dalam skrip di atas, yaitu showTrail
dan hideTrail
. showTrail digunakan untuk menampilkan tooltip sedangkan hideTrail digunakan untuk menyembunyikannya. Anda bisa menerapkannya pada atribut onmouseover
dan onmouseout
seperti ini:
<a href="img/large.jpg">
<img onmouseover="showTrail(250, 100, 'img/medium.jpg');" onmouseout="hideTrail();" src="img/small.jpg" alt="">
</a>
Tentukan lebar dan tinggi gambar baru pada parameter width
dan height
serta URL gambar baru yang ingin ditampilkan pada parameter file
:
Menyimpan Data di dalam Atribut HTML
Menuliskan fungsi berkali-kali secara inline mungkin akan melelahkan. Untuk itu Anda bisa memodifikasinya dengan cara memasukkan setiap URL gambar yang lebih besar di dalam atribut HTML5 data-*
:
<img alt="" src="img/small.jpg" data-image-preview="img/medium.jpg">
Kemudian untuk penerapan fungsinya:
(function() {
var img = document.getElementsByTagName('img');
for (var i = 0, len = img.length; i < len; ++i) {
if (img[i].getAttribute('data-image-preview')) {
img[i].onmouseover = function() {
showTrail(this.offsetWidth * 3, this.offsetHeight * 3, this.getAttribute('data-image-preview'));
};
img[i].onmouseout = hideTrail;
}
}
})();
Pada kode di atas Saya menerapkan this.offsetWidth * 3
dan this.offsetHeight * 3
untuk menciptakan skala tooltip menjadi tiga kali lipat dari gambar thumbnail yang didekati pointer. Jadi anggap saja URL yang berada di dalam atribut data-image-preview
memiliki ukuran sebesar tiga kali lipat dari thumbnail.
Pastikan DOM sudah berada dalam keadaan siap:
Tip untuk Gambar-Gambar dari Picasa
Kita tahu bahwa kita bisa mengubah resolusi gambar yang disimpan di Picasa dengan cara mengubah path /sN
pada setiap gambar. Berikut ini adalah contoh penerapan fungsi showTrail
dan hideTrail
tanpa memerlukan adanya atribut data-image-preview
. Sekali Anda menerapkan fungsi ini, maka semua gambar yang berasal dari Picasa dengan ukuran lebar tidak lebih dari 100 piksel akan bisa menampilkan tooltip dengan lebar gambar 400 piksel:
(function() {
var img = document.getElementsByTagName('img');
for (var i = 0, len = img.length; i < len; ++i) {
var valid = (img[i].src && /\/s[0-9]+(\-c)?\/.*?\.(bmp|gif|jpg|jpeg|png)/i.test(img[i].src) && img[i].offsetWidth <= 100);
if (valid) {
img[i].onmouseover = function() {
showTrail(this.offsetWidth * 4, this.offsetHeight * 4, this.src.replace(/\/s[0-9]+(\-c)?/, "/s400$1"));
};
img[i].onmouseout = hideTrail;
}
}
})();
Pembaharuan: Pengecekan lebar gambar yang Saya terapkan di atas terkadang tidak bekerja karena mungkin fungsi telah tereksekusi sebelum dimensi gambar terbentuk, sehingga lebar gambar akan sama dengan 0 dan itu membuatnya bisa lolos dari pengecekan. Anda bisa mengeluarkan logika img[i].offsetWidth <= 100
dan memasukkannya ke dalam event onmouseover
seperti ini untuk memastikan agar pengecekan lebar gambar bisa dilakukan setelah dimensi gambar terbentuk setiap kali Anda mendekatkan pointer ke atas gambar:
var valid = (img[i].src && /\/s[0-9]+(\-c)?\/.*?\.(bmp|gif|jpg|jpeg|png)/i.test(img[i].src));
if (valid) {
img[i].onmouseover = function() {
if (this.offsetWidth <= 100) {
showTrail(this.offsetWidth * 4, this.offsetHeight * 4, this.src.replace(/\/s[0-9]+(\-c)?/, "/s400$1"));
}
};
img[i].onmouseout = hideTrail;
}
Catatan Tambahan untuk Internet Explorer
Pastikan deklarasi <!DOCTYPE html>
dinyatakan pada dokumen HTML Anda agar skrip ini bisa bekerja dengan baik. Selain itu, menambahkan tag meta ini sedekat mungkin dengan <head>
juga bisa mencegah Internet Explorer untuk berubah ke mode compatibility view tanpa kita kehendaki:
<meta http-equiv='X-UA-Compatible' content='IE=Edge'>
35 Komentar
Adhy Suryadi
Keren banget mas... hadeueuehhh susah juga untuk memahami bahasa javascript... :D
Admin
wah cukup keren mas, namun susah amat untuk dipahami mas \o/
Unknown
Bener Mbak Leony, lumayan rumit nih memahami javascript dan CSS ini
Samapi ni hari saya, masih belajar terus untuk memhami tentang javascript dan CSS
Damar Zaky
mantap nih
Imron Fhatoni
mantap mas Taufik :-d
Lalu Abd Rahman
Berarti bisa memperbaiki image preview yg sy pake di yujikop?
Taufik Nurrohman
Sesuaikan dengan kebutuhan.
Unknown
wew :D , buka langsung ada update baru
Beben Koben
widiw...komplit bener :-bd
Beben Koben
itu maen sampe ke hungaria (.HU)? cemiwiw
Kang Ismet
Beda ga mas sama yang ini ?
http://hohoketauan.blogspot.com/2013/04/demo-image-preview-dengan-jquery.html
Unknown
sama kayaknya :3 tinggal memberi tr.caption pada cssnya aja :)
Taufik Nurrohman
Yang ini murni JavaScript, tidak memerlukan JQuery, jadi lebih ringan.
Unknown
ijin coba dulu ya mas :D
Dixy
Masih keren yang ini :D
M. Alex Joenaedi
Wah asik lebih ringan dari yang udah-udah, terimaksih banyak mas
BloggerSpice
Bro I have seen this effect on mas template site. So how we can add this effect on blog post image in Home page?
Taufik Nurrohman
Take the last demo. Copy the JavaScript code in it and upload it somewhere. Then place the uploaded code externally above the
</body>
tag inside this conditional tag:And place the CSS code above the
</b:skin>
code.Anonim
wew keren om, izin coba. makasih udah share :D
- salam damai -
Anonim
Izin bookmarks, mau nyoba kapan" mas B)
Unknown
bagus banget mas, jadi image nya bisa di bawa2 pake pointer hehe ,,
kunjungan perdana ,,
blog nya keren banget
Anonim
Asikkk izin coba gan ... :)
Anonim
:-bd jos gandos
Unknown
Mas kalo cara di atas di terapkan di postingan gimana ?? bisa nggak??
:D
Anonim
thanks gan..
admin
thank youuuuu \o/
Ana Sriwahyuni
saya juga membuat artikel sejenis, pertanyaan saya sama dengan Kang Ismet, apakah sama dengan yang saya jelaskan di artikel blog ini mas?
panduantemplateblog.com/2013/02/cara-memberikan-efek-memperbesar-zoom.html
Taufik Nurrohman
Persamaannya mungkin sama-sama memakai library JQuery...
Anonim
Salam Keanal sebelumnya Mas Angwyn, menarik artikel nya
Ijin simak Mas,. Rumit juga memahami javascript dan css,
Terima kasih sudah berbagi
Suwardi
Perkenalan Salah Nama, Tapi sesuatu yang salah kadang baik kedepannya atau bisa saja tetap salah...hahaaa
Game Cover
is possible to show the information of an image automatically on blogger? exactly as in the example you gave of SXC? a widget that shows the image resolution and how many views it already had? just like this or similar http://2.bp.blogspot.com/-O2rCu8-1LQY/UoY4APkUdzI/AAAAAAAAAAA/NO-8OFd24QQ/s1600/javascript-tooltip-image-trail-in-sxc-hu-site.png
Taufik Nurrohman
Yes for showing the image resolution/dimension, image title and description that inserted inside the image tag itself. But impossible for showing how many views it already had.
Game Cover
i know you are a very busy person, but can we talk by skype? this is my site www.gamecover.com.br and im using many of your scripts, i need something, i can hire you to do this for me?
Game Cover
this is my skype jeronimo_lopes can i add you to?
RizkyKR
kalau efek javascript ini digunakan untuk teks pada default title berjenis teks bagaimana mas taufik...?? 0:)