1. Xin lưu Ý! Các thành viên vui lòng kiểm tra lại bài trùng lặp của mình và xóa chúng ngay khi đó. (Mỗi thành viên hãy dành 5 phút thời gian của mình để kiểm tra lại các lỗi đăng bài trùng lặp trước đây và xóa chúng khỏi diễn đàn). BQT xin được gửi lời cám ơn trân thành tới các thành viên!

Cách hiển thị ảnh PNG trong suốt trên trình duyệt IE6

Thảo luận trong 'Linh Tinh' bắt đầu bởi cutebaby, 30/4/14.

Lượt xem: 229

  1. cutebaby

    cutebaby VIP Member Thành viên BQT VIP Member

    Tham gia:
    7/7/11
    Bài viết:
    235
    Được thích:
    1
    Tín dụng:
    18
    Giới tính:
    Nữ
    Nơi ở:
    Hà Nội
    Hiện định dạng ảnh PNG chỉ được hỗ trợ bởi một số trình duyệt mới nhý Firefox, Opera, IE7. Còn một số trình duyệt cũ nhý từ IE6 trở xuống đều không hỗ trợ định dạng ảnh này. Trong bài viết này chúng ta sẽ dùng một số thủ thuật để định dạng ảnh PNG có thể hiển thị tốt trong IE.

    Trong khuôn khổ bài viết chúng ta sẽ không đi sâu vào phân tích nguyên lý cũng nhý là cách thức để làm cho định dạng PNG hiển thị tốt trên IE. Mà chúng ta chỉ dừng lại ở cách làm để đạt được những điều ở trên.

    Trong tài liệu HTML của bạn các ảnh .png vẫn được chèn vào như thông thường.
    <img scr="test.png" alt="Ảnh ví dụ" title="Ảnh ví dụ" />

    Có 1 giải pháp người ta hay dùng là chuyển PNG ~~> GIF , song GIF chỉ có 256 đôi khi ko đáp ứng dc yêu cầu
    VD:

    ------GIF ----------PNG-----
    [​IMG][​IMG]
    Vì nền trắng nên khó thấy dc sự khác biệt, mình thử đưa nó vào nền xanh nha
    ------------GIF -----------------PNG-----
    [​IMG]


    Nhìn vào chắc bạn cũng biết cái nào là gif cái nào là PNG,

    sau đây là 1 cách fix bằng js mà mình sưu tầm dc ở 1 trang nước ngoài:

    bạn chèn đoạn code vào giữa thẻ <head> của trang web
    HTML:
    <script defer type="text/javascript">
     var arVersion = navigator.appVersion.split("MSIE")
     var version = parseFloat(arVersion[1])
    
     if ((version >= 5.5) && (document.body.filters))  {
     for(var i=0; i<document.images.length; i++)
     {
    
     var img = document.images[i]
     var imgName = img.src.toUpperCase()
    
     if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
    
     {
     var imgID = (img.id) ? "id='" + img.id + "' " : ""
     var imgClass = (img.className) ? "class='" + img.className + "' " : ""
     var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
     var imgStyle = "display:inline-block;" + img.style.cssText 
             if (img.align == "left") imgStyle = "float:left;" + imgStyle
     if (img.align == "right") imgStyle = "float:right;" + imgStyle
     if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
     var strNewHTML = "<span " + imgID + imgClass + imgTitle
     + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
     + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
             img.outerHTML = strNewHTML
     i = i-1
     }
     }
     } </script>
    
    
    Nếu ko thích chèn thì bạn có thể tải đính kèm về và chèn nó theo dạng
    HTML:
    <script defer type="text/javascript" src="pngfix.js"></script>
    Lưu ý: ko bỏ defer

    Các file đính kèm:

    Last edited by a moderator: 30/4/14