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,498
    Vote Rating
    46
    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,664
    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
    389
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi