WebFX WebBoard
Message Thread:
View All Messages
Back to WebFX
 Using 8 bit transparent PNGs in DHTML Menu 4, Guillermo, March 7, 2004
     Re:Using 8 bit transparent PNGs in DHTML Menu 4, Mattes, March 8, 2004
         Re:Using 8 bit transparent PNGs in DHTML Menu 4, Guillermo, March 8, 2004
             Re:Using 8 bit transparent PNGs in DHTML Menu 4, Mattes, March 8, 2004
                 Re:Using 8 bit transparent PNGs in DHTML Menu 4, Guillermo, March 9, 2004
                     Re:Using 8 bit transparent PNGs in DHTML Menu 4, Mattes, March 9, 2004
                         Re:Using 8 bit transparent PNGs in DHTML Menu 4, Guillermo, March 9, 2004

Subject: Re:Using 8 bit transparent PNGs in DHTML Menu 4 From: Mattes Date: March 9, 2004

Yes, I did and it has been working!!!
But I didn't figure out where to place the behavoir file (.htc) and the "blank" image. I just copied both files into all folders so I didn't need to care about file structure. That DHTML 4 Menu has a folder skin, where the relevant stylesheets for the menu are in (winclassic.css). You have to add the png behavior in that file too. Otherwise it does not work. Hope that's the problem.......

Mattes

From: Guillermo
Sent: March 9, 2004
Subject: Re:Using 8 bit transparent PNGs in DHTML Menu 4

Mmm... I'm not sure that does anything... have you tried it yourself? My PNGs in the menu are still *not* transparent...


 

From: Mattes
Sent: March 8, 2004
Subject: Re:Using 8 bit transparent PNGs in DHTML Menu 4

Well, I try to explain:
As you said, every PNG displays correctly on your page - except those who appear in the menu. I assume, that the images are rendered before they are "copied" into the menu......

Ok, I had a look at the DHTML Menu 4 - add this piece of code at the end of the script of DHTML Menu 4:

menuBar.write();

// "Stupid" Workaround ;-)
var images = document.getElementsByTagName("IMG");
for ( var i=0; i<images.length; i++ ) {
  images[i].src = images[i].src; // Triggers onPropertyChange again so that the filter works
}

Mattes

From: Guillermo
Sent: March 8, 2004
Subject: Re:Using 8 bit transparent PNGs in DHTML Menu 4

Hmm... I'm not sure I understand. I've applied the behavahior to the img class, and every PNG displays currectly BUT the icons in the menu.

Now, what else do I have to change??


 

From: Mattes
Sent: March 8, 2004
Subject: Re:Using 8 bit transparent PNGs in DHTML Menu 4

Hi!
Simply use the PNG Behavior published on this site (webFX). You don't need to understand how it work, just link it to your images by adding a stylesheet like: img { behavior:url(pngbehavior.htc) }.....

BUT:
If you load the images before you put them in the menu, the effect won't work. Example: You load the content of the menu folders in your document and copy the content by something like innerHTML into the menu folder. The point is: The Behavior triggers on propertyChange, which works when the image is loaded first. If you copy the source you don't copy the right image (hard to explain)..... ;-)
Maybe you don't need to know..... if so, ask for that again - there's a simple workaround!

Mattes

From: Guillermo
Sent: March 7, 2004
Subject: Re:Using 8 bit transparent PNGs in DHTML Menu 4

I was wondering how can I use PNG graphics with 8 bit transparency (PNG-24) for the menu icons in DHTML Menu 4. What should I tweak ar add in order to display it's transparecy correctly in IE.

Thanks!









Reply
Name: 
Email: 
Subject: 

Enter your reply to this message below. HTML tags are not supported but words that start with http://, ftp:// or mailto: are converted to links.


View All Messages
Back to WebFX