png transparency and IE problem

Z

zik

I've got a problem creating dinamically a img object that should show
a transparency in IE.

This is the object that I would like to create dinamically using
javascript:

<img class="fixMe" style="background:url(immagine.jpg);" alt=" "
src="diag.png" />


(the css class to fix the IE bug is:

.fixMe
{

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sr­
c='transIE.png');
padding-top:100px;
}


)

The following is the javascript code use to generate dinamically the
previous html code:

var img_banner = document.createElement('img');

img_banner.className = "fixMe";
img_banner.style.background = "url(immagine.jpg)";
img_banner.src = "diag.png";
img_banner.alt = "";

If I insert the previous html static code into the page everiting
works fine,
but with javascript don't work...Why? There is something wrong?

Thank you.
 
D

Doug Gunnoe

I've got a problem creating dinamically a img object that should show
a transparency in IE.

This is the object that I would like to create dinamically using
javascript:

<img class="fixMe" style="background:url(immagine.jpg);" alt=" "
src="diag.png" />

(the css class to fix the IE bug is:

.fixMe
{

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sr­
c='transIE.png');
padding-top:100px;

}

)

The following is the javascript code use to generate dinamically the
previous html code:

var img_banner = document.createElement('img');

img_banner.className = "fixMe";
img_banner.style.background = "url(immagine.jpg)";
img_banner.src = "diag.png";
img_banner.alt = "";
Click to expand...


Did you notice that you have img_banner.src = "diag.png" above, yet in
the
.fixMe class you have sr­c='transIE.png'? Are you sure that's correct?

If I insert the previous html static code into the page everiting
works fine,
but with javascript don't work...Why? There is something wrong?

Thank you.
Click to expand...

This is what I have found fpr the png fix, from here
http://homepage.ntlworld.com/bobosola/index.htm


/*

Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

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
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
}
}
}

Good luck.
 
D

Doug Gunnoe

.fixMe
{

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sr­
c='transIE.png');
padding-top:100px;

}

img_banner.src = "diag.png";
Click to expand...

Did you notice that you have img_banner.src = "diag.png";
yet in the .fixMe class sr­c='transIE.png'?

Are you sure this is correct?

Here is the code I found to deal with the png problem.

This loops through all the images, however.

/*

Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

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
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
}
}
}

Good luck.
 
Z

zik

Did you notice that you have img_banner.src = "diag.png";
yet in the .fixMe class sr­c='transIE.png'?

Are you sure this is correct?
Click to expand...

Yes you are right, but it was only a cut and paste error to report the
code into the news...
I can't understand why my code does't work...it seems correct. If I
correctly create the html tag
with all the attributes it should work, shouldn't it?
 
D

Doug Gunnoe

Yes you are right, but it was only a cut and paste error to report the
code into the news...
I can't understand why my code does't work...it seems correct. If I
correctly create the html tag
with all the attributes it should work, shouldn't it?
Click to expand...

I would think so.

Maybe you're leaving something out? I noticed in the code that I
posted he uses:
sizingMethod='scale'
Click to expand...

And he also sets the height and width attributes. Seems like when I
was reading this guy's solution, he mentioned that the height and
width needed to be set.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

PNG transparency in IE6 1
Please Help? 0
Help with Visual Lightbox: Scripts 2
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Stuck with html and css 25
Sort by number of characters 1
Only one table shows up with the information 2
Need help , Having problem with Drag n Drop ? 9

Members online

No members online now.
Total: 33 (members: 1, guests: 32)
Robots: 299

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,007
Latest member
obedient dusk

Latest Threads

Top