1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    58
    Vote Rating
    0
    ser is on a distinguished road

      0  

    Default Transparent PNG icons IE6

    Transparent PNG icons IE6


    When I put a png icon is visible frame around it.


    I tried to describe the icon in css
    Code:
    .open {
    	background-image:url(../images/icons/open.png) !important;
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/icons/open.png', sizingMethod='scale');
    }
    but it did not help.
    Does anyone can suggest a solution?

  2. #2
    Sencha User
    Join Date
    Sep 2010
    Posts
    58
    Vote Rating
    0
    ser is on a distinguished road

      0  

    Default


    No one uses IE6?

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    34
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Not if we can possibly avoid it.

    IIRC, IE6 just cannot do this. It's ancient technology.

  4. #4
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,649
    Vote Rating
    6
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    Here is a prototype example how to do transparent png in IE6, you should be able to convert it to ExtJS
    PHP Code:
    Element.addMethods({
        
    pngHack: function(element) {
            
    element = $(element);
            var 
    transparentGifPath 'clear.gif';

                
    // If there is valid element, it is an image and the image file ends with png:
            
    if (Object.isElement(element) && element.tagName === 'IMG' && element.src.endsWith('.png')) {
                var 
    alphaImgSrc element.src;
                var 
    sizingMethod 'scale';
                
    element.src transparentGifPath;
            }

            if (
    alphaImgSrc) {
                
    element.style.filter 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="#{alphaImgSrc}",sizingMethod="#{sizingMethod}")'.interpolate(
                {
                    
    alphaImgSrcalphaImgSrc,
                    
    sizingMethodsizingMethod
                
    });
            }

            return 
    element;
        }
    });

    Event.observe(window'load', function() {
        if (
    Prototype.Browser.IE) {
            var 
    version parseFloat(navigator.appVersion.split(';')[1].strip().split(' ')[1]);
            if (
    version === 6) {
                $$(
    'img').each(function(img) {
                    
    img.pngHack();
                });
            }
        }
    }); 
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  5. #5
    Sencha User
    Join Date
    Sep 2010
    Posts
    58
    Vote Rating
    0
    ser is on a distinguished road

      0  

    Default


    Thanks steffenk, I will try your method

  6. #6
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    390
    Vote Rating
    13
    devtig will become famous soon enough

      0  

    Default


    I have converted it for Ext JS.

    Code:
    if (Ext.isIE6) {    Ext.select('img').each(function(element) {
            var endsWith=function(s) {
                return this.indexOf(s, this.length - s.length) !== -1;
            }, alphaImgSrc, urlMatch;
             
            if (endsWith.call(element.dom.src, '.png')) {
                alphaImgSrc = element.dom.src;
                element.dom.src = '/images/s.gif';
                element.setStyle('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader('+
                    'src="'+alphaImgSrc+'",sizingMethod="scale")');
            } else if (urlMatch=element.getStyle('background-image').match(/^url[("']+(.*\.png)[)"']+$/i)) {
                alphaImgSrc = urlMatch[1];
                element.setStyle('background-image', 'none');
                element.setStyle('filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader('+
                    'src="'+alphaImgSrc+'",sizingMethod="crop")');
            }
        });
    }

Similar Threads

  1. [3.0/core] IE6 PNG fix
    By dj in forum Ext 3.x: User Extensions and Plugins
    Replies: 3
    Last Post: 10 Nov 2010, 9:38 AM
  2. IE7 Png transparent slideIn+FadeIn or slideOut+FadeOut
    By moochkai in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 18 Dec 2008, 2:21 AM
  3. The best way to get 24-bits PNG images as buttons in IE6?
    By bartvde in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 20 Feb 2008, 7:10 AM
  4. How does one save a PNG with a transparent body?
    By jay@moduscreate.com in forum Community Discussion
    Replies: 3
    Last Post: 15 Oct 2007, 9:30 AM
  5. slightly OT, is IE7 still buggy with transparent png's ?
    By neongrau in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 15 Mar 2007, 8:25 AM

Thread Participants: 3

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar