Email conversation
| From | Anonymous |
|---|
| To | Me |
|---|
| Subject | Making Internet Explorer use PNG Alpha transparency |
|---|
| Date | 4 May 2004 04:16 |
|---|
hello..im having trouble w/ the png transparencies still i followed
what you said but it didnt work for me.... somehow i got the one ong
image to not have the grey background but i cant move it to plae it
where i want... here take a look ... http://xxx.xxxxxxxxxxxxxxxxxx.xxx
... seeif you can help me id really appreciate it ... heres the script
i used ...
<span style="width:400px;height:32px;
/* the height and width should match those of the image */
filter:progid:
DXImageTransform.Microsoft.AlphaImageLoader(src='humanresources.png');
/* apply the background image with Alpha in IE5.5/Win. The src should
match that of the image */
"><img style="position: absolute; filter:progid; left: 455px; top:
199px; z-index: 16;" src="varyAlpha.png" width="400" height="32"
border="0" alt=""></span>
... my image is humanresources.png....hopefully you can see what im
doing wrong...
thanks for your help...
Anonymous
| From | Me |
|---|
| To | Anonymous |
|---|
| Subject | Re: Making Internet Explorer use PNG Alpha transparency |
|---|
| Date | 4 May 2004 08:30 |
|---|
I think I know what your problem is. The alpha workaround applies the image
to the span in Internet Explorer, and completely hides the original image.
You are positioning the image, but leaving the span where it is. Simply
apply your positioning to the span instead of the image, and it should work
properly in all current browsers:
<span style="width:400px;height:32px;
/* the height and width should match those of the image */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='humanresources.png');
/* apply the background image with Alpha in IE5.5/Win */
position: absolute; left: 455px; top: 199px; z-index: 16;
"><img style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);"
src="varyAlpha.png" width="400" height="32" border="0" alt=""></span>
hope this helps, feel free to contact me again if it still does not work.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Anonymous |
|---|
| To | Me |
|---|
| Subject | Re: Making Internet Explorer use PNG Alpha transparency |
|---|
| Date | 4 May 2004 15:48 |
|---|
hello...thanks for your help... i got it to work...but just so i
understand...the "AlphaImageLoader(src='humanresources.png');" is the
pic ...then the "img
style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);"" is
the image that will be moving around on the screen when you assign the
left and top numbers to it?....i hope im understanding this correctly
because i now have the solution but i want to understand it also....
thanks again for your time... and if there is an easier way to
understand it feel free to try ... talk to you soon... thanks
again.Anonymous
| From | Me |
|---|
| To | Anonymous |
|---|
| Subject | Re: Making Internet Explorer use PNG Alpha transparency |
|---|
| Date | 4 May 2004 20:24 |
|---|
the img style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);"
is the original picture, made invisible in IE 5.5+
the "AlphaImageLoader(src='humanresources.png');" is the span that is
repositioned. it contains the picture, so in normal browsers, when the span
is repositioned, the image inside it is moved with it. In IE 5.5+, this is
converted into an image (and the original image is made invisible). in both
cases it is the span that is actually repositioned.