The Corner of My Soul

Lần trước Pearl đã có một bài giới thiệu về cách fix lỗi hiển thị ảnh PNG trong suốt cho IE 5.5+. Tuy nhiên, cách thức tương đối dài dòng, khó sử dụng và có một lỗi nho nhỏ mà trong bài viết lần trước Pearl đã chưa kịp giới thiệu (tại chưa thấy phát sinh ). Trong bài viết lần này Pearl sẽ giới thiệu với mọi người một cách thức đơn giản hơn để có thể làm công việc này đồng thời đền bù thêm cách thức fix cái lỗi nho nhỏ kia luôn thể.

Về phương thức thì bài viết lần này hoàn toàn giống với bài trước tức là sử dụng bộ lọc "AlphaImageLoader" để hỗ trợ IE5.5+ hiển thị được ảnh PNG trong suốt. Tuy nhiên không rắc rối như cách thức trực tiếp đã giới thiệu ở lần trước. Lần này chúng ta sẽ sử dụng một extension của IE là HTML Component (có định dạng *.HTC). HTML Component như tên gọi của nó chính là một thành phần HTML bao gồm stylesheet, script được đóng gói lại để có thể tham chiếu cho nhiều trang web. Giúp thuận tiện hơn trong việc xây dựng các ứng dụng web như sự quảng cáo của Microsoft (mặc dù W3C đã ignore công nghệ này của Microsoft). Và một điều thú vị là chúng ta có thể nhúng HTML Component vào trang web thông qua CSS với thuộc tính behavior.

Nhưng trước tiên chúng ta sẽ phải xây dựng một HTML Component để giúp hiển thị ảnh PNG trong suốt cái đã. Ý tưởng ở đây đó là chúng ta sẽ viết một script để nhận diện hình ảnh định dạng PNG trên trang web rồi sau đó chúng ta sẽ replace những ảnh PNG này bằng một ảnh trắng và đưa ảnh PNG vào bộ lọc AlphaImageLoader.

Ví dụ ban đầu trên trang web của bạn có một ảnh PNG như sau

<img src="WP-Logo.png" width="250" height="250">

Chúng ta sẽ viết một đoạn script để đọc trang web và nếu nó đọc thấy ảnh WP-Logo.png thì sẽ replace img tag như trên thành thế này

<img src="blank.gif" style="width: 250px; height: 250px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='WP-Logo.png', sizingMethod='scale')" />

Cơ chế là như vậy thôi nhưng nói thật Pearl cũng hem biết viết cũng hem có thời gian ngâm cứu cách viết mấy HTML Component này nên bạn nào có nhu cầu tìm hiểu sâu về vấn đề này thì có thể tham khảo tại đây.

Trong bài viết này Pearl sẽ chỉ giới thiệu về một HTML Component do TwinHelix xây dựng sẵn với các chức năng như sau:
+ Tự động hỗ trợ trong suốt cho tất cả ảnh PNG trên trang web (tất nhiên ảnh chỉ hỗ trợ ảnh PNG trong suốt) bao gồm ảnh định nghĩa trong thẻ img, ảnh nền CSS.
+ Hỗ trợ script chuyển src, class name của thành phần ảnh HTML.
+ Hỗ trợ CSS định vị, repeat cho ảnh (cần phải dùng thêm javascript).

Bây giờ bạn download file IE PNG Fix 1.0 từ TwinHelix về giải nén được file bank.gif và iepngfix.htc. Bạn upload 2 file này lên host của mình. Bây giờ bạn chỉ cần thêm thuộc tính behavior: url(iepngfix.htc) vào một selector nào đó trong CSS để áp dụng hiệu ứng cho selector đó. Ví dụ:

div, img, a, input { behavior: url (iepngfix.htc) }

Lưu ý: Url file htc dựa trên liên hệ của file htc với trang web muốn áp dụng hiệu ứng chứ không phải là với file CSS như trường hợp url của background. Ảnh blank.gif nên đặt cùng vị trí với file htc hoặc thay đổi url cho ảnh blank.gif trong file htc. Nếu trang web của bạn sử dụng quá nhiều ảnh PNG thì sẽ load lâu hơn.

Một lỗi nghiêm trọng khi sử dụng bộ lọc AlphaImageLoader đó là nếu như áp dụng bộ lọc này cho một thành phần A. Đồng thời thành phần A này được đặt CSS position là static, relative hay absolute. Trong thành phần A này lại chứa các thành phần link B. Hệ quả đó là các liên kết B bên trong thành phần A sẽ không thể click. Biện pháp khắc phục:

- Nếu thành phần A có position là static thì chúng ta sẽ thêm vào thành phần B thuộc tính CSS position:relative và z-index:1

- Nếu thành phần A có position là relative hay absolute thì phải thêm một innerwrap C trong thành phần A. Và chuyển hiệu ứng fix PNG từ A sang C. Rồi tiếp tục xử lý như cách trên. Tức là dùng C làm trung gian.

Nếu muốn sử dụng thuộc tính CSS position và repeat cho ảnh PNG trong suốt thì bạn phải sử dụng thêm javascript trong phiên bản IE PNG Fix 2.0 beta

Xem ví dụ minh họa cho IE PNG Fix 1.0 (non JS) và IE PNG Fix 2.0.