...

View Full Version : AlphaImageLoader PNG transparency for IE



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



<SCRIPT>
var bToggle = 1

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

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

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



http://msdn2.microsoft.com/en-us/library/ms532969.aspx

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

rmedek
11-02-2007, 10: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 {
position:relative;
height:250px;
width:250px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/workshop/graphics/earglobe.gif', sizingMethod='scale');
}

abduraooft
11-02-2007, 10: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.

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

index.html


<body>
<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>
</div>
</body>


style.css


#consultingSolutions {
position: absolute;
height: 17px;
width: 167px;
margin-top: 16px;
margin-left: -69px;
background:url(../images/consulting_solutions.png) !important;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/consulting_solutions.png");
}


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/

abduraooft
11-03-2007, 09: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!

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

VIPStephan
11-09-2007, 03: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum