View Full Version : AlphaImageLoader PNG transparency for IE

11-02-2007, 06:54 AM
Does anyone know if the AlphaImageLoader script can be used in a CSS file?

var bToggle = 1

<!-- Toggle the sizingMethod property to resize the image. -->
function fnToggle(oObj) {
if (bToggle) {
bToggle = 0;
oObj.innerText='Enlarge It';}
else {
bToggle = 1;
oObj.innerText='Make Normal';}

<!-- This DIV is the target container for the image. -->
<DIV ID="oDiv" STYLE="position:relative; height:250px; width:250px;
src='/workshop/graphics/earglobe.gif', sizingMethod='scale');" >

<BR><BUTTON onclick="fnToggle(this);">Make Normal</BUTTON>


Or if anyone knows a better javascript for PNG transparency, that is compatible in a CSS file, please lemme know :) thanks

11-02-2007, 09:06 AM
You are using it in a CSS file already. :) Sort of, anyway…you have it inline, but yes, you can move it to an external file:

#oDiv {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/workshop/graphics/earglobe.gif', sizingMethod='scale');

11-02-2007, 09:09 AM
Have a look at a previous thread PNG Transparency support in IE 5.5+ (http://www.codingforums.com/showthread.php?t=125855), which may help you.

11-02-2007, 06:49 PM
I understand, and it makes sense, but its still not showing up correctly. heres my code


<div id="indexContainer">
<div id="navBar">
<!-- large top nav bar words -->
<a id="consultingSolutions" href="pages/ConsultingSolutions_ProgramManagement.html" title="Consulting Solutions"><span></span></a>
<a id="pastResults" href="pages/PastResults.html" title="Results"><span></span></a>
<a id="insight" href="pages/Insight.html" title="Insight"><span></span></a>
<a id="clientsSay" href="pages/WhatClientsSay.html" title="What Clients Say"><span></span></a>
<!-- large top nav bar arrows -->
<a id="consultingSolutionsA" href="#" title="Consulting Solutions Arrow"><span></span></a>
<a id="pastResultsA" href="#" title="Results Arrow"><span></span></a>
<a id="insightA" href="#" title="Insight Arrow"><span></span></a>
<a id="clientsSayA" href="#" title="What Clients Say Arrow"><span></span></a>
<!-- small nav bar words -->
<a id="home" href= "index.html" title="Home"><span></span></a>
<a id="contact" href="" title="Contact"><span></span></a>
<a id="about" href="pages/about.html" title="About"><span></span></a>
<!-- small nav bar arrows -->
<a id="homeA" href="#." title="Home Arrow"><span></span></a>
<a id="contactA" href="#" title="Contact Arrow"><span></span></a>
<a id="aboutA" href="#" title="About Arrow"><span></span></a> </div>


#consultingSolutions {
position: absolute;
height: 17px;
width: 167px;
margin-top: 16px;
margin-left: -69px;
background:url(../images/consulting_solutions.png) !important;

when i put background:none; It takes away the image all together. Is it because Im calling my div's in a <a ref> that they are not working?

if you wanna look at my site its http://www.geocities.com/justinbgood07/

11-03-2007, 08:01 AM
background:none; is for IE (since FF won't consider it due to previous !iportant rule) to remove the background property, so as to set it by filter.

Is it because Im calling my div's in a <a ref> that they are not working?

You've not mentioned any div in CSS, and I can't see any div inside <a>
And the paths specified in background and filter are different!

11-09-2007, 02:13 AM
i thinkk <a id is calling the div id... or do i need to put <a div id="whatever" ?

11-09-2007, 02:20 AM
A little off topic but why are you having empty links? It hasn’t come to your mind that nowadays there aren’t just Netscape and IE (or Fx and IE for that matter) as the only two applications being able to access the internet, and people might have images, scripts, styles, and what not disabled, and thus won’t see anything on your page in that case, has it?
It would be the easiest thing to put some text there and hide it with some CSS image replacement techinque (http://www.mezzoblue.com/tests/revised-image-replacement/).

Semantic HTML (http://brainstormsandraves.com/articles/semantics/structure/) is the key to good website development.