1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Transparent PNG Rollover Issues (IE + pngbehavior.htc)

Discussion in 'Programming' started by spacebass5000, Sep 22, 2006.

  1. #1
    I have employed the use of the pngbehavior.htc trick in order to get my transparent PNGs working in IE. I have everything working just nicely except for the fact that when I browse the site, I start losing images even though the underlying HTML has them there. I should state that these images have rollover effects applied to them.

    Please note that i DO have width and height properties set within the HTML and the version of pngbehavior.htc appears to be the most recent (which is supposed to be able to handle this). Also, when browsing in Firefox or Opera, everything is perfect. No problems whatsoever. Yay IE!!! not...

    I have narrowed down the problem to the code in pngbehavior.htc losing the image's width and height properties. Here is that code:

    
    function fixImage() {
    if (realSrc && element.src == realSrc) {
        // this is an attempt to set the image to itself!
        // pointless - leave the filter as-is, restore the blank image
        element.src = blankSrc;
    } else {
        // set the image to something different
        if (IS_PNG.test(element.src)) {
         // fixable PNG
         realSrc = element.src;
         realWidth = element.width;
         realHeight = element.height;
         alert(realSrc + ' ' + realWidth + 'px' + ' ' + realHeight + 'px');
         element.src = blankSrc;
         element.style.width = realWidth + 'px';
         element.style.height = realHeight + 'px';
         element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + encodeURI(realSrc) + "',sizingMethod='crop')";
        } else {
         // ordinary image - make sure the fix is removed
         if (realSrc) {
            realSrc = null;
            element.runtimeStyle.filter = '';
         }
        }
    }
    }
    
    Code (markup):
    When I hit the page for the first time, everything works. When I refresh or browse to any other page in the site, I start losing images in a random fashion and the alert popup states that the width and height are now zero.

    Any help or insight you can offer will be GREATLY appreciated.
     
    spacebass5000, Sep 22, 2006 IP
  2. spacebass5000

    spacebass5000 Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    it appears the problem goes away if i set IE's cache settings for "Check for newer versions of stored pages" to "Every visit to the page". I still don't have a solutions but at least I am on the right track.
     
    spacebass5000, Sep 22, 2006 IP
  3. spacebass5000

    spacebass5000 Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I fixed it with the following:

    
    function fixImage() {
    if (realSrc && element.src == realSrc) {
        // this is an attempt to set the image to itself!
        // pointless - leave the filter as-is, restore the blank image
        element.src = blankSrc;
    } else {
        // set the image to something different
        if (IS_PNG.test(element.src)) {
         // fixable PNG
         if (!element.width && !element.height)
          {
            var tmpImg = new Image();
            tmpImg.src = element.src;
            realSrc = tmpImg.src;
            realWidth = tmpImg.width;
            realHeight = tmpImg.height;
          }
          else
          {
            realSrc = element.src;
            realWidth = element.width;
            realHeight = element.height;
          }
         //alert(realSrc + ' ' + realWidth + 'px' + ' ' + realHeight + 'px');
         element.src = blankSrc;
         element.style.width = realWidth + 'px';
         element.style.height = realHeight + 'px';
         element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + encodeURI(realSrc) + "',sizingMethod='crop')";
        } else {
         // ordinary image - make sure the fix is removed
         if (realSrc) {
            realSrc = null;
            element.runtimeStyle.filter = '';
         }
        }
    }
    }
    Code (markup):
    Speaking in terms of performance and browser resources, how bad of an idea is it to preload the image like that?
     
    spacebass5000, Sep 22, 2006 IP