Jump to content

PNG? - Solved - See mritter's method

almulder
 Share

Recommended Posts

almulder

almulder

Posted
Posted (edited)

Update: Edit: see mritter's method below. (Work with all) <-- Current Update

In v5.0 Final does anyone have the png's working. I don't see that they worked and I just downloaded the new version.

if they dont work currently what is the fix for it?

Both for tooltips and wpi main page.

???

I have tryed "Dumpy Dooby" method but with no luck. Has anyone else got it to work?

Update: Got the png's working in wpi main, & Tool Tips (Some what) - See second post for answer!

Also, here's that png alpha-index fix (put this in the header of wpi.htm:

<!--[if lt IE 7]>
<script defer type="text/javascript">

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[i]
	  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
	  }
   }
}
</script>
<![endif]-->

That tweak allows for 8bit alpha indexing with png images. I just tested it and it worked. I didn't even have to specify the height/width (unlike some of the older methods).

Edited by almulder
Link to comment
Share on other sites

almulder

almulder

Posted
  • Author
Posted (edited)

Got it all to work. (Some what)

Want the fix? (Need to edit 2 files and create 1 newone)

Here is the fix:

Create 1 new file called "pngfix.js" and place it into the folder "wpiscripts"

Edit the newly created file and add.

function pngcheck(){
	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[i]
		  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
		  }
	   }
	}
}

Dont forget to save it now. then close.

Now open "WPI.hta" for editing.

Locate this section of code, about the middle of the page.

<script	type="text/javascript" src="./wpiscripts/lang.js" application="yes">
</script>

add this code after that

<script type="text/javascript" src="./wpiscripts/pngfix.js" application="yes">
</script>

Should look like this now

<script	type="text/javascript" src="./wpiscripts/lang.js" application="yes">
</script> 
<script type="text/javascript" src="./wpiscripts/pngfix.js" application="yes">
</script>

Now find this section in that same file, Near the bottom

<script type="text/javascript">
	main();
	if (!LoadThemedContent())
		ExitWPI();
</script>

add this code after that.

<script type="text/javascript">
	pngcheck();
</script>

Should look like this now

<script type="text/javascript">
	main();
	if (!LoadThemedContent())
		ExitWPI();
</script>
<script type="text/javascript">
	pngcheck();
</script>

Now save that file and close it.

Final Change:

Locate tips.js file and open for editing

Find this section of code:

