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

Tuấn 00:00 - 01/04/2014 Javascript 26 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

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

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

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?

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

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

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

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

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

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 kinh doanh đồ handmade

Thiết kế website kinh doanh đồ handmade

Với sự phát triển của công nghệ và mạng internet trên toàn cầu thì bên cạnh cửa hàng truyền thống, hoạt động kinh doanh đồ handmade online thông qua website, các trang rao vặt, mạng xã hội,… đã...

07/02/2017

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, đà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

Thiết kế website tại Phúc Thọ - Hà Nội

Thiết kế website tại Phúc Thọ - Hà Nội

Bạn đang là doanh nghiệp tại Phúc Thọ - Hà Nội có nhu cầu thiết kế website và quảng cáo sản phẩm của mình qua thương mại điện tử?

01/04/2014

Thiết kế Website tại Tân Yên - Bắc Giang

Thiết kế Website tại Tân Yên - Bắc Giang

Hãy liên hệ với dịch vụ  Chúng tôi cam kết mang đến cho quý khách hàng những website có giao diện thiết kế đẹp, thân thiện, hệ thống quản trị thông minh, SEO hiệu quả, tăng thứ hạng Alexa, cập...

01/04/2014

Thiết kế website tại Quốc Oai - Hà Nội

Thiết kế website tại Quốc Oai - Hà Nội

Bạn đang phân vân chưa biết chọn đối tác nào để có thể thiết kế được một website giao diện đẹp mà hiệu quả, thân thiện với các công cụ tìm kiếm tại Quốc Oai - Hà Nội?

01/04/2014

Thiết kế website tại Lục Nam - Bắc Giang

Thiết kế website tại Lục Nam - Bắc Giang

Với kinh nghiệm nhiều năm chuyên về dịch vụ thiết kế website, DIM Group đã tạo được thương hiệu trên thị trường thiết kế website với nhiều lĩnh vực kinh doanh khác nhau.

01/04/2014

Thiết kế website tại Yên Dũng - Bắc Giang

Thiết kế website tại Yên Dũng - Bắc Giang

Các sản phẩm website của DIM sáng tạo theo yêu cầu, dịch vụ phong cách chuyên nghiệp, nhiều mẫu web đẹp ấn tượng, nhiều chức năng cao cấp hiện đại, là địa chỉ thiết kế web uy tín hàng đầu, chi phí...

01/04/2014

MÃ GIẢM GIÁ

Facebook