"Hiệu ứng cửa sổ "Popup" cho ảnh"

(Traidatmui.com) – Trước đây mình đã giới thiệu đén các bạn một số hiệu ứng cho hình ảnh như: Lightbox, Imagewarp... Hôm nay mình xin chia sẻ cùng các bạn thủ thuật làm hiệu ứng cho ảnh bằng css. Ở đay mình sẻ tạo một cửa sổ Popup cho hình ảnh, tức là ban đầu bạn có hình ảnh dạng thumbnail và sau khi rê chuột vào ảnh thumbnail đó thì có một cửa sổ hiện ra kích cở ảnh đầy đủ, khi bạn rê chuột ra khỏi ảnh thumb cửa sổ sẽ biến mất ngay. Bạn hãy xem ảnh minh họa bên dưới sẽ thấy rỏ.

Hình ảnh nminh họa

☼ Tiến hành thủ thuật

1. Đăng nhập Blogspot
2. Vào bố cục chọn chỉnh sửa HTML (Edit HTML)
3. Thêm vào trước thẻ ]]></b:skin> đoạn code bên dưới
.thumbnail {
position: relative;
z-index: 0;
}

.thumbnail span {
position: absolute;
background: lightyellow; /*Đây là màu nền của cửa sổ popup*/
padding: 3px;
left: -1000px;
border: 1px dashed #006666; /*đường viền của sổ popup*/
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail:hover span {
visibility: visible;
top: auto;
left: auto;
}


Chỉnh sửa code: Bạn hãy dựa vào chú thích ở trong code để chỉnh sửa, sau khi chỉnh sửa xong hãy xóa đi những dòng chú thích đó.

4. Sau khi chỉnh sửa xong save template lại.
- Để sử dụng hiệu ứng này cho ảnh trong bài đăng hay trên blog, bạn hãy sử dụng code bên dưới
<a class="thumbnail" href="http://www.traidatmui.com/"><img width="150px" height="96px" src="http://lh6.ggpht.com/_BTztXRwC9ik/S4tj4lnAcrI/AAAAAAAAANw/vwXqEQJYh-c/s640/2009_11_21%5E13_31_42.jpg" /><span><img src="http://lh6.ggpht.com/_BTztXRwC9ik/S4tj4lnAcrI/AAAAAAAAANw/vwXqEQJYh-c/s640/2009_11_21%5E13_31_42.jpg" /></span></a>

Chỉnh sửa:
- Link màu xanh dương (http://www.traidatmui.com/) là đường link dẫn tới khi click vào ảnh, bạn hãy thay lại cho phù hợp.
- Hai link màu cam chính là link ảnh hai link này phải giống nhau thì ảnh mới hiển thị đúng ảnh thực của ảnh thumb ban đầu, hãy thay thành ảnh bạn muốn tạo hiệu ứng.

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

Xem khác cùng chủ đề

3 nhận xét | Viết lời bình

Admin
9/23/2010 09:47:00 CH Trả lời

Theo yêu cầu của bạn codonpro mình xin hướng dẫn thêm. Nếu bạn muốn khi rê chuột vào ảnh sẽ hiển thị một thông tin về ảnh thì bạn chỉ việc thay dòng code trong bước4 thành.

<span>Nội dung thông tin về ảnh của bạn</span>

Thân chào!

9/24/2010 04:12:00 SA Trả lời

Hay đó bạn :)

9/26/2010 07:16:00 CH Trả lời

code này hay đấy bạn, tôi ko ngờ với css mà làm dc popup bạn NÉT lắm

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang