Go
New
Find
Notify
Tools
Reply
  
-star Rating Rate It!  Login/Join 
Working Mechanic
Picture of un4givn72
Posted
Not sure where this should go but I was designing my web site, I designed some buttons that I saved as png files.
I inserted them into SS without incident. But when I went to resize them, somehow, it fubarred my transparancy!

The way that I found to keep this from happening is to uncheck Anti Alias and Re-Render.

Then I was able to resize the buttons and not have them loose their transparancy.

Not sure if this tidbit was discussed but I thought that I would post it here and see if it helps someone whom may have been having the same issue.
 
Posts: 59 | Location: Greenville, NC | Registered: November 06, 2005Reply With QuoteEdit or Delete MessageReport This Post
Guru 'Power' Mechanic
Picture of Bruceee
Posted Hide Post
I imagine if you ask for re-render with Render Background on, the default, that would lose the transparency.

But if you ask for re-render with Render Background off (Geometry Editor Options tab), I would hope you keep the transparency. If not, it's a bug.

I haven't used transparency with png, and I don't know of a way you can specify a transparent color for either png or png8 format in SiteSpinner. So I don't have an easy way to make a transparent button of my own. But if you can post a link to a page with such a button, I'm happy to experiment with one of yours Smile
 
Posts: 9266 | Location: Wellington, New Zealand | Registered: December 11, 2003Reply With QuoteEdit or Delete MessageReport This Post
Working Mechanic
Picture of un4givn72
Posted Hide Post
Bruceee, Thanks for the reply. I will see if unchecking Render Background makes any difference.

All I know is that when I place a png that I create in a graphics program (mainly Photoshop) with transparancy and not uncheck Re-render, upon resizing it, I loose transparancy. Things start looking ugly.

Now the format that I used for this and other pngs I will note do not have the best support in SS.

Since I have to save these as png24 and not either png8 or gif. I loose too many colors and I still need the transparancy. So I choose the png24 format. Smile

Since these versions of png are not supported real good, you will see colors that are not shown if you preview the png's in a image viewer. But when previewed in a project, it looks like it should.

You are welcome to play around with one of the buttons if you like. I will have to send one to you privately though. I do not have the site up yet.
 
Posts: 59 | Location: Greenville, NC | Registered: November 06, 2005Reply With QuoteEdit or Delete MessageReport This Post
Working Mechanic
Picture of un4givn72
Posted Hide Post
OK I just checked and even with the checkbox cleared in the Render Background, if I do not uncheck Re-Render, then my transparancy gets hosed.

Here is just my .02 on this issue. I know by looking at the forums that the format of png is not that well supported for transparancy. So I am already starting out against the wind sort of speak.

Now with Re-Render checked, SS will try and generate a "thumbnail" of the object upon resize. This is most of the time a wonderful thing....unless you are using png24 with transparancy. Then things get ugly!

I believe that upon re-rendering the button (because of a resize transformation), that SS somehow removes the transparancy and no longer respects it. Now if you remove that check mark, SS will not try and re-render it and the transparancy stays.

Now on well supported formats, I am sure that it works well but on png24, you will have to do this or loose transparancy. For the png's that I am using (Navigational buttons), I do not think that I need SS to generate a thumbnail for them so this "work around" suits me quite nicely Wink

If anyone wishes to play around with this, message me privately and I will send you one of the buttons that I created so you can see this for yourself
 
Posts: 59 | Location: Greenville, NC | Registered: November 06, 2005Reply With QuoteEdit or Delete MessageReport This Post
Working Mechanic
Picture of un4givn72
Posted Hide Post
Well I found out that IExplorer did not like my buttons. So that was not a fun thing to see.

But I found some javascript code that will allow IE to render the button like it should.

Supposedly IE7 is supposed to have full transparancy support. Let us hope and see.

I think that next time, I will stick to something simple Smile
 
