Difficulty using PNG images with transparency in COOLjsTree

[JOCA]

Does anybody know why COOLjsTree is having problems with PNG (e.g.: myimage.png) images using Microsoft’s AlphaImageLoader filter? This filter works everywhere in any HTML document’s body but I have not been successful putting it inside COOLjsTree. Here are two variations of the code I am using in some nodes:

['<img src="blank.gif" style="width: 155px; height: 51px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Button_Pers-R.png', sizingMethod='scale')"/>', 'personal01.htm', null,

[' <img src="blank.gif" width=155 height=51 border=0 style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Button_Pers-R.png', sizingMethod='scale')"> ', 'personal01.htm', null,

The regular image code (without the filter) does not produce any errors but MS Internet Explorer does not display the png’s transparency unless I use the filter. Here is the code without the filter:

[' <img src="Button_Pers-R.png" width=155 height=51 border=0>', 'personal01.htm', null,

However, as soon as I add the filter, the tree does not even load.

How can I solve this? I really want to use PNG images (they look so much better). Any bright ideas? Thanks in advance to those who contribute to solving this problem.

JOCA

[AlexKunin]

Try to escape singlequotes:
['<img src="blank.gif" style="width: 155px; height: 51px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'Button_Pers-R.png\', sizingMethod=\'scale\')"/>', 'personal01.htm', null,

[JOCA]

I have also been trying to set the folders and buttons (+/-) to use .png images (using the AlphaImageLoader filter), but with no success. I tried your “escape singlequotes” syntax in the format (tree1_format.js) file in fields nr.3, 6 and even 15; but so far in the best cases the image is displayed but also part of the html necessary to define the style inside the <img> tag is displayed and the icon of a broken image is also displayed. I am lost. How come the same syntax works in one place but not in another? Here is how I unsuccessfully did it in fields nr.3 inside tree1_format.js

//3. couple of button images (collapsed/expanded/blank)
['<img src="blank.gif" style="width: 50px; height: 51px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'Button_F-Close.png\', sizingMethod=\'scale\')"/>', '<img src="blank.gif" style="width: 50px; height: 51px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'Button_F-Open.png\', sizingMethod=\'scale\')"/>', "b.gif"],

Interestingly, if I try to use the same syntax (even in the nodes definition file (tree1_nodes.js) where it worked successfully inside the Caption field), inside the variable declaration used to produce custom images for each node (as demonstrated below) it does not work …

var new_imgs2 = ["myfolder.gif",
"myopenfolder.gif",
"mypage.gif",
"myminus.gif",
"myminusbottom.gif",
'<img src="blank.gif" border=0 style="position:absolute; top:0px; left:0px; width: 50px; height: 51px; z-index:3; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'Button_F-Close.png\', sizingMethod=\'scale\')"/>',
"myplusbottom.gif",
"myline.gif",
"myjoin.gif",
"myjoinbottom.gif"
];
....
['Scripts', null, null, {"format":{ fimgsize:[5,51], bimgsize:[50,51], "eimages":new_imgs2}},
....

… it still produces the result described above (the image is displayed but also part of the html necessary to define the style inside the <img> tag is displayed and the icon of a broken image is also displayed). Note that that I am only using a .png file for one of the images as a test (as opposed to using .png files for all). The rest are jus the regular .gif files.

Please, let me know what syntax should I use to be able to use .png images (using the AlphaImageLoader filter) in folders and buttons (+/-).

JOCA