[08]Tạo cửa sổ Popup khi rê chuột vào ảnh

[Serial thủ thuật blog 1]Tạo cửa sổ Popup khi rê chuột vào ảnh 

56 thủ thuật blogspot dành cho blogger
Cách đến nhanh bài viết:
·  Nhấp chuột trái vào mục muốn xem.
·  Về đầu trang của Serial gồm 56 thủ thuật, nhấn nút
HomeSerial - Serial Thứ 1






Nguồn: [FD's BlOg]

Giới thiệu: Với vài đọan code CSS nhỏ ta có thể tạo một cửa sổ popup để hiển thị ảnh rất chuyên nghiệp mà không cần tới javascript. Thủ thuật cho phép hiện thị của sổ popup của ảnh gốc khi ta rê chuột vào. 

Nếu blog có cố định size max của ảnh thì khi dùng thumbnail, ảnh tuy có phóng to ra nhưng vẫn bị thu nhỏ lại cho vừa với giá trị tối đa cho phép của blog (nghĩa là không tràn ảnh ra blog, hoặc bị mất ảnh). 

Thứ hai là: Nếu ảnh nằm dưới cuối bài thì khi ảnh phóng to ra, ảnh sẽ không hiện đủ (bị mất khúc đuôi), nguyên do là vì khoảng trống dưới bài viết không đủ để ảnh hiện hết. 

Nên nhớ, vì ảnh cũng chỉ nằm trong chu vi bài viết.

CÁCH THỰC HIỆN 

1. Đăng nhập Blogger 

2. Chọn: Mẫu > Chỉnh sữa HTML

3. Chèn script 

Bước 1: Tìm thẻ đóng </head>

- Thêm vào trước nó đoạn code CSS sau:

---

<!-- Tạo cửa sổ popup khi rê chuột vào ảnh -->

<style type='text/css'>

.img-thumbnail{

position: relative;

z-index: 0;

}

.img-thumbnail:hover{

background-color: transparent;

z-index: 50;

}

.img-thumbnail span{

position: absolute;

background-color: transparent;

padding: 0px;

left: -1000px;

border: 0px solid #000;

visibility: hidden;

color: #000;

text-decoration: none;

}

.img-thumbnail span img{

border-width: 0;

padding: 2px;

}

.img-thumbnail:hover span{

visibility: visible;

/*Vị trí hiển thị ảnh popup*/

top:0px;

left:0px;

}

</style>

Bạn có thể điều chỉnh vị trí popup hiển thị để có được vị trí thích hợp nhất trên blog của bạn ở dòng thứ 3 và thứ 4 từ dưới đếm lên của đoạn code:

top:0px;

left:0px;

---

Ở đây mình để 0px, bạn có thể túy chỉnh lại.

Bước 2: Save template. (Lưu mẫu)

Bước 3: Chèn hình ảnh vào bài viết với đoạn code sau:

---

<a class="img-thumbnail" href="#">

<img src="LINK_HÌNH" border="0" height="120" width="120"/>

<span>

<img src="LINK_HÌNH"/>

</span>

</a>

---

LINK_HÌNH: Thay chữ LINK_HÌNH thành link ảnh của bạn.

height="120" width="120" - Chiều cao, bề rộng ảnh muốn để thumbnail. 

Nếu muốn ảnh thumbbail vẫn giữ nguyên tỷ lệ khi thu nhỏ thì nên điền mặc định một chiều cao hoặc chiều rộng ảnh thumbnail, còn phần kia bỏ trống, thì khi thumbnail, ảnh sẽ tự điều chỉnh phần còn lại.

THE END.

Bài Viết Cùng Chủ Đề