Pertama kali Saya melihat tooltip semacam ini di situs SXC. Saya mencoba untuk membuat replikanya dengan tanpa menyertakan pertolongan untuk peramban-peramban lawas. document.all itu sudah sangat ketinggalan zaman!
Keistimewaan dari tooltip ini yaitu beliau dapat bergerak mengikuti gerakan pointer serta dapat mempertahankan posisinya supaya tetap berada pada area yang terlihat di halaman supaya 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 dapat dipakai untuk menggantikan salah satu plugin jQuery Saya yang tidak begitu populer 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=" Saya mencoba untuk membuat replikanya dengan tanpa menyertakan pertolongan untuk peramban JavaScript Image Trail Tooltip" 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 dipakai untuk menampilkan tooltip sedangkan hideTrail dipakai untuk menyembunyikannya. Anda dapat menerapkannya pada atribut onmouseover dan onmouseout ibarat ini:
<a href="img/large.jpg"> <img onmouseover="showTrail(250, 100, 'img/medium.jpg');" onmouseout="hideTrail();" src="img/small.jpg" alt=" Saya mencoba untuk membuat replikanya dengan tanpa menyertakan pertolongan untuk peramban JavaScript Image Trail Tooltip"> </a>Tentukan lebar dan tinggi gambar gres pada parameter width dan height serta URL gambar gres yang ingin ditampilkan pada parameter file:
Menyimpan Data di dalam Atribut HTML
Menuliskan fungsi berkali-kali secara inline mungkin akan melelahkan. Untuk itu Anda dapat memodifikasinya dengan cara memasukkan setiap URL gambar yang lebih besar di dalam atribut HTML5 data-*:
<img alt=" Saya mencoba untuk membuat replikanya dengan tanpa menyertakan pertolongan untuk peramban JavaScript Image Trail Tooltip" 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 instruksi di atas Saya menerapkan this.offsetWidth * 3 dan this.offsetHeight * 3 untuk membuat skala tooltip menjadi tiga kali lipat dari gambar thumbnail yang didekati pointer. Makara anggap saja URL yang berada di dalam atribut data-image-preview mempunyai ukuran sebesar tiga kali lipat dari thumbnail.
Pastikan DOM sudah berada dalam keadaan siap:
Tip untuk Gambar-Gambar dari Picasa
Kita tahu bahwa kita dapat mengubah resolusi gambar yang disimpan di Picasa dengan cara mengubah path /sN pada setiap gambar. Berikut ini yaitu pola 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 dapat 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 alasannya mungkin fungsi telah tereksekusi sebelum dimensi gambar terbentuk, sehingga lebar gambar akan sama dengan 0 dan itu membuatnya dapat lolos dari pengecekan. Anda dapat mengeluarkan logika img[i].offsetWidth <= 100 dan memasukkannya ke dalam event onmouseover ibarat ini untuk memastikan supaya pengecekan lebar gambar dapat dilakukan sehabis 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 supaya skrip ini dapat bekerja dengan baik. Selain itu, menambahkan tag meta ini sedekat mungkin dengan <head> juga dapat mencegah Internet Explorer untuk berubah ke mode compatibility view tanpa kita kehendaki:
<meta http-equiv='X-UA-Compatible' content='IE=Edge'>