Trong việc thiết kế website, việc tạo thêm hiệu ứng cho website của bạn là một phần rất quan trọng giúp cho website của bạn đẹp và sống động hơn. Đặc biệt với các website thương mại điện tử, việc tạo cho phần trình các sản phẩm của bạn sống động và thu hút người xem là một yếu tố sống còn quyết định. Sau đây DIM GROUP sẽ hướng dẫn bạn tạo hiệu ứng tooltip cho ảnh sản phẩm sử dụng JavaScrip.

Đây là hình ảnh của hiệu ứng tooltip khi hoàn thành. Khi di chuột qua ảnh nhỏ, ảnh to sẽ được phóng ra:

tooltip Jquery

Bạn tại Source code tại đây.

Trong Source code bạn cần chú ý một số điểm chỉnh sửa sau :

.thumbnail-item đây là class css cho div tooltip, ở đây ta phải để position là relative.

.tooltip ở đây để display:none để bình thưởng ảnh to bị ẩn đi, chỉ khi di chuột qua ảnh nhỏ thì ảnh to mới được hiện ra.

.tooltip span.overlay là class cho phần chú thích ở ảnh phóng to.

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

DMCA.com