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

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.

CHÚC CÁC BẠN THÀNH CÔNG.

Author : Admin

Share this

Related Posts