Tạo zoom ảnh khi rê chuột vào - Thủ thuật Tin học - Bài Viết - 08 văn hóa học - Đại học Sư Phạm Đà Nẵng


Chào mừng Các bạn đã ghé thăm Website của tập thể lớp chúng tôi vào CN, ngày 11/12/2016, lúc 2:28 AM. Chúc bạn tìm được những điều bạn cần trên Website của lớp chúng tôi. Nếu Bạn muốn Download tài liệu thì xin vui lòng đăng nhập để thấy linhk, nếu có thắc mắc gì xin vui lòng liên hệ với Quản trị Website theo số điện thoại: 0985639026 hoặc Email: chinh08cvhh@gmail.com. Xin chân thành cảm ơn các bạn.
Trang chủ » Articles » Thủ thuật Tin học

Tạo zoom ảnh khi rê chuột vào

Tạo zoom ảnh khi rê chuột vào

Ngày đăng: 09/5/2011| 



Chỉ có vài dòng CSS đơn giản nhưng đã hiện được zoom ( popup ) của hình rất hay.

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.


Hình ảnh minh họa:

Để 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>


<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: #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 2 HTML:

<a href="#">
<img src="link ảnh1" border="0" height="98" width="130"/>
<span>
<img src="link ảnh1"/>
</span>
</a>

Bạn muốn ảnh hiển thị ở đâu thì bạn cứ chèn code 2 HTML vào đó. Ví dụ như trong bài viết, hay ở ngòai blog (nếu ở ngòai blog thì tạo 1 widget HTML/Javascript rồi dán code vào)

Chúc bạn thành công !
Theo http://www.08cvhh.ucoz.com
Chủ đề: Thủ thuật Tin học | Đăng bởi: hoangtu_bongdem2912_86 (09/05/2011)
Lượt xem: 256 | Đánh giá: 0.0/0
Tổng số ý kiến: 0
Chỉ thành viên mới có thể thêm các ý kiến.
[ Đăng ký | Đăng nhập ]
 
Trang chủ | Lý lịch! | Ghi danh | Đăng xuất | Đăng nhập 

Website được phát triển bởi các thành viên lớp 08cvhh - Khoa Ngữ Văn - Trường đại học Sư Phạm Đà Nẵng

== Website bắt đầu hoạt động từ ngày 01 tháng 5 năm 2011==