• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Hiệu ứng phóng to hình ảnh bằng CSS

3
17/11/2010

Có nhiều cách tạo hiệu ứng phóng to hình ảnh như sử dụng CSS, Javascript hoặc kết hợp cả hai, nhưng nếu bạn không muốn mất nhiều thời gian thì có thể sử dụng một phương pháp đơn giản hơn.

Việc xác định chiều rộng và chiều cao tối đa định trước của một hình ảnh giúp chúng ta giới hạn được chiều rộng và chiều cao tối đa của hình đó một cách dễ dàng. Ví dụ muốn cho hình ảnh lớn không tràn ra ngoài phần nội dung trang web thì chỉ cần định trước chiều rộng tối đa của hình ảnh đó.

Chúng ta có thể tạo ra một lớp (class) và sử dụng nó trong thẻ <img> như sau:

<img class="expa" src="URL_hình ảnh gốc có kích thước lớn" />

Tiếp đến chúng ta định thuộc tính CSS cho hình ảnh:

<style>
img.expa {
cursor: pointer;
max-width: 150px;
}
img.expa:hover {
max-width: none;
}
</style>
Trong phần CSS này chúng ta xác định kích thước tối đa cho hình ảnh hiển thị ban đầu, sau đó khi rê con trỏ vào hình ảnh thì nó được phóng to ra hình ảnh gốc có kích thước lớn.



Ví dụ: Rê con trỏ vào hình ở trên để xem hiệu ứng.

{3 bình luậnAdd yours ?}

19:22:00, 17 thg 11, 2010

Cái này đơn giản vậy mà kết quả cũng hay thật.

Reply
10:28:00, 6 thg 11, 2011

Bác ơi sao mình rê chuột vào nhưng ảnh không thay đổi, vậy đoạn Css này có còn dùng được nữa không bác?

Reply
11:16:00, 6 thg 11, 2011

@24h-Cafe Bài viết này lâu lắm rồi, chắc anh Hà thay theme nên code cho thủ thuật này bị mất!

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn