Tooltip cho hình ảnh sử dụng Javascript

Chia sẻ:

25.5.19 | 0 nhận xét | lượt xem

Có rất nhiều cách để hiển thị tooltip cho hình ảnh, và ở bài viết này mình sẽ giới thiệu đến các bạn một dạng tooltip. Đặc biệt với hiệu ứng tooltip này, bạn sẽ không phải lo lắng về hình ảnh tooltip hiển thị quá xa so với hình ảnh thu nhỏ mà hình ảnh phóng to sẽ di chuyển theo con trỏ chuột. Đoạn javascript bên dưới sẽ giúp chúng ta trong công việc này

/*! 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);
}

Cách sử dụng cơ bản

Có hai chức năng chính trong đoạn js bên trên, cụ thể là showTrail và hideTrail . showTrail được sử dụng để hiển thị một tooltip trong khi hideTrail được sử dụng để ẩn tooltip. Bạn có thể áp dụng nó vào thuộc tính onmouseover và onmouseout như sau:

<a href="img/large.jpg">

  <img onmouseover="showTrail(250, 100, &#39;img/medium.jpg&#39;);" onmouseout="hideTrail();" src="img/small.jpg" alt="">

</a>

img/large.jpg: Link hình gốc
img/medium.jpg: Link hình ảnh tooltip (có thể lấy link ảnh gốc)
img/small.jpg: Link hình ảnh thu nhỏ
250: Chiều rộng của hình ảnh tooltip
100: Chiều cao của hình ảnh tooltip

Demo

Lưu dữ liệu trong các thuộc tính của HTML

Nếu bạn thực hiện công việc này cho blog của mình thường xuyên bạn nên làm theo cách sau và bạn sẽ không phải mất thời gian chỉnh sửa kích cỡ của từng hình ảnh tooltip nữa. Sử dụng cấu trúc HTML sau:

<img alt="" src="img/small.jpg" data-image-preview="img/medium.jpg">

img/small.jpg: Link hình ảnh thu nhỏ
img/medium.jpg: Link hình ảnh tooltip (có thể lấy link ảnh gốc)
Sau đó bạn thêm đoạn JS sau để thực hiện cố định kích thước cho hình ảnh tooltip

(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;
        }
    }
})();

Trong đoạn JS trên có 2 thông số được mình lưu ý là 3 nghĩa là hình ảnh tooltip sẽ lớn gấp 3 lần hình ảnh thu nhỏ.

Demo
Chúc các bạn thành công!

Tham khảo từ DTE :]