Tạo cửa sổ popup khi rê chuột vào ảnh
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.
Xem demo trực tiếp ở đây : thuthuatso.com/rechuot.html
Để thực hiển, trước tiên bạn chèn đọan code CSS này vào trước thẻ đóng </head> trong code template:
- Đăng nhập blog
- Vào bố cục
- Vào chỉnh sửa code HMTL
- Chèn đọan code CSS bên dưới vào trước dòng code </head>
.img-thumbnail{
position: relative;
z-index: 0;
}
.img-thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.img-thumbnail span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}
.img-thumbnail span img{
border-width: 0;
padding: 2px;
}
.img-thumbnail:hover span{
visibility: visible;
top: -100px;
left:100px;
}
</style>
- Dòng code màu đỏ chính là vị trí popup sẽ hiển thị ở trong blog của bạn. Hãy điều chỉnh 2 giá trị này để có được vị trí thích hợp nhất trên blog của bạn.
- Save template.
Và sau cùng là code HTML:
<img src=”link ảnh1” border=”0″ height=”98″ width=”130″/>
<span>
<img src=”link ảnh1“/>
</span>
</a>
Chúc các bạn thành công.
Nguồn: fandung
Bài viết liên quan:
(Đánh giá bài viết)
Loading ...
minh moi hoc Web can ban chi giao.
Muon hien ra thong tin cua san pham nhu trang thegioididong.com thi phai lam sau vay ban.
Bạn hãy viết tiếng việt có dấu. Cám ơn bạn nhiều
Nhầm nguồn rồi bạn ah, ^^, bài viết này là của mình.
www.fandung.com/2009/05/tao-cua-so-popup-khi-re-chuot-vao-anh.html
Thực sự rất khó có thể xác định được nguồn gốc thực sự của bài viết. Tôi sẽ kiểm tra và khắc phục trong thời gian sớm nhất. Cảm ơn bạn đã quan tâm và góp ý.