JS PNG-fix collides with "image-fade" script (in I.E)

Discussion in 'JavaScript' started by joakimk, Jan 31, 2007.

0
  1. #1
    Hi all!

    I'm using an external JavaScript file to "fix" the problems in IE with handling transparent PNG images: http://homepage.ntlworld.com/bobosola/index.htm This is a great resource, btw :)

    However, in the same page, I'm also using a second external JavaScript file to create an "image cross-fade" effect: http://slayeroffice.com/code/imageCrossFade/xfade2.html

    Here's how I'm using these scripts
    (see http://www.bentesakupunktur.no for live page)
    <html>
<head>
<title>Laksev&aring;g Akupunktur</title>
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

<link rel="stylesheet" type="text/css" href="xfade2_o.css" />
<script type="text/javascript" src="xfade2.js"></script>
</head>

<body>
<div id="imageContainer">
<img src="bilder/slides/bente.png" width="399" height="306">

<img src="bilder/slides/benteak.png" width="399" height="306">
<img src="bilder/slides/bente2.png" width="399" height="306">
<img src="bilder/slides/laksak.png" width="399" height="306">
<img src="bilder/slides/bente3.png" width="399" height="306">
</div>
</body>
</html>
    HTML:
    In Firefox, these scripts work great together -- I've even tried removing the conditional "<!--[if lt IE 7.]>" thing; still works in FF. In I.Explorer, however, I get the following error:

    While, if I remove the PNG-fix script (the first external script), the fader works in IE -- but then the PNG images are ugly... :(
    (see http://www.bentesakupunktur.no/index2.html for example of this)

    Can anyone see how these two scripts are in conflict, it would be great!
    Please visit the pages at my home domain to see the errors in effect :)

    Thanks a bunch! :D

    - Joakim
     
    joakimk, Jan 31, 2007 IP
  2. frankcow

    frankcow Well-Known Member

    Messages:
    4,859
    Likes Received:
    265
    Best Answers:
    0
    Trophy Points:
    180
    #2
    Maybe you should consider an inline transparency script instead, that may resolve it
     
    frankcow, Jan 31, 2007 IP
  3. joakimk

    joakimk Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    It seems that the PNG fix is to replace any <img src="*.png"> tags with a <span> tag:

    ...snip...
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
    Code (markup):
    This means that the slideshow div (ref. first post in thread) becomes:
    <div id="imageContainer">
<span style="width:399px;height:306px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder/slides/bente.png', sizingMethod='scale');"></span>
<span style="width:399px;height:306px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder/slides/benteak.png', sizingMethod='scale');"></span>
<span style="width:399px;height:306px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder/slides/bente2.png', sizingMethod='scale');"></span>
<span style="width:399px;height:306px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder/slides/laksak.png', sizingMethod='scale');"></span>
<span style="width:399px;height:306px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bilder/slides/bente3.png', sizingMethod='scale');"></span>
</div>
    HTML:
    Thus, the fade script no longer has any img tags to work on in its <div>. It seems I need a way to fix the PNG transparency without losing the <img> tags. Is it possible to place the necessary style/filter directly within the "style" attribute of the <img> tag? Any suggestions?

    Btw, here's a guy with the exact same problem: www. codingforums.com/showthread.php?t=77497
     
    joakimk, Jan 31, 2007 IP