function stm(t,s)
{

Add this line of code at the bottom of that function just before the "}"

pngcheck();

Should look like this when done

function stm(t,s)
{
	position="tips.js";
	whatfunc="stm()";

	if (!ShowToolTips)
		return;

	if (MI_sNav && isOK)
	{	
		if (document.onmousemove != mig_mo || window.onresize != mig_re) 
			mig_hand();
		if (fl && s[17]>-1 && s[18]>0)
			mig_layCss().visibility="hidden";

		var ab="", ap="";
		var titCol=s[0] ? "COLOR='"+s[0]+"'" : "";
		var titBgCol=s[1] && !s[2] ? "BGCOLOR='"+s[1]+"'" : "";
		var titBgImg=s[2] ? "BACKGROUND='"+s[2]+"'" : "";
		var titTxtAli=s[3] ? "ALIGN='"+s[3]+"'" : "";
		var txtCol=s[6] ? "COLOR='"+s[6]+"'" : "";
		var txtBgCol=s[7] && !s[8] ? "BGCOLOR='"+s[7]+"'" : "";
		var txtBgImg=s[8] ? "BACKGROUND='"+s[8]+"'" : "";
		var txtTxtAli=s[9] ? "ALIGN='"+s[9]+"'" : "";
		var tipHeight=s[13] ? "HEIGHT='"+s[13]+"'" : "";
		var brdCol=s[15] ? "BGCOLOR='"+s[15]+"'" : "";

		if (!s[4])
			s[4]="Arial,Helvetica,Verdana";
		if (!s[5])
			s[5]=1;
		if (!s[10])
			s[10]="Arial,Helvetica,Verdana";
		if (!s[11])
			s[11]=1;
		if (!s[12])
			s[12]=200;
		if (!s[14])
			s[14]=0;
		if (!s[16])
			s[16]=0;
		if (!s[24])
			s[24]=10;
		if (!s[25])
			s[25]=10;
		hs=s[22];
		if (MI_pSub==20001108)
		{
			if (s[14])
				ab="STYLE='border:"+s[14]+"px solid"+" "+s[15]+"'";
			ap="STYLE='padding:"+s[16]+"px "+s[16]+"px "+s[16]+"px "+s[16]+"px'";
		}

		var closeLink=hs==3 ? "<TD ALIGN='right'><FONT SIZE='"+s[5]+"' FACE='"+s[4]+"'><A HREF='java script:void(0)' ONCLICK='mig_hide(0)' STYLE='text-decoration:none;color:"+s[0]+"'><B>Close</B></A></FONT></TD>" : "";
		var title=t[0] || hs==3 ? "<TABLE WIDTH='100%' BORDER='0' CELLPADDING='0' CELLSPACING='0' "+titBgCol+" "+titBgImg+"><TR><TD "+titTxtAli+"><FONT SIZE='"+s[5]+"' FACE='"+s[4]+"' "+titCol+"><B>"+t[0]+"</B></FONT></TD>"+closeLink+"</TR></TABLE>" : "";
		var txt="<TABLE "+ab+" WIDTH='"+s[12]+"' BORDER='0' CELLSPACING='0' CELLPADDING='"+s[14]+"' "+brdCol+"><TR><TD>"+title+"<TABLE WIDTH='100%' "+tipHeight+" BORDER='0' CELLPADDING='"+s[16]+"' CELLSPACING='0' "+txtBgCol+" "+txtBgImg+"><TR><TD "+txtTxtAli+" "+ap+" VALIGN='top'><FONT SIZE='"+s[11]+"' FACE='"+s[10]+"' "+txtCol +">"+t[1]+"</FONT></TD></TR></TABLE></TD></TR></TABLE>";

		mig_wlay(txt);
		tb=
		{
			trans:s[17],
			dur:s[18],
			opac:s[19],
			st:s[20],
			sc:s[21],
			pos:s[23],
			xpos:s[24],
			ypos:s[25]
		};
		if (MI_IE4)
			mig_layCss().width=s[12];
		e_d=mig_ed();
		Count=0;
		move=1;
	}
pngcheck();
}

Now save file and close.

Now Test

Should be working now.

Thanks "Dumpy Dooby" for finding the code for us to use.

A little bit of editing and now it works. (Some What)

Enjoy.

Update: The only side effect it that if you have any files that are png's in the main wpi file (Not ToolTips) the script resizes them. Have tryed editing the .js code but with no luck. If it is changed at all the code stops working.

- Albert

Edited by almulder
Link to comment
Share on other sites
almulder

almulder

Posted
  • Author
Posted

Tested this method on IE7, (Yes IE7 fixes it automatic but I did not remove the code) without removing the code or having it check fo IE7 and the method still works, no interferance with the code staying in IE7, As far as I can tell IE7 just skips that code. So we should have no problem adding this code to WPI.

Can someone else please verify that it continues to work in IE7. (Nice to have other try)

Link to comment
Share on other sites
Dumpy Dooby

Dumpy Dooby

Posted
Posted
Tested this method on IE7, (Yes IE7 fixes it automatic but I did not remove the code) without removing the code or having it check fo IE7 and the method still works, no interferance with the code staying in IE7, As far as I can tell IE7 just skips that code. So we should have no problem adding this code to WPI.

Can someone else please verify that it continues to work in IE7. (Nice to have other try)

IE7 won't skip it. It will be interpreted; it just won't have any adverse effects (my assumption, anyway). As far as I can tell, your javascript doesn't have anything that would prevent IE7 from running it (although, my code in the thread prevented IE7 from running it).

Link to comment
Share on other sites
almulder

almulder

Posted
  • Author
Posted (edited)

Checked, and same here. Did some playing around with the png code (as that is where the problem is) and it is the code that keeps changing the code. Well keep digging. (Works fine for ToolTips) The only fix I know of is to change out the timer png to a jpg. That fixed the problem. (script keeps resizing the images to there full size)

Edited by almulder
Link to comment
Share on other sites
mritter

mritter

Posted
Posted

I made a fix that works for me and Dumpy Dooby's stop sign image.

In wpi.htm put this code inside the <head> tag:

<style type="text/css">
		img { behavior: url("./wpiscripts/pngbehavior.htc"); }
</style>

Put the attached file in wpiscripts folder. Make sure you have Common/spacer.gif, also. That's it.

Link to comment
Share on other sites
almulder

almulder

Posted
  • Author
Posted (edited)

just removed all the code I added and just added you method and it works (on everything).

Good work. Now how do you make it so that it only runs that code if it is not IE 7+

Edited by almulder
Link to comment
Share on other sites
mritter

mritter

Posted
Posted

Quick update to code for 5.5 and 6.0 check. Will not do fix if IE7.0. Change this line:

var supported = /MSIE (5\.5)|MSIE (6\.0)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";

Link to comment
Share on other sites
Dumpy Dooby

Dumpy Dooby

Posted
Posted
I made a fix that works for me and Dumpy Dooby's stop sign image.

In wpi.htm put this code inside the <head> tag:

<style type="text/css">
		img { behavior: url("./wpiscripts/pngbehavior.htc"); }
</style>

Put the attached file in wpiscripts folder. Make sure you have Common/spacer.gif, also. That's it.

That's actually the method that I use on my website. The problem, though, is that requires that you set a value for the height and width of the image, right? All of my code is valid XHTML so my images always have a specified height and width; I just want to make sure that's well known around these parts, because I could imagine people might get confused by having 1x1 PNG images.

Link to comment
Share on other sites
almulder

almulder

Posted
  • Author
Posted

<code>

<style type="text/css">

img { behavior: url("./wpiscripts/pngbehavior.htc"); }

</style>

</code>

This is the code I am now using and it seems to work. I have the PNG's set do different sizes (size specified within WPI Not resized images in another program) and they all seem to stay the correct size. No auto resizing. But I beleave it is because mritter edited the file.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...