Posts: 59 | Location: Greenville, NC | Registered: November 06, 2005Reply With QuoteEdit or Delete MessageReport This Post
Guru 'Power' Mechanic
Picture of Bruceee
Posted Hide Post
Yes, please, send me a button. My email address is in my profile. (Private messaging does not work on these forums, so I can't message you directly.)

Also do you have a link to the javascript code?
 
Posts: 9266 | Location: Wellington, New Zealand | Registered: December 11, 2003Reply With QuoteEdit or Delete MessageReport This Post
Working Mechanic
Picture of un4givn72
Posted Hide Post
Bruceee:

I will try and send it to you tonight. I will send you a button to play around with.

On the script, you are referring to the code for making IE respect png transparancy??

I will send that link to you also when I send the button.
 
Posts: 59 | Location: Greenville, NC | Registered: November 06, 2005Reply With QuoteEdit or Delete MessageReport This Post
Guru 'Power' Mechanic
Picture of Bruceee
Posted Hide Post

This is this image in question, a png24 with "alpha transparency". You should be able to drag from here on to your SS workpage. If that does not work, right click on the image and save it to your local disk.

This is the link to the code to fix the IE problem. Next is the code, slightly modified to allow for IE7 which should have built in support.
<!--[if gte IE 5.5000]>
<SCRIPT type="text/javascript">
function correctPNG()
{
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
     }
  }
}
if (parseInt(navigator.appVersion) < 7)
  window.attachEvent("onload", correctPNG)
</SCRIPT>
<![endif]-->
Include it as a custom header (recommended) or as a Code object (send "to back" with CSS positioning off).

If you re-render the button, SS does indeed lose the transparency. I think that is a bug. Also and perhaps this is more of a missing feature, the workpage view does not show the transparency.

I tested with a colored rectangle partially covering the background underneath the button. I tested the code in IE6, (WinXP and SP1), Firefox 1.0.7, Opera 8.5 and Netscape 8.0.3.3, and the button worked correctly in preview with each. The above link points out some cases where it does not work in IE6, so if you plan to use the code, it is worth checking out those other cases, and the workarounds.

This alpha transparency is a neat feature, and it is a great pity IE6 does not have built-in support for it. As IE6 is a major browser we can't ignore it. So for about the next five years, until IE6 fades away, we are stuck with adding some kind of extra code to cater for IE6.

Or not using this kind of transparency. Adding this extra code is a hassle, adds about 2K to your page size, and may not always work.

Some other foibles: I couldn't upload the button to my photo album on these forums. Infopop/groupee claimed it was an invalid format. Also in IE6, I could not drag the button off the preview webpage into anywhere --let alone a SS workpage.

This message has been edited. Last edited by: Bruceee,
 
Posts: 9266 | Location: Wellington, New Zealand | Registered: December 11, 2003Reply With QuoteEdit or Delete MessageReport This Post
Working Mechanic
Picture of un4givn72
Posted Hide Post
WOW! Thanks for all of the testing Bruceee!

I am glad that the button did for you what it did for me. Glad that someone else got the same results as me.

Cool modification for the code for IE7. I am going to have to save that code for later use Wink

I think that there is other ways as well to get IE to respect the alpha transparancy as well but I came across the javascript first.

I sure have learned some things along the way here that is for sure and continue to keep learning.

Again Bruceee, thank you for making sure that I was not have a unique issue.

Next time, I go for simple design. Smile
 
Posts: 59 | Location: Greenville, NC | Registered: November 06, 2005Reply With QuoteEdit or Delete MessageReport This Post
VM Staff
Picture of Derry
Posted Hide Post
Consider this dually noted.


- Derry
 
Posts: 4167 | Location: Toronto, Canada | Registered: January 08, 2003Reply With QuoteEdit or Delete MessageReport This Post
Working Mechanic
Posted Hide Post
When I use this code IE wants me to authoriez active content. Is there anyway I could get rid of this annoying IE restriction? I personally use FF but most visitors are under IE.

Thanks,

Erwin
 
Posts: 25 | Registered: August 16, 2005Reply With QuoteEdit or Delete MessageReport This Post
Guru 'Power' Mechanic
Picture of Bruceee
Posted Hide Post
I have tried the Amara patch and that worked for me. Discussion here.
 
Posts: 9266 | Location: Wellington, New Zealand | Registered: December 11, 2003Reply With QuoteEdit or Delete MessageReport This Post
  Powered by Eve Community  
 


™ & © 1998 - 2008, Virtual Mechanics Inc. All rights reserved.