Hướng dẫn tạo hiệu ứng tooltip cho hình ảnh

DIM GROUP 01/04/2014 Javascript 223 Views Comments

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.

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 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
Hướng dẫn :

Javascript

// Load this script once the document is ready	$(document).ready(function () {	// Get all the thumbnail	$('div.thumbnail-item').mouseenter(function(e) {	// Calculate the position of the image tooltip	x = e.pageX - $(this).offset().left;	y = e.pageY - $(this).offset().top;	// Set the z-index of the current item,	// make sure it's greater than the rest of thumbnail items	// Set the position and display the image tooltip	$(this).css('z-index','15')	.children("div.tooltip")	.css({'top': y + 10,'left': x + 20,'display':'block'});	}).mousemove(function(e) {	// Calculate the position of the image tooltip	x = e.pageX - $(this).offset().left;	y = e.pageY - $(this).offset().top;	// This line causes the tooltip will follow the mouse pointer	$(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});	}).mouseleave(function() {	// Reset the z-index and hide the image tooltip	$(this).css('z-index','1')	.children("div.tooltip")	.animate({"opacity": "hide"}, "fast");	});	});

CSS

.thumbnail-item {	/* position relative so that we can use position absolute for the tooltip */	position: relative;	float: left;	margin: 0px 5px;
}
.thumbnail-item a {	display: block;
}
.thumbnail-item img.thumbnail {	border:3px solid #ccc;
}
.tooltip {	/* by default, hide it */	display: none;	/* allow us to move the tooltip */	position: absolute;	/* align the image properly */	padding: 8px 0 0 8px;
}	.tooltip span.overlay {	/* the png image, need ie6 hack though */	background: url(images/overlay.png) no-repeat;	/* put this overlay on the top of the tooltip image */	position: absolute;	top: 0px;	left: 0px;	display: block;	width: 350px;	height: 200px;	}

Phần hiển thị

<div class="thumbnail-item">	<a href="#"><img src="images/small1.jpg" class="thumbnail"/></a>	<div class="tooltip">	<img src="images/big1.jpg" alt="" width="330" height="185" />	<span class="overlay"></span>	</div>	</div>	<div class="thumbnail-item">	<a href="#"><img src="images/small2.jpg" class="thumbnail"/></a>	<div class="tooltip">	<img src="images/big2.jpg" alt="" width="330" height="185" />	<span class="overlay"></span>	</div>	</div>	<div class="thumbnail-item">	<a href="#"><img src="images/small3.jpg" class="thumbnail"/></a>	<div class="tooltip">	<img src="images/big3.jpg" alt="" width="330" height="185" />	<span class="overlay"></span>	</div>	</div>	<div class="clear"></div>

 

Chúc các bạn một ngày vui vẻ !

bg8

Bình luận

Hướng dẫn tạo hiệu ứng tooltip cho hình ảnh

SEO là gì - Lợi ích của SEO

Khi người dùng internet gõ một từ khóa tìm kiếm trên công cụ tìm kiếm như Google, Bing, Yahoo…thì kết quả trả về sẽ là một bảng danh sách các trang web có chứa nội dung mà người dùng muốn tìm kiếm...

01/04/2014

Thiết kế website tại Bắc Ninh

Trong thời đại số hiện này, các doanh nghiệp tại Bắc Ninh đã và đang tận dụng rất tốt Internet để giới thiệu và quảng bá về doanh nghiệp của mình. Với sự phát triển mạnh mẽ của truyền thông mạng,...

01/04/2014

Nguyên tắc thiết kế Website

Ngày nay, quá trình thương mại điện tử đang phát triển một cách mạnh mẽ. Website đóng một vai trò quan trọng trong công cuộc phát triển đó.  Việc xây dựng một website là điều tất yếu song để phát...

01/04/2014

Xây dựng một website hoàn hảo như thế nào?

Website của doanh nghiệp bạn được xây dựng với chất lượng tốt, được nhiều người biết đến và truy cập, nhưng làm thế nào để biến những khách hàng này thành những người mua hàng tiềm năng

01/04/2014

Hướng dẫn tạo thư viện trình chiếu ảnh tuyệt đẹp bằng Jquery

Với ứng dụng công nghệ Js hiện nay, chúng ta có thể làm được nhiều thứ từ nó, để thay thế công nghệ dùng flash như trước kia, mà tối ưu website đạt hiệu quả cao, tốc độ nhanh.DIM Group sẽ hướng...

01/04/2014

Hướng dẫn thay đổi đầu số mới các nhà mạng đơn giản nhất 2018

Hướng dẫn thay đổi đầu số vina, mobile, viettel từ 11 số sang 10 số đơn giản nhất

06/10/2018

Hướng dẫn tạo web chuẩn SEO chỉ với vài bước cơ bản

Sau đây là các bước cơ bản để tạo 1 web site chuẩn SEO

07/06/2018

Thiết kế website đồ điện tử, điện lạnh

Thiết kế website đồ điện tử âm thanh không chỉ đem đến một cửa hàng ảo với chi phí hợp lý mà còn mở ra cơ hội tiếp cận đến với nhiều khách hàng tiềm năng.

11/02/2017

Thiết kế website kinh doanh thực phẩm sạch - tạo niềm tin người dùng

Thực phẩm sạch hiện đang là mặt hàng bán đắt như “Tôm tươi” tại thị trường Việt Nam, khi mà các loại nông sản, thực phẩm bẩn, nhiễm chất độc hại ảnh hưởng đến sức khỏe người tiêu dùng đang dần bị...

09/02/2017

Thiết kế website thủ công mỹ nghệ - con đường xây dựng thương hiệu

Sản phẩm thủ công mỹ nghệ là mặt hàng có truyền thống lâu đời ở Việt Nam, gắn với nền văn hóa lúa nước dân tộc. Sự phát triển của ngành thủ công mỹ nghệ đã đóng góp đáng kể vào sự phát triển chung...

07/02/2017

Thiết kế website tại Bắc Ninh

Trong thời đại số hiện này, các doanh nghiệp tại Bắc Ninh đã và đang tận dụng rất tốt Internet để giới thiệu và quảng bá về doanh nghiệp của mình. Với sự phát triển mạnh mẽ của truyền thông mạng,...

01/04/2014

Hướng dẫn chèn reCaptcha vào website

Captcha một thuật ngữ đã quá quen thuộc với dân lập trình, Captcha giúp cho website xác định người truy cập gửi yêu cầu, bình luận,viết bài...trên web của bạn có phải là người hay chỉ là một cỗ...

01/04/2014

SEO là gì - Lợi ích của SEO

Khi người dùng internet gõ một từ khóa tìm kiếm trên công cụ tìm kiếm như Google, Bing, Yahoo…thì kết quả trả về sẽ là một bảng danh sách các trang web có chứa nội dung mà người dùng muốn tìm kiếm...

01/04/2014

Cách tạo Geo meta tag cho website

Geo meta tag là gì? Cách tạo Geo meta tag cho website hiệu quả và nhanh chóng? Sau khi thiết kế website hoàn chỉnh, việc tối ưu website là một điều hết sức cần thiết nếu bạn muốn website của mình...

01/04/2014

Thiết kế website giáo dục, đào tạo, trường học - nơi tiếp nhận nhiều học viên tiềm năng

Thiết kế website giáo dục không chỉ mở ra chân trời mới, năng động hơn, hiện đại hơn cho các cơ sở đào tạo, dạy nghề,..mà còn tăng khả năng tiếp cận và lan tỏa thương hiệu đến học viên.

07/02/2017

Facebook