Sandman wrote:
I have a javascript I've downloaded that goes through all
PNG files and enables the transparency channel in them for
IE5.5+ by converting them to SPAN layers with the image
as background.
This works great until I put one of these PNG files inside a
display:none block and later sets the block to display:block -
then the SPAN (that was the PNG <img>) remains hidden.
<snip>
When the script replaces the IMG with the SPAN it transfers the width
and height properties of the IMG to the CSS width and height properties
of the SPAN's style attribute. If the IMG is in a - display:none: -
block then its width and height values are both zero and those are the
values assigned to the SPAN's style. The span does become 'visible' when
the containing block is switched to - display:block; - it just doesn't
occupy any space because it has zero dimensions.
Different browsers have different attitudes towards the assignment of
values to the width and height properties of an IMG element, some always
reflect the values of the attributes in the HTML, some follow the actual
values from the image file, some dynamically reflect the current image
size (as applied through CSS). On some you can recover the original
attribute values with - getAttribute('width/height') -, but not on IE as
that is also dynamically updates them to reflect the current state of
the image.
As the problem only applies to IE I don't think you can get back to the
originally specified dimensions of the IMG while the image is
inheriting - dispaly:none; -; it is a condition that this PNG
compensating script has not taken into account. So the script needs to
be re-written. Two possibilities spring to mind:-
1. Double up the width and height assignments in custom attributes and
have the script use - getAttribute - calls to assign those values in the
SPAN's style attribute. (the result will not be valid HTML 4+/XHTML 1+)
2. Instead of creating a SPAN, create an IMG that has as it's SRC an
image that is of the same dimensions as the original (probably by
translating the original SRC into an alternative (e.g.:- imgFile.png - >
imgFile.gif) but is a transparent image, and use the Alfa filter as that
transparent IMG's background. The IMG should resort to its 'natural'
size when the container's display is switched to block.
I have not tired either.
Richard.